.NET MAUI Shell 页

浏览示例。 浏览示例

一个ShellContent对象表示ContentPage每个或Tab对象的FlyoutItem对象。当对象中Tab存在多个ShellContent对象时,ContentPage这些对象可通过顶部选项卡导航。 在页面中,可以导航到称为详细信息页的其他 ContentPage 对象。

此外,该 Shell 类还定义了可用于配置 .NET 多平台应用 UI(.NET MAUI) Shell 应用中页面外观的附加属性。 此配置包括设置页面颜色、设置页面呈现模式、禁用导航栏、禁用选项卡栏以及显示导航栏中的视图。

显示页面

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

<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 对象都呈现在选项卡中:

Shell 应用的屏幕截图,其中包含三个页面。

注释

BindingContext每个ShellContent对象的继承自父Tab对象。

在每个 ContentPage 对象中,可以导航到其他 ContentPage 对象。 有关导航的详细信息,请参阅 .NET MAUI Shell 导航

在应用启动时加载页面

在 Shell 应用中,每个 ContentPage 对象通常按需创建,以响应导航。 但是,也可以在应用启动时创建 ContentPage 对象。

警告

ContentPage 在应用启动时创建的对象可能会导致启动体验不佳。

ContentPage通过将属性设置为ShellContent.ContentContentPage对象,可以在应用启动时创建对象:

<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>

在此示例中,CatsPageDogsPage在应用启动时创建,MonkeysPage而不是按需创建,以响应导航。

注释

Content 属性是类的内容属性 ShellContent ,因此不需要显式设置。

设置页面颜色

Shell 类定义了以下附加属性,这些属性可用于在 Shell 应用中设置页面颜色:

  • BackgroundColor,类型 Color,用于定义 Shell 部件版式中的背景色。 颜色不会在 Shell 内容后面填充。
  • DisabledColor,类型 Color,用于定义禁用的文本和图标的颜色。
  • ForegroundColor,类型 Color,用于定义用于着色文本和图标的颜色。
  • TitleColor,类型 Color,用于定义用于当前页标题的颜色。
  • UnselectedColor,类型 Color,用于定义在 Shell 部件版中用于未选择的文本和图标的颜色。

所有这些属性都由 BindableProperty 对象提供支持,这意味着这些属性可以是数据绑定的目标,并使用 XAML 样式进行样式设置。 此外,可以使用级联样式表(CSS)设置属性。 有关详细信息,请参阅 .NET MAUI Shell 特定属性

注释

还有一些属性允许定义制表符颜色。 有关详细信息,请参阅 Tab 外观

以下 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设置为枚举成员之一PresentationMode来更改Shell.PresentationMode此行为:

  • NotAnimated 指示页面将在没有导航动画的情况下显示。
  • Animated 指示页面将以导航动画显示。 这是附加属性的 Shell.PresentationMode 默认值。
  • Modal 指示页面将显示为模式页。
  • ModalAnimated 指示页面将以模式页面的形式显示,并带有导航动画。
  • ModalNotAnimated 指示页面将显示为模式页面,而不显示导航动画。

重要

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

以下 XAML 示例设置Shell.PresentationMode附加属性:ContentPage

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

在此示例中,当使用该方法导航到GoToAsync该页面时,ContentPage该页面将设置为显示为模式页面。

启用导航栏阴影

Shell.NavBarHasShadow附加属性的类型bool控制导航栏是否具有阴影。 默认情况下,该属性的值位于 true Android 和其他 false 平台上。

虽然可以在子类化 Shell 对象上设置此属性,但也可以在想要启用导航栏阴影的任何页面上设置此属性。 例如,以下 XAML 显示从以下 ContentPageXAML 中启用导航栏阴影:

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

这会导致启用导航栏阴影。

禁用导航栏

Shell.NavBarIsVisible附加属性(类型)bool控制在显示页面时导航栏是否可见。 默认情况下,该属性 true的值为 。

虽然可以在子类化 Shell 对象上设置此属性,但通常在希望使导航栏不可见的任何页面上设置此属性。 例如,以下 XAML 显示从以下 ContentPageXAML 中禁用导航栏:

<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">
    ...
    <!-- Later you can also toggle Shell.NavBarIsVisible to show/hide without animation -->
    <!-- Shell.NavBarIsVisible="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 显示以下 Image XAML 在导航栏 ContentPage中显示:

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

重要

如果导航栏已变得不可见,且 NavBarIsVisible 带有附加属性,则不会显示标题视图。

除非使用和属性指定WidthRequest视图的大小,否则许多视图不会显示在导航栏中,否则视图的位置由和VerticalOptions属性指定HorizontalOptionsHeightRequest

TitleView可以将附加属性设置为显示包含多个视图的布局类。 同样,由于 ContentView 该类最终派生自 View 该类, TitleView 因此可以将附加属性设置为显示 ContentView 包含单个视图的视图。

页面可见性

Shell 尊重页面可见性,该可见性是使用属性设置的 IsVisible 。 当页面 IsVisible 的属性设置为 false时,它在 Shell 应用中不可见,并且无法导航到它。