一个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 对象都呈现在选项卡中:
注释
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属性指定HorizontalOptions。HeightRequest
TitleView可以将附加属性设置为显示包含多个视图的布局类。 同样,由于 ContentView 该类最终派生自 View 该类, TitleView 因此可以将附加属性设置为显示 ContentView 包含单个视图的视图。
页面可见性
Shell 尊重页面可见性,该可见性是使用属性设置的 IsVisible 。 当页面 IsVisible 的属性设置为 false时,它在 Shell 应用中不可见,并且无法导航到它。
浏览示例