导航页面内的 Xamarin Forms Flyout 页面导致 UWP 中的导航栏问题

Question

我正在使用 Flyout Page，它是一个起始页并包含导航页。我遇到了导航栏问题（显示标题两次）。

将我的启动页面设置为“MainPage = new MainPage();”会解决这个问题，但我希望它是导航页面，因为我的应用有很多页面不是弹出窗口。

添加这行代码“NavigationPage.SetHasNavigationBar(this, false);”修复了 Android 中的问题，但未修复 UWP 中的问题。

如果有任何解决方法可以在 UWP 中修复，请告诉我。

我的代码如下。 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>

Answer 1

导航页面内的 Xamarin Forms Flyout 页面导致 UWP 中出现导航栏问题

问题是ContactPage默认放在NavigationPage下面一行，如果你把MainPage也用NavigationPage打包，会渲染两次页面Title。这就是为什么删除 MainPage 的容器会解决问题。

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

但我希望它是导航页面，因为我的应用有很多页面不是弹出窗口。

如果您想使当前页面没有NavigationBar，请在匹配的页面中调用SetHasNavigationBar，而不是MainPage。并且会同时隐藏弹出按钮。

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

更多信息请参考source代码。