xamarin.forms - 添加外壳弹出项目标题

Question

在 Xamarin Shell 中，我正在尝试向弹出项添加 header 。请参见下图(取自 Xaminals 项目)。

“类别”文本是一个不可点击或导航的标题，只是一个静态模板。

我找到了一篇文章 here但它没有源代码，我无法构建一个工作示例。

我怎样才能实现这样的目标？

Answer 1

我想出了一个解决方案，所以我会把它放在这里，以防有人需要类似的东西。

1. 添加 FlyoutItemTemplateSelector。此类将负责呈现常规弹出项或页眉模板。

   public class FlyoutItemTemplateSelector : DataTemplateSelector
   {
       public DataTemplate NavigationHeaderTemplate { get; set; }
       public DataTemplate NavigationItemTemplate { get; set; }
   
       protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
       { 
           if (item is ShellGroupItem && ((ShellGroupItem)item).Title == "Header")
           {
               // Make sure a header item is not clickable.
               ((ShellGroupItem)item).IsEnabled = false;
               return NavigationHeaderTemplate;
           }
           else
               return NavigationItemTemplate;
       }
   }
   

2. 将常规 ItemTemplate、新的 Header 模板和 FlyoutItemTemplateSelector 控件添加到 AppShell.xaml 中的 Shell.Resources 标记:

   <Shell.Resources>
       <ResourceDictionary>
           <DataTemplate x:Key="FlyoutItemTemplate">
               <Grid>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="0.25*" />
                       <ColumnDefinition Width="0.75*" />
                   </Grid.ColumnDefinitions>
                   <Label Text="{Binding Icon}"
                          FontFamily="{StaticResource MaterialFontFamily}"
                          HeightRequest="45"
                          Margin="20,0,0,0"
                          FontSize="30"
                          TextColor="Black"
                          VerticalTextAlignment="Center" />
                   <Label Grid.Column="1"
                          Text="{Binding Title}"
                          TextColor="Black"
                          VerticalTextAlignment="Center" />
               </Grid>
           </DataTemplate>
           <DataTemplate x:Key="FlyoutHeaderTemplate">
               <StackLayout Orientation="Vertical">
                   <Label HeightRequest="35"
                          Margin="20,0,0,0"
                          Text="{Binding Title}"
                          TextColor="Black"
                          VerticalTextAlignment="Center" />
               </StackLayout>
           </DataTemplate>
   
           <controls:FlyoutItemTemplateSelector
               x:Key="FlyoutTemplateSelector"
               NavigationHeaderTemplate="{StaticResource FlyoutHeaderTemplate}"
               NavigationItemTemplate="{StaticResource FlyoutItemTemplate}" />
       </ResourceDictionary>
   </Shell.Resources>
   

3. 将 Shell.ItemTemplate 添加到主 Shell 标记中:

   <Shell
       ...
       Shell.ItemTemplate="{StaticResource FlyoutTemplateSelector}"
   >
   

4. 为页眉添加项目:

   <ShellContent Title="Header" ContentTemplate="{DataTemplate local:AboutPage}" />
   

结果:

一些注意事项:

• 我们无法删除标题项的 ContentTemplate 属性，因此我们必须添加一个虚拟属性。我应该稍后再调查一下
• 确保 Title 属性设置为“Header”。 FlyoutItemTemplateSelector 控件会将此标识为 header 模板。

像这样，我们还可以定义其他模板，例如包含您的应用程序版本的页脚，或版权文本等...

希望这对任何人都有帮助。