NET MAUI Shell 页面显示与外观设置详解

浏览示例以获取更多代码示例。ShellContent 对象代表每个 FlyoutItem 或 Tab 的 ContentPage 对象。当 Tab 中存在多个 ShellContent 对象时，这些 ContentPage 对象可通过顶部选项卡导航。在页面中，您可以导航到其他称为详细页面的 ContentPage 对象。

此外，Shell 类定义了附加属性，可用于设置 .NET 多平台应用程序 UI（.NET MAUI）Shell 应用程序中页面的外观。此设置包括设置页面颜色、页面呈现模式、禁用导航栏、禁用标签栏以及在导航栏中显示视图。

显示页面

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

<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">
    <TabBar>
       <ShellContent Title="Cats"
                     Icon="cat.png"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Title="Dogs"
                     Icon="dog.png"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
       <ShellContent Title="Monkeys"
                     Icon="monkey.png"
                     ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>
</Shell>

在此示例中，Shell 的隐式转换运算符用于从视觉层次中移除 Tab 对象。然而，每个 ShellContent 对象都会在选项卡中呈现。在每个 ContentPage 对象中，可以导航到其他 ContentPage 对象。有关导航的详细信息，请参阅 .NET MAUI Shell 导航文档。

在应用程序启动时加载页面

在 Shell 应用程序中，每个 ContentPage 对象通常是按需创建以响应导航。但是，您也可以在应用程序启动时创建 ContentPage 对象。您可以在应用程序启动时将 ShellContent.Content 属性设置为 ContentPage 对象来创建它们：

<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">
    <TabBar>
     <ShellContent Title="Cats"
                   Icon="cat.png">
         <views:CatsPage />
     </ShellContent>
     <ShellContent Title="Dogs"
                   Icon="dog.png">
         <views:DogsPage />
     </ShellContent>
     <ShellContent Title="Monkeys"
                   Icon="monkey.png">
         <views:MonkeysPage />
     </ShellContent>
    </TabBar>
</Shell>

在此示例中，CatsPage、DogsPage 和 MonkeysPage 都是在应用程序启动时创建的，而不是按需创建以响应导航。

设置页面颜色

Shell 类定义了以下附加属性，可用于在 Shell 应用程序中设置页面颜色：

• BackgroundColor，定义 Shell chrome 中的背景颜色。颜色不会填充 Shell 内容后面。
• DisabledColor，定义对已禁用文本和图标进行阴影处理的颜色。
• ForegroundColor，定义着色文本和图标的颜色。
• TitleColor，定义当前页面标题所用的颜色。
• UnselectedColor，定义用于 Shell chrome 中未选文本和图标的颜色。

所有这些属性都由 BindableProperty 支持，这意味着属性可以是数据绑定的目标，并使用 XAML 样式设置样式。此外，可以使用层叠样式表（CSS）来设置属性。有关详细信息，请参阅 .NET MAUI Shell 特定属性文档。

注意：还有一些属性可以定义标签颜色。有关详细信息，请参阅标签外观文档。

以下 XAML 示例展示了在子类化 Shell 类中设置颜色属性：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Xaminals.AppShell"
       BackgroundColor="#455A64"
       ForegroundColor="White"
       TitleColor="White"
       DisabledColor="#B4FFFFFF"
       UnselectedColor="#95FFFFFF">
</Shell>

在此示例中，颜色值会应用于 Shell 应用程序中的所有页面，除非它们在页面级别被覆盖。由于颜色属性是附加属性，因此也可以在个别页面上设置它们，以设置该页面上的颜色：

<ContentPage ...
             Shell.BackgroundColor="Gray"
             Shell.ForegroundColor="White"
             Shell.TitleColor="Blue"
             Shell.DisabledColor="#95FFFFFF"
             Shell.UnselectedColor="#B4FFFFFF">
</ContentPage>

或者，可以使用 XAML 样式来设置颜色属性：

<Style x:Key="DomesticShell"
       TargetType="Element" >
    <Setter Property="Shell.BackgroundColor"
            Value="#039BE6" />
    <Setter Property="Shell.ForegroundColor"
            Value="White" />
    <Setter Property="Shell.TitleColor"
            Value="White" />
    <Setter Property="Shell.DisabledColor"
            Value="#B4FFFFFF" />
    <Setter Property="Shell.UnselectedColor"
            Value="#95FFFFFF" />
</Style>

有关 XAML 样式的详细信息，请参阅使用 XAML 设置应用程序样式文档。

设置页面呈现模式

默认情况下，当使用 GoToAsync 方法导航到页面时，会发生小型导航动画。但是，您可以通过将 ContentPage 上的附加属性 Shell.PresentationMode 设置为 PresentationMode 枚举成员之一来更改此行为：

• NotAnimated 表示页面将显示而不显示导航动画。
• Animated 表示页面将以导航动画显示。这是 Shell.PresentationMode 附加属性的默认值。
• Modal 表示页面将显示为模态页面。
• ModalAnimated 表示页面将显示为模态页面，并带有导航动画。
• ModalNotAnimated 表示页面将显示为模态页面，没有导航动画。

重要：PresentationMode 类型是标志枚举。这意味着枚举成员的组合可以在代码中应用。然而，为了方便在 XAML 中使用，ModalAnimated 成员是 Modal 和 Animated 成员的组合，而 ModalNotAnimated 成员是 NotAnimated 和 Modal 成员的组合。有关标志枚举的详细信息，请参阅枚举类型作为位标志文档。

以下 XAML 示例在 ContentPage 上设置 Shell.PresentationMode：

<ContentPage ...
             Shell.PresentationMode="Modal">
    ...
</ContentPage>

在此示例中，当使用 GoToAsync 方法导航到 ContentPage 时，它被设置为显示为模态页面。

启用导航栏阴影

Shell.NavBarHasShadow 附加属性类型为 bool，可控制导航栏是否有阴影。默认情况下，在 Android 上属性值为 true，在其他平台上为 false。虽然可以在子类化 Shell 对象上设置此属性，但也可以在需要启用导航栏阴影的任何页面上设置。例如，以下 XAML 显示从 ContentPage 启用导航栏阴影：

<ContentPage ...
             Shell.NavBarHasShadow="true">
    ...
</ContentPage>

这将导致导航栏阴影被启用。

禁用导航栏

Shell.NavBarIsVisible 附加属性类型为 bool，可控制在呈现页面时导航栏是否可见。默认情况下，属性值为 true。虽然可以在子类化 Shell 对象上设置此属性，但它通常设置在任何想要让导航栏不可见的页面上。例如，以下 XAML 显示从 ContentPage 禁用导航栏：

<ContentPage ...
             Shell.NavBarIsVisible="false">
    ...
</ContentPage>

动画导航栏的可见性

在 .NET 10 中，Shell 类新增了 NavBarVisibilityAnimationEnabled 附加属性，以控制导航栏可见性的更改是否以动画形式呈现。默认情况下，此属性为 true。您可以在任何 Page 上设置此附加属性，以在显示或隐藏导航栏时禁用或启用动画：

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.MyPage"
    Shell.NavBarVisibilityAnimationEnabled="False">
    ...
</ContentPage>

在 C# 中，使用静态附加属性访问器：

// Disable animation for NavBar visibility changes on a page
Shell.SetNavBarVisibilityAnimationEnabled(myPage, false);

// Query the current setting
bool isEnabled = Shell.GetNavBarVisibilityAnimationEnabled(myPage);

此设置会影响目标元素更改时 Shell.NavBarIsVisibleProperty 应用的动画。

在导航栏中显示视图

Shell.TitleView 附加属性类型为 View，允许您在导航栏中显示任何 View。虽然可以在子类化 Shell 对象上设置此属性，但也可以在需要在导航栏中显示视图的任何页面上设置。例如，以下 XAML 显示在 ContentPage 的导航栏中显示 Image：

<ContentPage ...>
    <Shell.TitleView>
        <Image Source="logo.png"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Shell.TitleView>
    ...
</ContentPage>

重要：如果导航栏已设置为不可见，则使用 NavBarIsVisible 附加属性将不会显示标题视图。许多视图不会出现在导航栏中，除非使用 WidthRequest 和 HeightRequest 属性指定视图的大小，或使用 HorizontalOptions 和 VerticalOptions 属性指定视图的位置。TitleView 附加属性可以设置为显示包含多个视图的布局类。同样，因为类最终派生自 View 类，所以 TitleView 附加属性可以设置为显示包含单个视图的 ContentView。

页面可见性

Shell 遵循页面可见性，这是使用 IsVisible 属性设置的。当页面的 IsVisible 属性设置为 false 时，它不会在 Shell 应用程序中显示，并且无法导航到该页面。