How can i make an expandable table view to work as submenus?

Question

I created a MasterDetailPage to create menu for my cross platform aplication. Some items of the menu have submenus within. I would like to show these submenus after the user tap in the menu item.

I have a table view with multiple viewcell for each menu item but i dont know how to show submenu items.

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KiaiDay.Views.Main.HomePage"
             xmlns:pages="clr-namespace:KiaiDay.Views.Main"
                      xmlns:local="clr-namespace:KiaiDay.MarkupExtensions" NavigationPage.HasNavigationBar="False">


  <MasterDetailPage.Master>
        <pages:HomePageMaster x:Name="MasterPage" Title="Menu" NavigationPage.HasNavigationBar="False" Padding="0">
            <StackLayout>
                <Grid Padding="10" BackgroundColor="#456f95" HeightRequest="200" VerticalOptions="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>

                    <Image Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Source="{local:ImageResource KiaiDay.Images.user.png}" BackgroundColor="Transparent" HorizontalOptions="EndAndExpand"/>
                    <Label Text="Kelve Neto" Grid.Row="1" Grid.Column="1" BackgroundColor="Transparent" VerticalOptions="EndAndExpand" FontSize="Medium"/>
                    <Label Text="10 Dias" Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent" VerticalOptions="StartAndExpand" TextColor="BlueViolet" FontSize="Small" FontAttributes="Bold"/>
                </Grid>

                <StackLayout>
                <TableView Intent="Menu">
                    <TableSection>

                        <ViewCell>
                            <StackLayout Padding="30,0,0,0" VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/ios/50/000000/goal.png" HorizontalOptions="Start"/>
                                        <Label Text="Objectivos" Margin="30,0,0,0" FontAttributes="Bold"/>
                                        <Image Source="https://img.icons8.com/material-rounded/50/000000/expand-arrow.png" HorizontalOptions="EndAndExpand"/>
                                    </StackLayout>
                                </StackLayout>
                        </ViewCell>

                        <ViewCell>
                                <StackLayout Padding="30,0,0,0"  VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/ios/50/000000/trophy.png" HorizontalOptions="Start"/>
                                        <Label Text="Prémios" Margin="30,0,0,0" FontAttributes="Bold"/>
                                        <Image Source="https://img.icons8.com/material-rounded/50/000000/expand-arrow.png" HorizontalOptions="EndAndExpand"/>
                            </StackLayout>
                                    </StackLayout>
                        </ViewCell>

                        <ViewCell>
                                <StackLayout Padding="30,0,0,0"  VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/ios/50/000000/task.png" HorizontalOptions="Start"/>
                                        <Label Text="Tarefas" Margin="30,0,0,0" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>

                        <ViewCell>
                                <StackLayout Padding="30,0,0,0"  VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/ios/50/000000/tasks-filled.png" HorizontalOptions="Start"/>
                                        <Label Text="Notas" Margin="30,0,0,0" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>

                        <ViewCell>
                                <StackLayout Padding="30,0,0,0"  VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/ios/50/000000/help.png" HorizontalOptions="Start"/>
                                        <Label Text="Suporte" Margin="30,0,0,0" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>

                        <ViewCell>
                                <StackLayout Padding="30,0,0,0"  VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/ios/50/000000/today.png" HorizontalOptions="Start"/>
                                        <Label Text="Hoje" Margin="30,0,0,0" FontAttributes="Bold"/>
                                        <Image Source="https://img.icons8.com/material-rounded/50/000000/expand-arrow.png" HorizontalOptions="EndAndExpand"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>

                        <ViewCell>
                                <StackLayout Padding="30,0,0,0"  VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/ios/50/000000/hourglass-sand-bottom.png" HorizontalOptions="Start"/>
                                        <Label Text="Terminar Dia" Margin="30,0,0,0" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>

                        <ViewCell>
                                <StackLayout Padding="30,0,0,0"  VerticalOptions="Center">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="https://img.icons8.com/metro/50/000000/exit.png" HorizontalOptions="Start"/>
                                        <Label Text="Sair" Margin="30,0,0,0" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>

                        </TableSection>
                </TableView>
                </StackLayout>

            </StackLayout>
        </pages:HomePageMaster>
  </MasterDetailPage.Master>


    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <pages:HomePageDetail />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

I would like to have something like this : https://i.stack.imgur.com/lHlBF.jpg

score 1 · Accepted Answer · answered Apr 04 '19 at 13:34

1

First of all, I would suggest you check the answer here where I have shown the optimized and easy way of creating MasterDetail setup with Xamarin Forms.

Then I would suggest you do something like this for the Expand collapse of this do something like:

<StackLayout> // Parent Menu Item Stacklayout
   .
   .
<StackLayout IsVisible="{Binding ShowHideBar}">
   .
   .
</StackLayout>
</StackLayout>

Now either you can write a convertor or just do it through the code. I will do it without a converter.

In your HamburgerMenu's ViewModel add the property :

private bool _showHide;
public bool ShowHideBar { get{return _showHide;} 
set{_showHide=value; OnPropertyChanged(nameof(ShowHideBar)); }}

Then on your Items click event add the following line of code:

  ShowHideBar= !ShowHideBar;

And it will work like an Expand collapse menu

Goodluck

Revert in case of query

answered Apr 04 '19 at 13:34

FreakyAli

13,349
3
23
63

its like u are speaking chinese to me xD. is there a way to do it without viewmodel ? I dont know how to use that very well... – Kelve Apr 04 '19 at 13:40
Lol, of course, you can do it without a ViewModel just do the same code from your `.xaml.cs` file – FreakyAli Apr 04 '19 at 14:10
Just tried. but there were 2 problems : 1st- when i add new stack layout, the menu items on the bottom are not visible. 2nd- I added a scrollview and inserted all the elements inside of it, but now the view is not addapable. I mean, it has been reserved space for expandable submenus – Kelve Apr 04 '19 at 14:26
Update that code into your question will have a look – FreakyAli Apr 04 '19 at 15:05
Nevermind, it worked. thanks for the help. I had a boxview screwing the things up :D – Kelve Apr 04 '19 at 15:26

How can i make an expandable table view to work as submenus?

1 Answers1