Присоединить шаблон данных к Xamarin.Forms ShellContent

Question

Я успешно присоединяю DataTemplate к своим элементам FlyoutItems и MenuItems в моем приложении оболочки Xamarin.Forms. Однако, как мне прикрепить этот же шаблон к 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 объекты. Эти операторы неявного преобразования можно использовать для удаления объектов 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>