有没有办法在 Xamarin.Forms 的同一页面中插入导航栏和选项卡栏？答案

【问题标题】：Is there any way to insert a Navigation Bar and a Tab Bar in the same page on Xamarin.Forms?有没有办法在 Xamarin.Forms 的同一页面中插入导航栏和选项卡栏？
【发布时间】：2019-01-25 16:24:29
【问题描述】：

正如标题所说，我正在进入一个新项目，并且一直试图在 Xamarin Forms 的同一页面中插入导航栏和选项卡栏。问题是：我只能插入一个或另一个，不能同时插入。你们知道解决这个问题的任何方法吗，也许是使用自定义渲染器，或者类似的东西？

XAML 代码以

开头

<ContentPage ... />

或者以

开头

<TabbedPage ... />

如果有人可以提供帮助，我会很高兴！

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

有没有办法在 Xamarin.Forms 的同一页面中插入导航栏和选项卡栏？

当然可以实现！您可以使用子 Page 对象的集合（例如 ContentPage 或 NavigationPage 实例的集合）填充 TabbedPage。请参阅以下代码。

在 App.xaml.cs 中（HomePage 是一个 TabbedPage）

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage =new HomePage(); 
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

在 HomePage.xaml.cs 中（Mypage 和 MyPage1 是 ContentPages）

public partial class HomePage : TabbedPage
{
    public HomePage()
    {
        InitializeComponent();


        var contentPage = new MyPage1();
        contentPage.Title = "Page1";
        contentPage.Icon = "Mine.png";

        var navigationPage = new NavigationPage(new MyPage());
        navigationPage.Icon = "Mine.png";
        navigationPage.Title = "Page2";

        Children.Add(contentPage);
        Children.Add(navigationPage);

    }

  }
}

或者您可以使用 HomePage.xaml 中的 XAML 代码实现它

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:xxx" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xxx.HomePage">
  <local:MyPage Title="Page1" Icon="xxx.png"/>    
  <NavigationPage Title="Page2" Icon="xxx.png">
    <x:Arguments>
        <local:MyPage1 />
    </x:Arguments>
  </NavigationPage>
</TabbedPage>

现在 TabbedPage 填充了两个子 Page 对象。第一个子项是 ContentPage 实例，第二个选项卡是包含 ContentPage 实例的 NavigationPage。就像下面的图片一样。

effect1

effect2

【讨论】：

非常感谢！之前因为出差所以无法回答，现在回来测试一下，效果很好！再次感谢您！

【解决方案2】：

TabbedPage 是其他页面的容器。每个选项卡都可以包含一个 NavigationPage 作为它的子项

TabbedPage
  Tab 1 - NavigationPage(ContentPage)
  Tab 2 - ContentPage
  Tab 3 - NavigationPage(ContentPage)

【讨论】：