Xamarin Forms duplicated Toolbar in Master Detail Page in iOS

688 views Asked by At

I Have an app with master-detail page and toolbar items for every page. I set the master-detail page and the master page to NavigationPage.HasNavigationBar="False" to avoid duplication of the toolbar items. In Android, it works fine and no duplication, but for iOS, it still gives a duplicate for the toolbar items that has Order="Secondary"

Here is the Menu Page(Detail page):

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
             xmlns:effects="clr-namespace:AppXamarin"
             x:Class="AppXamarin.Pages.MenuPage" NavigationPage.HasBackButton="False">
    <ContentPage.BackgroundImage>
        <OnPlatform Android="exp20181029Artboard46" iOS="{OnIdiom Phone='exp20181029Artboard46',Tablet='Artboard'}"/>
    </ContentPage.BackgroundImage>
    <ContentPage.ToolbarItems>
        <ToolbarItem Name="menuitem1" Order="Secondary" Text="logout" Priority="0" Clicked="MenuItem1_Clicked"/>
        <ToolbarItem Order="Primary"  Priority="1" Clicked="cart_Clicked" Text="cart" x:Name="cart"/>
        <ToolbarItem Order="Primary"  Priority="0" Text="search" x:Name="searchbar" Icon="search.png"/>
    </ContentPage.ToolbarItems>

Master Main Page:

<?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:local="clr-namespace:AppXamarin.Pages"
                  x:Class="AppXamarin.Pages.MasterMainPage" NavigationPage.HasNavigationBar="False" NavigationPage.HasBackButton="False"
                  >

    <MasterDetailPage.Master>
        <local:MasterPage x:Name ="masterPage"/>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:MenuPage></local:MenuPage>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

And the Master Page:

<?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="AppXamarin.Pages.MasterPage"
           NavigationPage.HasNavigationBar="False" NavigationPage.HasBackButton="False" >
    <ContentPage.Title>
        <OnPlatform Android="Menu" iOS="☰"/>
    </ContentPage.Title>
    <ContentPage.Icon>
        <OnPlatform Android="menu.png"/>
    </ContentPage.Icon>
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

iOS result here

Android result here

Thanks in advance.

2

There are 2 answers

1
Janwilx72 On
switch (Device.RuntimePlatform)
        {
            case Device.iOS:

                NavigationPage.SetHasNavigationBar(this, false);
                break;
        }

Try this in the Code-Behind

0
mohammad anouti On

Maybe there is a bug on iOS for secondary toolbar items. I handle it by setting the order to primary on iOS and secondary on Android.

<ToolbarItem Name="menuitem1" Text="logout" Priority="0" Clicked="MenuItem1_Clicked">
            <ToolbarItem.Order>
                <OnPlatform Android="Secondary" iOS="Primary"/>
            </ToolbarItem.Order>