0

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

ertan2002
  • 1,458
  • 1
  • 32
  • 68
  • Could you set the item [DataTemplate](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance) to the [Toolkit Expander](https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/expander)? I'm not completely sure it would work, but I think it's worth a try – Andrew May 05 '22 at 14:00

2 Answers2

0

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?

Adrain
  • 1,946
  • 1
  • 3
  • 7
0

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>

enter image description here

Bas H
  • 2,114
  • 10
  • 14
  • 23
  • thank you for your answer. But this is for header. I am looking for the menu items. Anyway, I implemented something but the problem when I click the parent item, sometimes I get an error because there is no routing – ertan2002 May 09 '22 at 08:52
  • there is a bug in iOS , when you click the header element of the expander the menu closes – Loukas Mar 12 '23 at 19:06