如何使可扩展的表格视图用作子菜单？

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

首先，我建议您查看答案 here，其中我展示了使用 Xamarin Forms 创建 MasterDetail 设置的优化且简单的方法。

那么我建议你对这个展开折叠做这样的事情：

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

现在您可以编写一个转换器，也可以通过代码来完成。我会在没有转换器的情况下做到这一点。

在您的 HamburgerMenu 的 ViewModel 中添加属性：

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

然后在您的项目单击事件上添加以下代码行：

  ShowHideBar= !ShowHideBar;

它会像展开折叠菜单一样工作

祝你好运

查询时还原