.NET MAUI中如何对Shell汉堡菜单的MenuItem分组嵌套？

首先明确：原生MenuItem不支持嵌套（可折叠）结构，它没有用于承载子项的属性，和支持嵌套的FlyoutItem/SubFlyoutItem不同。要实现菜单项的可折叠分组，可通过以下两种方案实现：

方案一：使用SubFlyoutItem构建原生嵌套菜单 #

利用.NET MAUI提供的SubFlyoutItem组件作为折叠容器，内部可承载MenuItem或其他导航元素，完美适配Shell原生Flyout样式，实现成本低。

示例代码：

<!-- 独立菜单项 -->
<MenuItem Text="Visit Website"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding VisitWebsiteCommand}" />
<MenuItem Text="Customer Portal"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenCustomerPortalCommand}" />

<!-- 可折叠分组 -->
<FlyoutItem Title="Resources" IconImageSource="{StaticResource IconFolder}">
    <SubFlyoutItem Title="Resource Tools">
        <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}" />
    </SubFlyoutItem>
</FlyoutItem>

点击顶级FlyoutItem（示例中的"Resources"），即可展开/折叠内部的MenuItem列表。

方案二：自定义Flyout布局（高度定制化） #

如果需要完全自定义菜单样式（比如分组标题样式、子项缩进、动画效果等），可以替换Shell的FlyoutContent，使用Expander控件实现可折叠分组，搭配自定义按钮模拟菜单项。

示例代码：

<Shell.FlyoutContent>
    <ScrollView>
        <StackLayout Padding="10" Spacing="5">
            <!-- 独立菜单项 -->
            <Button Text="Visit Website"
                    ImageSource="{StaticResource IconLaunch}"
                    Command="{Binding VisitWebsiteCommand}"
                    HorizontalOptions="Fill" />
            <Button Text="Customer Portal"
                    ImageSource="{StaticResource IconLaunch}"
                    Command="{Binding OpenCustomerPortalCommand}"
                    HorizontalOptions="Fill" />
            
            <!-- 可折叠分组 -->
            <Expander Header="Resources" 
                      HeaderBackgroundColor="#f0f0f0"
                      HeaderPadding="10">
                <StackLayout Padding="15,0" Spacing="5">
                    <Button Text="View Catalog"
                            ImageSource="{StaticResource IconLaunch}"
                            Command="{Binding ViewCatalogCommand}"
                            HorizontalOptions="Fill" />
                    <Button Text="Grout Selector"
                            ImageSource="{StaticResource IconLaunch}"
                            Command="{Binding OpenGroutSelectorCommand}"
                            HorizontalOptions="Fill" />
                    <Button Text="Search Data Sheets"
                            ImageSource="{StaticResource IconLaunch}"
                            Command="{Binding OpenDataSheetsCommand}"
                            HorizontalOptions="Fill" />
                </StackLayout>
            </Expander>
        </StackLayout>
    </ScrollView>
</Shell.FlyoutContent>

这种方式可完全控制菜单的视觉表现，适合有特殊UI需求的场景。

内容的提问来源于stack exchange，提问作者David Shochet