如前章所述,Shell导航框架,在UI层面,有两种导航方式,一是浮出控件导航,二是底部Tab栏导航,本章节将深入学习浮出控件导航。浮出控件提供了非常丰富的定制功能,组成部分如下图所示:
一、Header/Footer页头和页尾设置(Header和Footer的使用方式一样)
1、通过DataTemplate设置
<Shell ...... Shell.FlyoutBehavior="Flyout"> <!--浮出框的页头--> <Shell.FlyoutHeaderTemplate> <DataTemplate> <VerticalStackLayout> <Label Text="这里是头部" /> <Image Aspect="Center" Source="dotnet_bot.png" /> </VerticalStackLayout> </DataTemplate> </Shell.FlyoutHeaderTemplate> <!--浮出框的页尾--> <Shell.FlyoutFooterTemplate> <DataTemplate> <VerticalStackLayout> <Label Text="这里是尾部" /> <Image Aspect="Center" Source="dotnet_bot.png" /> </VerticalStackLayout> </DataTemplate> </Shell.FlyoutFooterTemplate> <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"> ...... </FlyoutItem> </Shell>
2、通过控件模板ContentView设置
<!--AppShell.xaml设置--> <Shell ...> <!--通过Shell.FlyoutHeader/Shell.FlyoutFooter设置--> <Shell.FlyoutFooter> <!--实例化控件模板--> <controls:FlyoutFooter /> </Shell.FlyoutFooter> </Shell> <!--控件模板FlyoutFooter.xaml--> <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:sys="clr-namespace:System;assembly=netstandard" x:Class="Xaminals.Controls.FlyoutFooter"> <StackLayout> <Label Text="这里是页头/页尾"/> <Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}" /> </StackLayout> </ContentView>
二、FlyoutItem浮出导航项设置
1、定义多个FlyoutItem、Title和Icon属性、隐式使用ShellContent
<!--定义多个FlyoutItem--> <Shell ......> <!--Title-项目标题,Icon-项目图标--> <!--只有一个Tab,没有对应的底部Tab栏--> <FlyoutItem Title="Cats" Icon="cat.png"> <Tab> <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" /> </Tab> </FlyoutItem> <FlyoutItem Title="Dogs" Icon="dog.png"> <Tab> <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" /> </Tab> </FlyoutItem> </Shell> <!--以下结果和上面的一样--> <!--Shell的默认内容属性为FlyoutItem,FlyoutItem的内容属性为Tab,Tab的内容属性为ShellContent--> <!--根据XAML原理,默认内容的元素标签可以省略--> <Shell ......> <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" /> <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" /> </Shell>
2、FlyoutDisplayOptions设置,是否显示项目明细条目。下图显示FlyoutDisplayOptions的设置效果,同时可以看出每个FlyoutItem都有一个对应的底部Tab栏
3、设置FlyoutItem外观方法①:内联DataTemplate。可以将Shell视为一个集合,ItemSource为浮出项,ItemTemplate为数据模板
<Shell ......> <Shell.ItemTemplate> <DataTemplate> <Grid ColumnDefinitions="0.2*,0.8*"> <Image Margin="5" HeightRequest="45" Source="{Binding FlyoutIcon}" /> <Label Grid.Column="1" FontAttributes="Italic" Text="{Binding Title}" VerticalTextAlignment="Center" /> </Grid> </DataTemplate> </Shell.ItemTemplate> <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"> ...... </FlyoutItem> </Shell>
4、设置FlyoutItem外观方法②:资源字典DataTemplate。以下为默认的数据模板,可以定义到App.xaml资源字典中,并在此基础上进行修改。
<!--使用资源字典中的数据模板--> <Shell ...... ItemTemplate="{StaticResource FlyoutTemplate}"> <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"> ...... </FlyoutItem> </Shell> <!--可以将这个数据模板定义到App.xaml的资源字典中--> <DataTemplate x:Key="FlyoutTemplate"> <Grid x:Name="FlyoutItemLayout" HeightRequest="{OnPlatform 44, Android=50}" ColumnSpacing="{OnPlatform WinUI=0}" RowSpacing="{OnPlatform WinUI=0}"> <VisualStateManager.VisualStateGroups> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Transparent" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Selected"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=Black, Dark=White}" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </VisualStateManager.VisualStateGroups> <Grid.ColumnDefinitions> <ColumnDefinition Width="{OnPlatform Android=54, iOS=50, WinUI=Auto}" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image x:Name="FlyoutItemImage" Source="{Binding FlyoutIcon}" VerticalOptions="Center" HorizontalOptions="{OnPlatform Default=Center, WinUI=Start}" HeightRequest="{OnPlatform Android=24, iOS=22, WinUI=16}" WidthRequest="{OnPlatform Android=24, iOS=22, WinUI=16}"> <Image.Margin> <OnPlatform x:TypeArguments="Thickness"> <OnPlatform.Platforms> <On Platform="WinUI" Value="12,0,12,0" /> </OnPlatform.Platforms> </OnPlatform> </Image.Margin> </Image> <Label x:Name="FlyoutItemLabel" Grid.Column="1" Text="{Binding Title}" FontSize="{OnPlatform Android=14, iOS=14}" FontAttributes="{OnPlatform iOS=Bold}" HorizontalOptions="{OnPlatform WinUI=Start}" HorizontalTextAlignment="{OnPlatform WinUI=Start}" VerticalTextAlignment="Center"> <Label.TextColor> <OnPlatform x:TypeArguments="Color"> <OnPlatform.Platforms> <On Platform="Android" Value="{AppThemeBinding Light=Black, Dark=White}" /> </OnPlatform.Platforms> </OnPlatform> </Label.TextColor> <Label.Margin> <OnPlatform x:TypeArguments="Thickness"> <OnPlatform.Platforms> <On Platform="Android" Value="20, 0, 0, 0" /> </OnPlatform.Platforms> </OnPlatform> </Label.Margin> <Label.FontFamily> <OnPlatform x:TypeArguments="x:String"> <OnPlatform.Platforms> <On Platform="Android" Value="sans-serif-medium" /> </OnPlatform.Platforms> </OnPlatform> </Label.FontFamily> </Label> </Grid> </DataTemplate>
5、设置FlyoutItem外观方法③:绑定Shell的BindingContext,使用集合来完全定义
<!--方式①:Shell.FlyoutContent属性--> <Shell ... x:Name="shell"> ... <Shell.FlyoutContent> <CollectionView BindingContext="{x:Reference shell}" IsGrouped="True" ItemsSource="{Binding FlyoutItems}"> <CollectionView.ItemTemplate> <DataTemplate> <Label Text="{Binding Title}" TextColor="White" FontSize="18" /> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </Shell.FlyoutContent> </Shell> <!--方式②:Shell.FlyoutContentTemplate属性--> <Shell ... x:Name="shell"> ... <Shell.FlyoutContentTemplate> <DataTemplate> <CollectionView BindingContext="{x:Reference shell}" IsGrouped="True" ItemsSource="{Binding FlyoutItems}"> <CollectionView.ItemTemplate> <DataTemplate> <Label Text="{Binding Title}" TextColor="White" FontSize="18" /> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </DataTemplate> </Shell.FlyoutContentTemplate> </Shell>
三、MenuItem菜单导航项设置
1、菜单导航设置。导航需要通过后台代码完成,可以通过事件Clicked,也可以通过命令,如下所示:
<Shell ......> <!--在FlyoutItem前显示--> <MenuItem Text="Help" IconImageSource="help.png" Command="{Binding HelpCommand}" CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" /> <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"> <Tab Title="Domestic"> <ShellContent Title="Cats" ContentTemplate="{DataTemplate view:Cats}" /> <ShellContent Title="Dogs" ContentTemplate="{DataTemplate view:Dogs}" /> </Tab> <ShellContent Title="Monkeys" ContentTemplate="{DataTemplate view:Monkeys}" /> </FlyoutItem> <!--在FlyoutItem后显示--> <MenuItem Text="About" IconImageSource="about.png" Command="{Binding AboutCommand}" CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" /> </Shell>
2、设置MenuItem外观的方法和FlyoutItem一样,略......
四、其它属性设置
<Shell ...... CurrentItem="{x:Reference about}" <!--指定首页--> FlyoutIsPresented="True" <!--浮出框默认显示--> FlyoutBehavior="Flyout" <!--浮出框是否显示,Flyout/Disabled/Locked--> FlyoutVerticalScrollMode="Disabled" <!--垂直滚动,Disabled/Enabled/Auto--> FlyoutIcon="dotnet_bot.png" <!--浮出框图标--> FlyoutBackgroundColor="AliceBlue" <!--浮出框背景色--> FlyoutBackgroundImage="dotnet_bot.png" <!--浮出框背景图--> FlyoutBackgroundImageAspect="AspectFill" <!--浮出框背景图缩放方式--> FlyoutWidth="200" <!--浮出框宽度--> FlyoutHeight="400" <!--浮出框高度--> > <!-- 定义复杂的渐变浮出框背景① --> <Shell.FlyoutBackground> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Offset="0.1" Color="#8A2387" /> <GradientStop Offset="0.6" Color="#E94057" /> <GradientStop Offset="1.0" Color="#F27121" /> </LinearGradientBrush> </Shell.FlyoutBackground> <!-- 定义复杂的渐变浮出框背景② --> <Shell.FlyoutBackdrop> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Offset="0.1" Color="#8A2387" /> <GradientStop Offset="0.6" Color="#E94057" /> <GradientStop Offset="1.0" Color="#F27121" /> </LinearGradientBrush> </Shell.FlyoutBackdrop> <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"> ...... <ShellContent x:Name="about" Title="About" ContentTemplate="{DataTemplate view:About}"/> </FlyoutItem> </Shell>
标签:控件,FlyoutItem,Footer,......,Flyout,浮出,设置,导航 From: https://www.cnblogs.com/functionMC/p/17010906.html