Xamarin.Forms从PageB返回PageA后出现双工具栏问题求解

这种双工具栏的情况我之前也碰到过，本质就是导航栏重复叠加导致的，咱们一步步来解决：

问题根源 #

你用NavigationPage包裹了PageA，这时候外层的NavigationPage已经自带了一个全局导航栏。但如果你的PageA本身又启用了自身的导航栏（或者手动加了自定义工具栏），两个导航栏就会叠在一起，返回时就会显示出双工具栏的效果。

具体解决方案 #

1. 禁用PageA的独立导航栏 #

PageA作为NavigationPage的子页面，完全不需要自己再单独启用导航栏，把它关掉就行：

• XAML方式：直接在PageA的根ContentPage节点里添加属性：

<ContentPage ... NavigationPage.HasNavigationBar="False">

• 代码方式：在PageA的构造函数里加入一行代码：

public PageA()
{
    InitializeComponent();
    // 关闭当前页面的独立导航栏，用外层NavigationPage的就行
    NavigationPage.SetHasNavigationBar(this, false);
}

2. 检查并移除PageA的自定义工具栏 #

如果你的PageA里手动加了<Toolbar>、用StackLayout模拟的工具栏，或者第三方工具栏控件，这些都会和NavigationPage的内置导航栏叠加。这时候要把这些自定义工具栏删掉，改用NavigationPage的内置方式添加操作项——比如用ToolbarItem，它会自动显示在NavigationPage的导航栏上：

<ContentPage ...>
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="设置" Clicked="Settings_Clicked"/>
    </ContentPage.ToolbarItems>
    <!-- 页面内容 -->
</ContentPage>

3. 确认PageB的导航栏设置 #

如果在PageB里设置了NavigationPage.HasNavigationBar="False"，返回PageA时系统会自动恢复PageA的导航栏状态，但只要PageA已经禁用了自身导航栏，就不会出现重复。不用额外做恢复操作，系统会处理好。

正确示例参考 #

最后给你个完整的正确写法参考：

• App.cs：

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new NavigationPage(new PageA());
    }
}

• PageA.xaml：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.PageA"
             Title="Page A"
             NavigationPage.HasNavigationBar="False">
    <StackLayout>
        <Button Text="跳转到PageB" Clicked="btnCourseList_Clicked"/>
    </StackLayout>
</ContentPage>

• PageA.xaml.cs：

public partial class PageA : ContentPage
{
    public PageA()
    {
        InitializeComponent();
    }

    private void btnCourseList_Clicked(object sender, EventArgs e)
    {
        Navigation.PushAsync(new PageB());
    }
}

这样调整后，返回PageA时就只会显示一个工具栏啦～

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