Как я могу сделать расширяемое табличное представление, чтобы работать как подменю?

Question

Я создал MasterDetailPage для создания меню для кроссплатформенного приложения. Некоторые пункты меню имеют подменю внутри. Я хотел бы показать эти подменю после того, как пользователь нажал на пункт меню.

У меня есть табличное представление с несколькими viewcell для каждого элемента меню, но я не знаю, как отобразить элементы подменю.

<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>

Я бы хотел что-то вроде этого: https://imgur.com/a/7OxOvRw

Answer 1

Прежде всего, я бы посоветовал вам проверить ответ здесь , где я показал оптимизированный и простой способ создания установки MasterDetail с помощью форм Xamarin.

Тогда я бы посоветовал вам сделать что-то вроде этого, чтобы развал Expand этого сделал что-то вроде:

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

Теперь вы можете написать конвертер или просто сделать это с помощью кода. Я сделаю это без конвертера.

В ViewModel вашего HamburgerMenu добавьте свойство:

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

Затем к вашему событию Click Items добавьте следующую строку кода:

  ShowHideBar= !ShowHideBar;

И это будет работать как разворачивающееся меню «Развернуть»

Гудлак

Возврат в случае запроса