Search code examples
iosxamlxamarinxcasset

Xamarin forms - Menu icon on ios


I have this MasterDetailPage.

On UWP and Android the upper left icon of the menu is showed correctly, but on iOS appears the label "Menu".

I have an image "Hamburger" inside the xcassets, and I would like to use it.

How can I make this works?

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:views="clr-namespace:Menu_TEST.Views"
            x:Class="Menu_TEST.Views.MainPage">

    <MasterDetailPage.Master>
        <views:MenuPage />
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <NavigationPage>
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="Hamburger"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:ItemsPage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

Solution

  • I have an image "Hamburger" inside the xcassets, and I would like to use it.

    If want to get image from xcassets ,you can refer to this discussion.However this maybe can not work here in MasterDetailPage.Master.So suggest that better use the image from Resources folder.

    <MasterDetailPage.Master>
       <views:MenuPage />
    </MasterDetailPage.Master>
    

    From your code , MenuPage is setted to the MasterDetailPage.Master property. If want to set icon to the upper left,you need to set in MenuPage.xaml as follow.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="AppMasterDetail.Views.MenuPage"
                 Title="Menu"
                 Icon="hamburger.png"> //Here set icon ,image from 'Resources' folder
    
        <StackLayout VerticalOptions="FillAndExpand">
            <ListView x:Name="ListViewMenu"
                        HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10">
                                <Label Text="{Binding Title}" FontSize="20"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage>
    

    If not have this hamburger.png in project, you also can set title like CGPA6.4 said that.

    <?xml version="1.0" encoding="utf-8" ?>
        <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="AppMasterDetail.Views.MenuPage"
                     Title="☰">  //Here change 'Menu' to '☰'
            ...
    
     </ContentPage>
    

    Here is a official document with sample , you can refer to.