Attach DataTemplate to Xamarin.Forms ShellContent

Question

I'm succesfully attaching a DataTemplate to my FlyoutItems and MenuItems in my Xamarin.Forms Shell App. However, how do I attach the same template to the 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 has implicit conversion operators that enable the Shell visual hierarchy to be simplified, without introducing additional views into the visual tree. This is possible because a subclassed Shell object can only ever contain FlyoutItem objects or a TabBar object, which can only ever contain Tab objects, which can only ever contain ShellContent objects. These implicit conversion operators can be used to remove the FlyoutItem, Tab, and ShellContent objects.

In your xaml,the ShellContent is a simplification of <FlayoutItme> <ShellContent/></FlayoutItme>,so you just need to add <FlayoutItme> outside it and add 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>