CODEWITHSUNDEEP
maui
Sam
Sam

Reputation: 30298

Change Hamburger Menu Icon in .NET MAUI app

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>

Upvotes: 4

Views: 4539

Answers (2)

Julian
Julian

Reputation: 8856

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#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#flyout-icon

Upvotes: 3

Prathyush Taneti
Prathyush Taneti

Reputation: 31

In your shell page, you can do add a propety:

<Shell FlyoutIcon="yourimage.png" ...

I hope this helps :)

enter image description here

Upvotes: 2

Related Questions