如何为Xamarin.Forms ShellContent复用FlyoutItems/MenuItem的DataTemplate？

你已经成功给FlyoutItem和MenuItem配置了自定义DataTemplate，要让ShellContent也用上同一个模板，需要分两种场景处理：FlyoutItem下的子ShellContent和独立的顶级ShellContent，下面是具体的实现步骤和代码修改：

1. 先理清Shell模板属性的区别 #

在Shell体系里，不同层级的菜单项对应不同的模板配置属性：

• Shell.ItemTemplate：用来定义Flyout中顶级项（比如FlyoutItem、独立的ShellContent）的显示样式。
• Shell.MenuItemTemplate：用来定义FlyoutItem的子项（也就是它包含的ShellContent）的显示样式。

你的FlyoutTemplates模板可以同时适配这两种场景，只需要微调一下绑定逻辑即可。

2. 修改模板适配ShellContent属性 #

你的当前模板里，Image绑定的是FlyoutIcon，但ShellContent默认只有Icon属性（FlyoutItem用的是FlyoutIcon）。我们可以通过绑定的FallbackValue实现兼容，让模板同时支持两种类型的项：

<DataTemplate x:Key="FlyoutTemplates">
    <Grid HeightRequest="{x:OnPlatform Android=50}" Style="{StaticResource FlyoutItemStyle}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50}"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!-- 优先绑定FlyoutIcon，没有的话 fallback 到Icon -->
        <Image Source="{Binding FlyoutIcon, FallbackValue={Binding Icon}}" 
               VerticalOptions="Center" 
               HorizontalOptions="Center" 
               HeightRequest="{x:OnPlatform Android=24, iOS=22}" 
               WidthRequest="{x:OnPlatform Android=24, iOS=22}">
        </Image>
        <Label VerticalOptions="Center" 
               Text="{Binding Title}" 
               FontSize="{x:OnPlatform Android=14, iOS=Small}" 
               FontAttributes="Bold" 
               Grid.Column="1">
            <Label.TextColor> White </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>

3. 为FlyoutItem的子ShellContent配置模板 #

给你的volFlyoutItem和orgFlyoutItem添加Shell.MenuItemTemplate属性，绑定到你的模板资源，这样它们下面的ShellContent就会以自定义样式显示在Flyout的子菜单里：

<FlyoutItem x:Name="volFlyoutItem" 
            Title="Volunteer Dashboard" 
            FlyoutDisplayOptions="AsSingleItem" 
            FlyoutIcon="ic_dashboard_white.png" 
            Shell.ItemTemplate="{StaticResource FlyoutTemplates}"
            <!-- 添加此行，让子ShellContent使用自定义模板 -->
            Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}">
    <ShellContent Title="Signups" Icon="ic_assignment.png">
        <volDash:SignupsPage />
    </ShellContent>
    <!-- 其余ShellContent保持不变 -->
</FlyoutItem>

<FlyoutItem x:Name="orgFlyoutItem" 
            Title="Organizer Dashboard" 
            FlyoutDisplayOptions="AsSingleItem" 
            FlyoutIcon="ic_dashboard_white.png" 
            IsEnabled="False" 
            Shell.ItemTemplate="{StaticResource FlyoutTemplates}"
            <!-- 同样添加此行 -->
            Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}">
    <ShellContent Title="Events" Icon="ic_event.png">
        <orgDash:EventsPage />
    </ShellContent>
</FlyoutItem>

4. 独立ShellContent的模板设置 #

你代码里的Account ShellContent已经正确配置了Shell.ItemTemplate，这部分不需要修改——它作为Flyout的顶级项，会直接使用你的自定义模板。另外这里可以去掉多余的Shell.MenuItemTemplate属性（因为独立ShellContent没有子项）：

<ShellContent Title="Account" 
              Icon="ic_account_box_white.png" 
              Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
    <views:AccountPage />
</ShellContent>

最终效果 #

完成上述修改后：

• Flyout中的顶级项（FlyoutItem、Account ShellContent）会按照Shell.ItemTemplate定义的样式显示
• FlyoutItem展开后的子ShellContent会使用Shell.MenuItemTemplate定义的样式，和你的模板完全一致

内容的提问来源于stack exchange，提问作者fnllc