Expandable Menu Item in Appshell in Xamarin.Forms

Question

I would like to add expander menu items in the appshell menu as below

I could not find any example for it. Is there a way to implement it? i think that, somehow I have to customise the template

Answer 1

Xamarin shell not have this feature yet, you can try to use "FlyoutDisplayOptions="AsMultipleItems"" though,code like:

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="More"
         Icon="main.png">
        <ShellContent Title="Tab1"
                      Icon="item1.png"
                      ContentTemplate="{DataTemplate  local:Item1Page}" />
        <ShellContent Title="Tab2"
                      Icon="item2.png"
                      ContentTemplate="{DataTemplate local:Item2Page}" />
    </Tab>

And here is a workaround through changing the visibility of the shellcontent to achieve the similiar feature Is it possible to add sub-menus inside a single menu item at runtime in Shell?

Answer 2

You can use the Expander from Xamarin Community Toolkit and make your own . This is a small example how to use it

https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/expander

<Shell.FlyoutHeader>
    <xct:Expander>
        <xct:Expander.Header>
            <Label Text="Extra Page's ⇅" FontAttributes="Bold"  FontSize="Medium" />
        </xct:Expander.Header>
        <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" Padding="0,5,5,5">


            <Button Text="Page" Grid.Row="0" Grid.Column="0" Clicked="OnMenuItemClicked" HeightRequest="40" WidthRequest="336" />
            <Button Text="Page 2" Grid.Row="1" Grid.Column="0" Clicked="OnMenuItemClicked" HeightRequest="40" WidthRequest="336" />
            <Button Text="Page 3" Grid.Row="2" Grid.Column="0" Clicked="OnMenuItemClicked" HeightRequest="40" WidthRequest="336" />
            <Button Text="Page 4" Grid.Row="3" Grid.Column="0" Clicked="OnMenuItemClicked" HeightRequest="40" WidthRequest="336" />
        </Grid>
    </xct:Expander>
</Shell.FlyoutHeader>