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

Question

在 Xamarin Shell 中，我正在尝试向弹出项添加标题。请参见下图（取自 Xaminals 项目）。

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

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

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

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 控件会将其标识为标题模板。

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

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

Answer 2

您可以使用 MenuItem 而不是 ShellContent 来实现此目的。菜单项具有单击事件和命令属性，但是如果您不绑定到命令，则可以有效地创建一个在单击时不执行任何操作的节标题。请参阅：https ://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#menu-items

<Shell
 ..
   <Shell.MenuItemTemplate>
     <DataTemplate>
      <!-- Layout for menu item to differentiate from clickable flyout items -->
    </DataTemplate>
   </Shell.MenuItemTemplate>

  <MenuItem Text="Section Header">
  <FlyoutItem .../>
  <ShellContent .../>
..
</Shell>