Xamarin Forms Flyout page inside navigation page causes navigation bar issue in UWP

Question

I am using Flyout Page which is a start page and wrapped with navigation page. I am getting below navigation bar issue(shows title twice).

Setting my start up page as "MainPage = new MainPage();" will fix the issue but I want it to be navigation page since my app has many pages which is not flyout.

Adding this line of code "NavigationPage.SetHasNavigationBar(this, false);" fixes the issue in Android but not in UWP.

Kindly someone let me know if any workaround is there to fix in UWP.

My code below. MainPage.xaml:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="HamburgerMenu.MainPage"
         xmlns:local="clr-namespace:HamburgerMenu;assembly=HamburgerMenu"
         FlyoutLayoutBehavior="Popover">

<FlyoutPage.Flyout>
    <local:MenuPage x:Name="menuPage" IconImageSource="burger_icon.png"/>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <local:ContactPage />
        </x:Arguments>
    </NavigationPage>
</FlyoutPage.Detail>

MainPage.cs:

 public partial class MainPage : FlyoutPage
{
    public MainPage()
    {
        NavigationPage.SetHasNavigationBar(this, false);
        InitializeComponent();
    }
}

ContactPage.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="HamburgerMenu.ContactPage"
         Title="My Title">
<ContentPage.ToolbarItems>
    <ToolbarItem Order="Primary" IconImageSource="contacts.png" />
    <ToolbarItem Order="Primary" IconImageSource="todo.png" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
    <StackLayout>
        <Label Text="Iam Content/Detail Page" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage.Content>

If the answer has resolved your issue please mark it as accepted — Nico Zhu - MSFT

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2021-04-23T02:59:51

Xamarin Forms Flyout page inside navigation page causes navigation bar issue in UWP

The problem is ContactPage was placed in the NavigationPage by default with following line, and if you package the MainPage with NavigationPage also, it will render the page Title twice. That is why remove MainPage's container will fix issue.

<FlyoutPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <local:ContactPage />
        </x:Arguments>
    </NavigationPage>
</FlyoutPage.Detail>

but I want it to be navigation page since my app has many pages which is not flyout.

If you want to make current page has no NavigationBar please call SetHasNavigationBar in the matched page, but not the MainPage. And it will make the flyout button hidden at same time.

public ContactsPage()
{
    InitializeComponent();
    NavigationPage.SetHasNavigationBar(this, false);
}

For more please refer this source code.

Xamarin Forms Flyout page inside navigation page causes navigation bar issue in UWP

1 Answers