创建 Xamarin.Forms Shell 应用程序

项目
03/06/2024

创建 Xamarin.Forms Shell 应用程序的过程如下所示：

创建新的 Xamarin.Forms 应用程序，或加载想要转换为 Shell 应用程序的现有应用程序。
将 XAML 文件添加到可对 Shell 类进行子类化的共享代码项目。有关详细信息，请参阅创建 Shell 类的子类。
将应用程序的 App 类的 MainPage 属性设置为子类 Shell 对象。有关详细信息，请参阅启动 Shell 应用程序。
描述子类 Shell 类中的应用程序的视觉层次结构。有关详细信息，请参阅描述应用程序的视觉层次结构。

有关如何创建 Shell 应用程序的分步演练，请参阅创建 Xamarin.Forms 应用程序快速入门。

创建 Shell 类的子类

创建 Xamarin.Forms Shell 应用程序的第一步是将 XAML 文件添加到可对 Shell 类进行子类化的共享代码项目。此文件可以命名为任何名称，但建议使用 AppShell。以下代码示例显示了新创建的 AppShell.xaml 文件：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="MyApp.AppShell">

</Shell>

以下示例显示了代码隐藏文件 AppShell.xaml.cs：

using Xamarin.Forms;

namespace MyApp
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

启动 Shell 应用程序

创建可对 Shell 对象进行子类化的 XAML 文件后，App 类的 MainPage 属性应设置为子类化的 Shell 对象：

namespace MyApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }
        ...
    }
}

在此示例中，AppShell 类是派生自 Shell 类的 XAML 文件。

警告

在构建空白 Shell 应用程序时，尝试运行它会导致引发 InvalidOperationException。

描述应用程序的视觉层次结构

创建 Xamarin.Forms Shell 应用程序的最后一步是描述子类 Shell 类中的应用程序的视觉层次结构。子类 Shell 类包含三个主要层次结构对象：

FlyoutItem 或 TabBar。 FlyoutItem 表示浮出控件中的一个或多个项，应在应用程序的导航模式需要浮出控件时使用。 TabBar 表示底部选项卡栏，应在应用程序的导航模式以底部选项卡开头并且不需要浮出控件时使用。每个 FlyoutItem 对象或 TabBar 对象都是 Shell 对象的子对象。
Tab，表示分组内容，可通过底部选项卡导航。每个 Tab 对象都是 FlyoutItem 对象或 TabBar 对象的子对象。
ShellContent 表示每个选项卡的 ContentPage 对象。每个 ShellContent 对象都是 Tab 对象的子对象。当 Tab 中存在多个 ShellContent 对象时，这些对象将可通过顶部选项卡导航。

上述对象不表示任何用户界面，而表示应用程序视觉层次结构的组织。 Shell 使用这些对象，生成内容的导航用户界面。

以下 XAML 演示子类 Shell 类的一个示例：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    ...
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <!--
        Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified.
        This is possible because a subclassed Shell object can only ever contain a FlyoutItem object or a TabBar object,
        which can only ever contain Tab objects, which can only ever contain ShellContent objects.

        The implicit conversion automatically wraps the ShellContent objects below in Tab objects.
        -->
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>
    ...
</Shell>

运行时，此 XAML 显示 CatsPage，因为它是子类 Shell 类中声明的第一个内容项：

按汉堡图标或从左侧轻扫会显示以下浮出控件：

浮出控件中会显示多个项，因为 FlyoutDisplayOptions 属性设置为 AsMultipleItems。有关详细信息，请参阅浮出控件显示选项。

重要

在 Shell 应用程序中，会按需创建页面以响应导航。这是通过使用 DataTemplate 标记扩展将每个 ShellContent 对象的 ContentTemplate 属性设置为 ContentPage 对象来实现的。

创建 Xamarin.Forms Shell 应用程序

创建 Shell 类的子类

启动 Shell 应用程序

描述应用程序的视觉层次结构

相关链接

其他资源