WedX - журнал о программировании и компьютерных науках

Изменить значок меню гамбургера - Xamarin.Forms Android & UWP

Я видел несколько вопросов, похожих на этот для Android, только в студии Android или UWP, но я создаю приложение Xamarin.Forms для UWP и Android, и я хотел бы изменить значок гамбургера на собственный, который я сделал. Вот как это сейчас выглядит на Android:

гамбургер-меню 1

Это похоже на UWP, но в основном я собираюсь сделать следующее:

введите описание изображения здесь

Есть ли простой способ сделать это на моей главной странице сведений? Я искал какой-нибудь элемент тега, который я мог бы использовать в файле .xaml, возможно, примерно так:

<MasterDetailPage.Master hamburgerIcon="myHamburgerIcon.png">

</MasterDetailPage.Master>

Или мне нужно создать код для конкретной платформы, такой как настраиваемое средство визуализации как для UWP, так и для Android? Чтобы быть ясным, я спрашиваю, как изменить значок для трех полосок (значок гамбургера), но если бы кто-то мог добавить, как изменить цвет фона панели действий, это было бы бонусом.


  • установить свойство Icon страницы, которая используется для Мастера 16.05.2020
  • @ Джейсон Как и где? Я попытался добавить эту строку Icon="hmenu.png" в открывающий тег <MasterDetailPage>, но ничего не вышло 16.05.2020
  • если Menu.xaml - ваш Мастер, то в Menu.xaml 16.05.2020
  • ОК, я попробовал, как указано выше, не сработало. 17.05.2020
  • @ NicoZhu-MSFT Я пока не нашел решения. Я пробовал установить атрибуты Icon и IconImageSource в нескольких местах, но, к сожалению, пока безуспешно. 19.05.2020

Ответы:


1

Изменить значок меню гамбургера - Xamarin.Forms Android & UWP

Для части UWP вы можете легко заменить значок гамбурга. Поскольку на платформе UWP он был отрисован с помощью со стилем PaneButton, и вы можете найти ее здесь. Просто скопируйте его в файл UWP App.xaml и замените свойство содержимого следующим образом.

<Application.Resources>
    <ResourceDictionary>
        <Style x:Key="PaneButton" TargetType="Button">
            <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="Height" Value="48" />
            <Setter Property="Width" Value="48" />
            <Setter Property="Content" Value="&#xE701;" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

Для части Android нам нужен пользовательский MasterDetailPageRenderer рендер, как показано ниже

[assembly: ExportRenderer(typeof(MainPage), typeof(IconNavigationPageRenderer))]
namespace masterDe.Droid
{
    public class IconNavigationPageRenderer : MasterDetailPageRenderer
    {
        public IconNavigationPageRenderer(Context context):base(context) { }
        private static Android.Support.V7.Widget.Toolbar GetToolbar() => (CrossCurrentActivity.Current?.Activity as MainActivity)?.FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);



        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
            var toolbar = GetToolbar();
            if (toolbar != null)
            {
                for (var i = 0; i < toolbar.ChildCount; i++)
                {
                    var imageButton = toolbar.GetChildAt(i) as Android.Widget.ImageButton;



                    var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
                    if (drawerArrow == null)
                        continue;


// replace default hamburg icon
                    imageButton.SetImageDrawable(Forms.Context.GetDrawable(Resource.Drawable.icon));
                }
            }
        }
    }
}
18.05.2020
  • Я нашел словарь ресурсов приложения в своем приложении, файл xaml и попробовал этот ‹Style x: Key = PaneButton TargetType = Button› ‹Setter Property = ImageSource Value = hmenu.png /› ‹/Style› Но это не сработало. Я не пробовал предложенное вами решение для Android, оно кажется сложным. Хотя, в конце концов, я попробую, если не найду более простого решения. 19.05.2020
  • Обратите внимание, что нам нужно разместить стиль PaneButton в проекте uwp App.xaml. 20.05.2020
  • Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]