Как я могу сгруппировать элементы меню

Question

В моем приложении .Net MAUI в Shell.xaml у меня есть несколько элементов меню в меню гамбургера:

      <MenuItem Text="Visit Website"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding VisitWebsiteCommand}" />
<MenuItem Text="Customer Portal"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenCustomerPortalCommand}" />
<MenuItem Text="View Catalog"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding ViewCatalogCommand}" />
<MenuItem Text="Grout Selector"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenGroutSelectorCommand}" />
<MenuItem Text="Search Data Sheets"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenDataSheetsCommand}" /> 
...

Это меню становится слишком длинным, поэтому я хотел бы сгруппировать некоторые пункты. Можно ли сделать некоторые элементы меню вложенными (разборными)? Вроде как с FlyoutItem можно, а как насчет MenuItems?

Answer 1

Я не уверен, может быть, вы найдете что-то в документации по оболочке:https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0

Но вы можете попробовать что-нибудь, это просто идея. Вы можете сделать привязку к свойству IsVisible меню или всплывающих элементов и изменить его при нажатии другого. Таким образом, у вас будет групповой элемент, и если его щелкнуть, вы измените логическое значение на true, чтобы другие стали видны. Когда вы щелкаете снова, логическое значение становится ложным.

Это не очень красивое решение, но оно должно работать.

Answer 2

Для этого можно использовать Expander из пакета CommunityToolkit.Maui.Markup.

Во-первых, вам нужно импортировать пакет CommunityToolkit.Maui.Markup в .Net Maui. И вы должны сначала инициализировать пакет в файле MauiProgram.cs, используя следующий код:

       var builder = MauiApp.CreateBuilder();
 builder
.UseMauiApp<App>()
.UseMauiCommunityToolkitMarkup()

Затем вы можете попробовать использовать следующий код в Shell.xaml:

      <MenuItem>
  <Expander>
    <Expander.Header>
        <Label Text="Extra Page's ⇅" FontAttributes="Bold"  FontSize="Medium"/>
    </Expander.Header>
    <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="Auto,Auto" 
     Padding="0,5,5,5">
        <Button Text="Visit Website" Grid.Row="0" Grid.Column="0" 
      IconImageSource="{StaticResource IconLaunch}"
      Command="{Binding VisitWebsiteCommand}" HeightRequest="40" 
      WidthRequest="336"/>
        <Button Text="Customer Portal" Grid.Row="1" Grid.Column="0" 
      IconImageSource="{StaticResource IconLaunch}"
      Command="{Binding OpenCustomerPortalCommand}" HeightRequest="40" 
      WidthRequest="336"/>
        <Button Text="Page 3" Grid.Row="2" Grid.Column="0" 
      IconImageSource="{StaticResource IconLaunch}"
      Command="{Binding ViewCatalogCommand}" HeightRequest="40" 
      WidthRequest="336"/>
    </Grid>
  <Expander>
</MenuItem>

Наконец, для получения дополнительной информации об Expander вы можете обратиться к документу: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/expander . Я надеюсь, что моя работа может помочь вам.