将 DataTemplate 附加到 Xamarin.Forms ShellContent

Question

我已成功地将 DataTemplate 附加到 Xamarin.Forms Shell 应用程序中的 FlyoutItems 和 MenuItems。但是，如何将相同的模板附加到 ShellContent？

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:MyApp.Views"
       xmlns:volDash="clr-namespace:MyApp.Views.VolDash"
       xmlns:orgDash="clr-namespace:MyApp.Views.OrgDash"
       x:Class="EventingVolunteers.AppShell"
       FlyoutBackgroundColor="#337ab7">
    <Shell.Resources>
        <Style x:Key="FlyoutItemStyle" TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Red"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Green"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
        <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>
                <Image Source="{Binding FlyoutIcon}"
                    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>
    </Shell.Resources>
    <FlyoutItem
        x:Name="volFlyoutItem"
        Title="Volunteer Dashboard"
        FlyoutDisplayOptions="AsSingleItem"
        FlyoutIcon="ic_dashboard_white.png"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent Title="Signups" Icon="ic_assignment.png">
            <volDash:SignupsPage />
        </ShellContent>
        <ShellContent Title="Events" Icon="ic_event.png">
            <volDash:AreasPage />
        </ShellContent>
        <ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
            <volDash:MailboxPage />
        </ShellContent>
        <ShellContent Title="Rankings" Icon="fa_trophy.png">
            <volDash:MyRankingsPage />
        </ShellContent>
        <ShellContent Title="Videos" Icon="ic_ondemand_video.png">
            <volDash:TrainingVideoCategoriesPage />
        </ShellContent>
    </FlyoutItem>
    <FlyoutItem
        x:Name="orgFlyoutItem"
        Title="Organizer Dashboard"
        FlyoutDisplayOptions="AsSingleItem"
        FlyoutIcon="ic_dashboard_white.png"
        IsEnabled="False"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
        <ShellContent Title="Events" Icon="ic_event.png">
            <orgDash:EventsPage />
        </ShellContent>
    </FlyoutItem>
    <ShellContent
        Title="Account"
        Icon="ic_account_box_white.png"
        Shell.ItemTemplate="{StaticResource FlyoutTemplates}"
        Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}">
        <views:AccountPage />
    </ShellContent>
    <MenuItem
        Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}"
        Text="Logout"
        Icon="ic_dashboard_white.png"
        Command="{Binding LogOutCommand}" />
</Shell>

Answer 1

Shell 具有隐式转换运算符，可以简化 Shell 视觉层次结构，而无需在视觉树中引入额外的视图。这是可能的，因为子类Shell 对象只能包含FlyoutItem 对象或TabBar 对象，后者只能包含Tab 对象，而ShellContent 对象只能包含ShellContent 对象。这些隐式转换运算符可用于删除FlyoutItem、Tab 和ShellContent 对象。

在您的 xaml 中，ShellContent 是<FlayoutItme> <ShellContent/></FlayoutItme> 的简化，因此您只需在其外部添加<FlayoutItme> 并添加Shell.ItemTemplate。

<FlyoutItem
    x:Name="account"
    Title="Account"
    FlyoutDisplayOptions="AsSingleItem"
    FlyoutIcon="ic_account_box_white.png"
    Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
    <ShellContent>
        <views:AccountPage />
    </ShellContent>
</FlyoutItem>