How can I group MenuItems

Question

In my .Net MAUI app, in Shell.xaml I have several MenuItems in a hamburger menu:

<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}" /> 
...

This menu becomes too long, so I would like to group some items. Is it possible to make some menu elements nested (collapsible)? It seems like it is possible with FlyoutItem, but what about MenuItems?

score 1 · Answer 1 · answered Dec 10 '22 at 20:12

I'm not sure maybe you find something in the shell documentory: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0

But you could try something it's just an idea. You can make a Binding to the IsVisible property of the menu or flyoutitems and change it when another one is clicked. So you would have the group item and if its clicked you change the bool to true so the others get visible. When you click again the bool is false.

That is not a very beautifull solution but it should work.

Hongxin Sui-MSFT · Answer 2 · 2022-12-23T02:58:53.763

0

You can use the Expander from CommunityToolkit.Maui.Markup Package to achieve it.

First, you need to import package CommunityToolkit.Maui.Markup to .Net Maui. And you should initialize the package in the MauiProgram.cs file first using the following code:

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

Then, you can try to use the following code in 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>

Finally, for more information about Expander, you can refer to the document: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/expander. I hope my work can help you.

edited Dec 23 '22 at 02:58

answered Dec 13 '22 at 07:41

Hongxin Sui-MSFT

174
3

Thank you for your answer. I added the package, but Expander is still not recognized. – David Shochet Dec 13 '22 at 13:17
Moreover, if I follow documentation and use using CommunityToolkit.Maui.Views; in code behind, Views is not there, either... – David Shochet Dec 13 '22 at 15:28
I referred to this issue, if you have time, you may see it：https://stackoverflow.com/questions/72125069/expandable-menu-item-in-appshell-in-xamarin-forms. – Hongxin Sui-MSFT Dec 14 '22 at 05:43
Hmm, I don't see there a solution for this issue, I mean, why it is not recognized. Plus there it does not deal with MAUI at all. – David Shochet Dec 14 '22 at 11:25
Indeed, this is my problem. This is an issue I found about Expandable child menu elements in Maui: https://stackoverflow.com/questions/74478035/maui-appshell-cascading-menuexpandable-child-menu-elements, and I hope it can help you. – Hongxin Sui-MSFT Dec 15 '22 at 07:53
Sorry, I don't understand. If you have a solution that would let it compile, could you just add it to your answer? In its current form it just doesn't compile. – David Shochet Dec 15 '22 at 16:11
I understand your confusion and I have updated my answer. I don't know if you missed this step, and if you still have follow-up questions, we can continue to communicate. – Hongxin Sui-MSFT Dec 23 '22 at 03:02

How can I group MenuItems

2 Answers2