在 Shell 中动态创建 FlyoutItem 列表? [英] Dynamically create list of FlyoutItem in Shell?

问题描述

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

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

<ListView x:Name=MenuItemsListView"SeparatorVisibility =无"HasUnevenRows="true"ItemsSource={绑定菜单项}"><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=自动"/><RowDefinition Height=10"/></Grid.RowDefinitions><标签Grid.Column=1"Grid.Row=2"文本={绑定标题}"样式={DynamicResource SubtitleStyle}"；TextColor=#d7d9b4"字体大小=24"/></网格></ListView.Header><ListView.ItemTemplate><数据模板><ViewCell><StackLayout Padding="15,10";Horizo​​ntalOptions="FillAndExpand"><Label VerticalOptions="FillAndExpand";VerticalTextAlignment=居中"Text="{Binding MenuTitle}";d:Text="{绑定.}";字体大小=20"/></StackLayout></ViewCell></数据模板></ListView.ItemTemplate></ListView></StackLayout>

你有动态 FlyoutItems 的例子吗?

解决方案

您可以使用

Currently I use MasterDetailPage but I want to change my project model to Shell.

How can I generate FlyoutItems dynamically like my old version of 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>

Do you have example with dynamic FlyoutItems?

解决方案

You can use FlyoutContentTemplate, by using it you are telling Shell to overwrite/replace whatever the Flyout content that was auto-generate based on your AppShell.xaml hierarchy by what you provide instead.

I guess by MenuItems you meant a list of flyout items.

<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>

Sample code

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;
}

It is only a sample to show the idea, not sure about your data design, but maybe it is better to use FlyoutContentTemplate with an ObservableCollection of your Items and MenuItemTemplate to a separate list of Menus item.

这篇关于在 Shell 中动态创建 FlyoutItem 列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！