在 Shell 中动态创建 FlyoutItem 列表？ 示例代码

问题描述

目前我使用 MasterDetailPage，但我想将我的项目模型更改为 Shell。

如何像旧版本的 MasterDetail 一样动态生成 FlyoutItems？

<StackLayout>
        <ListView x:Name="MenuItemsListView"
              SeparatorVisibility="None"
              HasUnevenRows="true"
              ItemsSource="{Binding MenuItems}">
            <ListView.Header>
                <Grid BackgroundColor="#8f0000">
                    <Grid.ColumnDeFinitions>
                        <ColumnDeFinition Width="10"/>
                        <ColumnDeFinition Width="*"/>
                        <ColumnDeFinition Width="10"/>
                    </Grid.ColumnDeFinitions>
                    <Grid.RowDeFinitions>
                        <RowDeFinition Height="30"/>
                        <RowDeFinition Height="80"/>
                        <RowDeFinition Height="Auto"/>
                        <RowDeFinition Height="10"/>
                    </Grid.RowDeFinitions>
                    <Label
                          Grid.Column="1"
                          Grid.Row="2"
                          Text="{Binding Title}"
                          Style="{DynamicResource SubtitleStyle}" 
                          TextColor="#d7d9b4"
                          FontSize="24"/>
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
                            <Label VerticalOptions="FillAndExpand" 
                                    VerticalTextAlignment="Center" 
                                    Text="{Binding MenuTitle}" 
                                    d:Text="{Binding .}"
                                    FontSize="20"/> 
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>        
    </StackLayout>

你有动态 FlyoutItems 的例子吗？

解决方法

您可以使用 FlyoutContentTemplate，通过使用它，您是在告诉 Shell 根据您提供的内容覆盖/替换基于您的 AppShell.xaml 层次结构自动生成的任何 Flyout 内容.

我猜您说的 MenuItems 是指弹出项目的列表。

<Shell Title="Shell Title" ...>

<Shell.FlyoutContentTemplate>
        <DataTemplate>
            <StackLayout>
                <ListView x:Name="MenuItemsListView"
                          SeparatorVisibility="None"
                          HasUnevenRows="true"
                          ItemsSource="{Binding FlyoutItems}">
                    <ListView.Header>
                        <Grid BackgroundColor="#8f0000">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="10"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="80"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="10"/>
                            </Grid.RowDefinitions>
                            <Label Grid.Row="2" Grid.Column="1"
                                   TextColor="#d7d9b4"
                                   Text="{Binding Title}"
                                   FontSize="24"/>
                        </Grid>
                    </ListView.Header>

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Padding="15,10"
                                             HorizontalOptions="FillAndExpand">
                                    <Label VerticalOptions="FillAndExpand"
                                           VerticalTextAlignment="Center"
                                           Text="{Binding MenuTitle}"
                                           TextColor="Black"
                                           FontSize="20"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>

示例代码

public ObservableCollection<dynamic> FlyoutItems { get; set; }

public AppShell()
{
            FlyoutItems = new ObservableCollection<dynamic>()
            {
                new {  MenuTitle="MenuTitle1" },new {  MenuTitle="MenuTitle2" },new {  MenuTitle="MenuTitle3" },new {  MenuTitle="MenuTitle4" }
            };
            InitializeComponent();
            BindingContext = this;
}

这只是一个展示想法的示例，不确定您的数据设计，但也许最好将 FlyoutContentTemplate 与 ObservableCollection 的 Items 和 MenuItemTemplate 用于菜单项的单独列表。