2

How can I change the hamburger menu icon in a .NET MAUI app?

I've updated the style of all my icons and I want to change the hamburger menu icon to a custom PNG.

I tried the following in Styles.xaml but that doesn't seem to be the correct property to edit.

<Style TargetType="FlyoutPage">
    <Setter Property="IconImageSource" Value="custom_menu_icon.png" />
</Style>
Sam
  • 26,817
  • 58
  • 206
  • 383
  • I am trying to create a hamburger menu without a success. Can you show me your code for example, please. – Wasyster Feb 04 '23 at 19:42
  • Are you using `AppShell` in your MAUI app? If so, do you have `FlyoutItem`'s defined in `AppShell.xaml`? – Sam Feb 04 '23 at 20:36
  • Yes I am using AppShell. I tried everything and never got any result (visible result). – Wasyster Feb 05 '23 at 08:43

1 Answers1

2

Solution for FlyoutPage

The Flyout of the FlyoutPage is of type ContentPage and thus the icon should be set there instead:

<ContentPage
    IconImageSource="custom_menu_icon.png" />
</ContentPage>

You can also define it in the Styles.xaml and assign the style to the page:

<Style TargetType="ContentPage" x:Key="FlyoutStyle">
    <Setter Property="IconImageSource" Value="custom_menu_icon.png" />
</Style>

<ContentPage
    Style="{StaticResource FlyoutStyle}" />
</ContentPage>

See also: https://learn.microsoft.com/dotnet/maui/user-interface/pages/flyoutpage?view=net-maui-7.0#create-a-flyoutpage

This assumes that you're using the FlyoutPage and not Shell.

Solution for Shell

In case you're using Shell, you can define the style as follows:

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <!-- skipping existing setters here -->
    <Setter Property="Shell.FlyoutIcon" Value="custom_menu_icon.png" />
</Style>

See more: https://learn.microsoft.com/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0#flyout-icon

Julian
  • 5,290
  • 1
  • 17
  • 40