在 Shell 中动态创建 FlyoutItem 列表？

Question

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

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

<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 的示例吗？

Answer 1

您可以使用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您的项目和MenuItemTemplate单独的菜单项列表一起使用。