我创建了一个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
答案 0 :(得分: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;
它将像展开折叠菜单一样工作
好运
查询时还原