0

I am using Shell Page in xamarin forms. I need to change the hamburger menu icon. Below is my code

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:sys="clr-namespace:System;assembly=netstandard"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell"
       x:Name="shell"
       FlyoutBackgroundImage="photo.jpg"
       FlyoutBackgroundImageAspect="AspectFill"
       FlyoutHeaderBehavior="CollapseOnScroll"
       FlyoutIcon="Assets/Monkey.png">

The above codes works for Android but not from UWP. Even after changing my FlyoutIcon in UWP still I am getting default burger icon only.

James Z
  • 12,209
  • 10
  • 24
  • 44
Nambukarthy
  • 96
  • 11

1 Answers1

1

Can't change the hamburger menu icon for shell page in xamarin forms UWP

Please refer ShellRenderer source code. It has not implemented FlyoutIcon for UWP platform. As we known Shell will render as NavigationView within UWP platform. If we want to update menu button, we just need edit the content of Icon Textblock for PaneToggleButtonStyle, and insert it into UWP App.xaml file.

For example

<Style x:Key="PaneToggleButtonStyle" TargetType="Button">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" />
    <Setter Property="MinHeight" Value="{StaticResource PaneToggleButtonHeight}" />
    <Setter Property="MinWidth" Value="{StaticResource PaneToggleButtonWidth}" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
    <Setter Property="BorderThickness" Value="{ThemeResource NavigationViewToggleBorderThickness}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid
                    x:Name="LayoutRoot"
                    Height="{TemplateBinding MinHeight}"
                    MinWidth="{TemplateBinding MinWidth}"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="Stretch"
                    Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="{ThemeResource PaneToggleButtonHeight}" />
                    </Grid.RowDefinitions>

                    <Viewbox
                        x:Name="IconHost"
                        Width="16"
                        Height="16"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw">

                        <TextBlock
                            x:Name="Icon"
                            AutomationProperties.AccessibilityView="Raw"
                            FontSize="{TemplateBinding FontSize}"
                            Text="&#xE701;" />

                    </Viewbox>

                    <ContentPresenter
                        x:Name="ContentPresenter"
                        Grid.Column="1"
                        VerticalContentAlignment="Center"
                        AutomationProperties.AccessibilityView="Raw"
                        Content="{TemplateBinding Content}"
                        FontSize="{TemplateBinding FontSize}" />

                    <Border
                        x:Name="RevealBorder"
                        Grid.ColumnSpan="2"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" />

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundDisabled}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundChecked}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundChecked}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="CheckedPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="CheckedPressed">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="CheckedDisabled">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Nico Zhu
  • 32,367
  • 2
  • 15
  • 36