CODEWITHSUNDEEP
xamarin.formsuwp
Nambukarthy Raveendran
Nambukarthy Raveendran

Reputation: 116

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

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).

Burger Menu Icon in between navigation bars

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>

Upvotes: 1

Views: 1986

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

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.

Upvotes: 1

Related Questions