Xamarin.Forms UWP平台MasterDetail页面导航后头部异常问题

嘿，我之前也碰到过这个烦人的问题！UWP上的MasterDetailPage确实容易出现这种“导航后多一个头部，菜单打开又消失”的诡异情况，大概率是平台适配或者页面嵌套结构的问题，给你几个实用的解决方案：

方案一：先检查页面嵌套结构（最常见原因） #

很多时候这个问题都是因为页面嵌套顺序搞反了。正确的姿势应该是把MasterDetailPage作为根页面，Detail部分嵌套NavigationPage，而不是反过来把MasterDetail塞进NavigationPage里。

举个正确的初始化例子：

public App()
{
    InitializeComponent();
    
    // 实例化侧边菜单页面
    var masterPage = new YourMasterPage();
    // 把首页包在NavigationPage里作为Detail
    var detailNavPage = new NavigationPage(new HomePage());
    
    MainPage = new MasterDetailPage
    {
        Master = masterPage,
        Detail = detailNavPage
    };
}

这样NavigationPage的导航栏会和MasterDetail的菜单按钮整合在一起，不会凭空多出一个头部。

方案二：自定义UWP平台的MasterDetail样式 #

如果结构没问题还是有额外头部，那可以直接修改UWP项目里的默认样式，把多余的Header去掉。

在UWP项目的App.xaml中添加这段自定义样式：

<Application.Resources>
    <Style TargetType="forms:MasterDetailPage">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="forms:MasterDetailPage">
                    <NavigationView x:Name="NavigationView"
                                    IsPaneOpen="{TemplateBinding IsPresented}"
                                    PaneDisplayMode="Left">
                        <!-- 这里留空就会移除默认的额外Header，也可以自定义你需要的头部内容 -->
                        <NavigationView.Header>
                        </NavigationView.Header>
                        <ContentPresenter Content="{TemplateBinding Detail}" />
                        <NavigationView.MenuItems>
                            <ItemsControl ItemsSource="{TemplateBinding Master}" />
                        </NavigationView.MenuItems>
                    </NavigationView>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

这段代码直接替换了UWP上MasterDetailPage的底层实现（NavigationView）的模板，彻底去掉多余的Header。

方案三：隐藏目标页面的导航栏 #

如果你的目标页面不需要自己的导航栏，可以在导航时直接隐藏它：

1. 在侧边菜单的点击事件里导航：

private void MenuItem_Tapped(object sender, EventArgs e)
{
    var selectedItem = (YourMenuItemModel)((ListView)sender).SelectedItem;
    // 导航到目标页面
    await ((NavigationPage)((MasterDetailPage)App.Current.MainPage).Detail)
        .PushAsync((Page)Activator.CreateInstance(selectedItem.PageType));
    // 关闭侧边菜单
    ((MasterDetailPage)App.Current.MainPage).IsPresented = false;
}

2. 在目标页面的构造函数里添加隐藏导航栏的代码：

public TargetPage()
{
    InitializeComponent();
    // 隐藏当前页面的导航栏
    NavigationPage.SetHasNavigationBar(this, false);
}

方案四：用Xamarin.Forms Shell替代MasterDetailPage（推荐） #

如果你的项目还没到后期，强烈建议换成Shell来实现侧边菜单。Shell是Xamarin.Forms官方推荐的导航框架，在各个平台（包括UWP）的适配都更完善，完全不会出现这种奇怪的头部问题，代码还更简洁：

在AppShell.xaml里定义菜单和页面：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourAppNamespace"
       x:Class="YourAppNamespace.AppShell">

    <!-- 侧边菜单项 -->
    <FlyoutItem Title="首页" Icon="home_icon.png">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>
    <FlyoutItem Title="设置" Icon="settings_icon.png">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>

</Shell>

然后在App.xaml.cs里设置根页面为Shell：

public App()
{
    InitializeComponent();
    MainPage = new AppShell();
}

Shell会自动处理所有平台的导航和菜单样式，UWP上的表现非常一致，省心很多。

内容的提问来源于stack exchange，提问作者HarshShah