将 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 对象。这些隐式转换运算符可用于删除 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>

将 DataTemplate 附加到 Xamarin.Forms ShellContent

Attach DataTemplate to Xamarin.Forms ShellContent

xamarin.forms

xamarin.forms-styles

xamarin.forms.shell