Expander of flyout items in .net maui

Haider Ali Faizi 80

I want to add expander in flyout items. There is also answer available and that is:"https://learn.microsoft.com/en-us/answers/questions/315590/is-it-possible-to-use-expander-in-shell-flyout" but it is adding in header. I want to add in flyout items. I found one solution and that is:"https://github.com/xamarin/XamarinCommunityToolkit/issues/570"It is working fine somehow but how i move to expanded page like if I have that code:" <Shell.ItemTemplate>

        <DataTemplate>

            <StackLayout>

                <!--This grid is a workaround to make the expanding menu work on iOS.

                If and when the bug is fixed, it can be done away with and the stack layout can be moved back to the Expander.Header-->


                  

                <Grid RowDefinitions="35">

                    <StackLayout

                        Orientation="Horizontal">

                                       **THE UI PREVIOUSLY IN THE EXPANDER.HEADER, LABEL / CHEVRON ETC**

                    </StackLayout>

                    <Button BackgroundColor="Transparent" Clicked="Button_OnClicked"></Button>

                </Grid>


                

                <toolkit:Expander x:Name="Expander">

                <!--<toolkit:Expander.Header>

                        **Where the header ui should go in an ideal circumstance, if iOS wasn't being weird.**

                </toolkit:Expander.Header>-->

                <StackLayout Margin="60,0,0,0">

                          **... menu items, to be displayed when expanded**

                </StackLayout>

            </toolkit:Expander>

            </StackLayout>

        </DataTemplate>

    </Shell.ItemTemplate>

" If, I write label in menu items because due to expander, I cannot write shellcontent etc for routes. How can I move to that expanded page

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,446 Reputation points Microsoft Vendor

2024-04-08T09:33:38.17+00:00
It looks like you have found a workaround to display the expander, but you don't know how to add routes for the expander, right?

I write label in menu items because due to expander, I cannot write shellcontent etc for routes

The title doesn't appear on the expander, right? You could add the shellcontent as default, and try to add a Lable on the expander, then bind the Title of ShellContent.

<toolkit:Expander x:Name="Expander">  <StackLayout Margin="60,0,0,0"> <Label Text="{Binding Title}"></Label> **... menu items, to be displayed when expanded** </StackLayout> </toolkit:Expander>

For example, setting the ShellContent

<ShellContent Title="NewPage1" ContentTemplate="{DataTemplate local:NewPage1}" Route="NewPage1" />// the Title will display on the label and the route will be set

Please let me know if it is your expected behavior. If not, please describe in detail so that we can work together to figure it out.

Haider Ali Faizi 80

As you can see you are using one label and bind title with title of shell content:<toolkit:Expander x:Name="Expander">

            <!--<toolkit:Expander.Header>

                    **Where the header ui should go in an ideal circumstance, if iOS wasn't being weird.**

            </toolkit:Expander.Header>-->

            <StackLayout Margin="60,0,0,0">

                     <Label Text="{Binding Title}"></Label>  **... menu items, to be displayed when expanded**

            </StackLayout>

        </toolkit:Expander>' but in case of two or more label in one expander, how will it binds. Can you give me one full example for more clarification?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 26,446 Reputation points Microsoft Vendor

2024-04-09T07:36:14.1533333+00:00

You mean set all menus in a same expander, right? Is the menu quantity fixed? Would you mind sharing your Shell page with ShellContent so that I can test if it is possible to put them in one expander?