添加 shell 弹出项目 header

Question

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

'Categories' 文本是一个 header，它不可点击或导航，只是一个静态模板。

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

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

Answer 1

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

添加 FlyoutItemTemplateSelector。此 class 将负责呈现常规弹出项目或 header 模板。

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

将常规 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>

将 Shell.ItemTemplate 添加到主 Shell 标签：

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

为header添加项目：

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

结果：

一些注意事项：

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

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

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

Answer 2

您可以使用 MenuItem 而不是 ShellContent 来实现此目的。菜单项具有单击事件和命令属性，但如果您不绑定到命令，则可以有效地创建一个在单击时不执行任何操作的部分 header。参见：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>

添加 shell 弹出项目 header

Adding a shell flyout item header

xamarin.forms

xamarin.shell