Xamarin.Forms：从Tabbed Page跳转后如何保留标签栏？

你遇到的这个问题在Xamarin.Forms开发里挺常见的——当直接在TabbedPage里调用Navigation.PushAsync时，新页面会被推到整个TabbedPage所在的导航栈顶部，自然就把原来的标签栏给覆盖隐藏了。要让新页面依然保留标签栏，核心思路是让跳转操作发生在当前标签页的独立导航栈中，而不是整个TabbedPage的全局导航栈。

下面给你两种可行的实现方案：

方案一：给每个Tab页嵌套NavigationPage（推荐） #

把TabbedPage里的每个ContentPage都用NavigationPage包裹，这样每个标签页都拥有自己独立的导航栈，点击按钮跳转时，只会在当前标签的栈内添加新页面，标签栏会一直显示在底部。

修改后的XAML代码： #

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyTabbedpage" >
  <!-- 给Tab1包裹NavigationPage -->
  <NavigationPage Title="Tab1" Icon="Calender.png">
    <x:Arguments>
      <ContentPage x:Name="MySchedule">
        <StackLayout>
          <Button Clicked="Button_Clicked" Text="Test"></Button>
        </StackLayout>
      </ContentPage>
    </x:Arguments>
  </NavigationPage>

  <!-- Tab2同样包裹NavigationPage -->
  <NavigationPage Title="Tab2">
    <x:Arguments>
      <ContentPage x:Name="Submission">
        <StackLayout>
          <!-- 修正了你原代码里的语法错误：误写的</ListView>标签 -->
        </StackLayout>
      </ContentPage>
    </x:Arguments>
  </NavigationPage>

  <!-- Tab3也包裹NavigationPage -->
  <NavigationPage Title="Tab3">
    <x:Arguments>
      <ContentPage x:Name="Code">
      </ContentPage>
    </x:Arguments>
  </NavigationPage>
</TabbedPage>

C#代码无需修改： #

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyTabbedpage: TabbedPage
{
    public MyTabbedpage()
    {
        InitializeComponent();
    }
    private void Button_Clicked(object sender, EventArgs e)
    {
        // 现在PushAsync是在当前Tab的NavigationPage栈中执行，标签栏会保留
        Navigation.PushAsync(new MyContentPage());
    }
}

方案二：直接获取当前Tab的导航上下文跳转 #

如果你不想给所有Tab都嵌套NavigationPage，也可以在按钮点击时，直接获取当前选中标签页的Navigation属性来执行跳转：

修改后的Button_Clicked方法： #

private void Button_Clicked(object sender, EventArgs e)
{
    // 获取当前选中的标签页
    var currentTabPage = CurrentPage;
    // 使用当前页面的Navigation上下文跳转，新页面会留在当前Tab的栈内
    currentTabPage.Navigation.PushAsync(new MyContentPage());
}

不过这个方案有个小局限：如果当前Tab的页面没有被NavigationPage包裹，跳转后的页面顶部会没有返回按钮（因为没有导航栏），所以更推荐方案一的完整实现。

最后提醒下，你原XAML代码里Tab2部分有个语法错误：<StackLayout>后面误写了</ListView>标签，这会导致编译失败，我在方案一的代码里已经帮你修正了，记得留意这个细节~

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