烂翻译系列之MAUI——创建 .NET MAUI Shell 应用

A .NET Multi-platform App UI (.NET MAUI) Shell app can be created with the .NET MAUI App project template, and then by describing the visual hierarchy of the app in the AppShell class.

可以使用 .NET MAUI 应用 项目模板创建 .NET 多平台应用 UI (.NET MAUI) Shell 应用，然后在 AppShell 类中描述应用的视觉层次结构。

Describe the visual hierarchy of the app

描述应用的视觉层次结构

The visual hierarchy of a .NET MAUI Shell app is described in the subclassed Shell class, which the project template names AppShell. A subclassed Shell class consists of three main hierarchical objects:

.NET MAUI Shell 应用的视觉层次结构在Shell的子类（项目模板中名为AppShell）中进行了描述。 Shell 子类包含三个主要层次结构对象：

1. FlyoutItem or TabBar. A FlyoutItem represents one or more items in the flyout, and should be used when the navigation pattern for the app requires a flyout. A TabBar represents the bottom tab bar, and should be used when the navigation pattern for the app begins with bottom tabs and doesn't require a flyout. Every FlyoutItem object or TabBar object is a child of the Shell object.  FlyoutItem 表示浮出控件中的一个或多个项目，当应用的导航模式需要浮出控件时应使用。 TabBar 表示底部选项卡栏，应在应用导航模式以底部选项卡开头且不需要浮出控件时使用。 每个 FlyoutItem 对象或 TabBar 对象都是 Shell 对象的子对象。
2. Tab, which represents grouped content, navigable by bottom tabs. Every Tab object is a child of a FlyoutItem object or TabBar object.  Tab，表示分组内容，可通过底部选项卡导航。 每个 Tab 对象都是 FlyoutItem 对象或 TabBar 对象的子对象。
3. ShellContent, which represents the ContentPage objects for each tab. Every ShellContent object is a child of a Tab object. When more than one ShellContent object is present in a Tab, the objects will be navigable by top tabs.  ShellContent，表示每个选项卡的 ContentPage 对象。每个 ShellContent 对象都是 Tab 对象的子对象。 当 Tab 中存在多个 ShellContent 对象时，这些对象将可通过顶部选项卡导航。

These objects don't represent any user interface, but rather the organization of the app's visual hierarchy. Shell will take these objects and produce the navigation user interface for the content.

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

The following XAML shows an example of a subclassed Shell class:

下面的 XAML 显示了一个Shell子类的示例:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       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>

When run, this XAML displays the CatsPage, because it's the first item of content declared in the subclassed Shell class:

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

 

Pressing the hamburger icon, or swiping from the left, displays the flyout:

按下汉堡图标，或者从左侧滑动，就会显示浮出控件：

Multiple items are displayed on the flyout because the FlyoutDisplayOptions property is set to AsMultipleItems. For more information, see Flyout display options.

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

---

Important  重要

In a Shell app, pages are created on demand in response to navigation. This is accomplished by using the DataTemplate markup extension to set the ContentTemplate property of each ShellContent object to a ContentPage object.

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

---