Dynamically create list of FlyoutItem in Shell?

user_13595300 0
Viewed 1936

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?

xamarin.forms.shell xamarin.forms xamarin xaml c#
1 Answers

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.

enter image description here

user_52282020
Related