在MAUI AppShell中使用MenuFlyoutItem/SubItem实现级联菜单失败求助

你的代码核心问题是直接将MenuFlyoutItem和MenuFlyoutSubItem作为Shell的直接子元素，而Shell的默认Flyout仅识别FlyoutItem、ShellContent等导航项，MenuFlyout系列控件需要放在指定容器中才能正确渲染层级并响应交互，导致当前仅显示"Send to"且无法展开子菜单。

以下是两种可行的修正方案：

方案一：通过FlyoutItem.Flyout实现弹出式级联菜单 #

将级联菜单绑定到某个FlyoutItem的Flyout属性，点击该FlyoutItem时弹出完整级联菜单：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MPCCalculator"
       xmlns:page="clr-namespace:MPCCalculator.Pages"
       x:Class="MPCCalculator.AppShell">

    <Shell.FlyoutHeader>
        <VerticalStackLayout>
            <Label Text="MPC-Calculator" FontAttributes="Bold"/>
        </VerticalStackLayout>
    </Shell.FlyoutHeader>

    <!-- 级联菜单容器 -->
    <FlyoutItem Title="操作菜单">
        <FlyoutItem.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Open"/>
                <MenuFlyoutSubItem Text="Send to">
                    <MenuFlyoutItem Text="Bluetooth" />
                    <MenuFlyoutItem Text="Desktop (shortcut)" />
                    <MenuFlyoutSubItem Text="Compressed file">
                        <MenuFlyoutItem Text="Compress and email" />
                        <MenuFlyoutItem Text="Compress to .7z" />
                        <MenuFlyoutItem Text="Compress to .zip" />
                    </MenuFlyoutSubItem>
                </MenuFlyoutSubItem>
            </MenuFlyout>
        </FlyoutItem.Flyout>
    </FlyoutItem>

    <!-- 原有导航项 -->
    <FlyoutItem Title="MPC" Icon="home_icon.png">
        <ShellContent Title="MPC-Calculator" ContentTemplate="{DataTemplate local:MainPage}"/>
    </FlyoutItem>

    <FlyoutItem Title="MPC - File Demo" Icon="add_icon.png">
        <ShellContent ContentTemplate="{DataTemplate page:MPCFileDemo}"/>
    </FlyoutItem>

    <FlyoutItem Title="File Open Test" Icon="file_open.png">
        <ShellContent ContentTemplate="{DataTemplate page:TestView}"/>
    </FlyoutItem>

    <MenuFlyoutSeparator />
    <MenuFlyoutSeparator />

    <FlyoutItem Title="Settings" Icon="tab_settings.png">
        <ShellContent ContentTemplate="{DataTemplate page:SettingsView}"/>
    </FlyoutItem>

    <ShellContent Title="About" Icon="info.png" ContentTemplate="{DataTemplate page:AboutView}" />

</Shell>

修改后，点击"操作菜单"会弹出包含完整级联结构的菜单，"Send to"可正常展开子菜单。

方案二：自定义FlyoutContent实现内嵌式级联菜单 #

如果需要将级联菜单直接内嵌在Flyout列表中（而非弹出），可以自定义Shell.FlyoutContent，使用Expander控件实现展开/折叠效果：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MPCCalculator"
       xmlns:page="clr-namespace:MPCCalculator.Pages"
       x:Class="MPCCalculator.AppShell">

    <Shell.FlyoutContent>
        <VerticalStackLayout Spacing="10" Padding="20">
            <!-- 原有Header -->
            <Label Text="MPC-Calculator" FontAttributes="Bold" FontSize="Large"/>
            
            <!-- 内嵌级联菜单 -->
            <Button Text="Open" Command="{Binding OpenCommand}"/>
            <Expander Header="Send to" ExpandAnimationEasing="SinOut">
                <VerticalStackLayout Spacing="5">
                    <Button Text="Bluetooth" Command="{Binding SendToBluetoothCommand}"/>
                    <Button Text="Desktop (shortcut)" Command="{Binding SendToDesktopCommand}"/>
                    <Expander Header="Compressed file" Margin="15,0,0,0">
                        <VerticalStackLayout Spacing="5">
                            <Button Text="Compress and email" Command="{Binding CompressAndEmailCommand}"/>
                            <Button Text="Compress to .7z" Command="{Binding CompressTo7zCommand}"/>
                            <Button Text="Compress to .zip" Command="{Binding CompressToZipCommand}"/>
                        </VerticalStackLayout>
                    </Expander>
                </VerticalStackLayout>
            </Expander>
            
            <!-- 分隔线 -->
            <BoxView HeightRequest="1" BackgroundColor="#E0E0E0" Margin="0,10"/>
            
            <!-- 导航项 -->
            <Button Text="MPC" Command="{Binding NavigateToMainPageCommand}" Margin="0,5"/>
            <Button Text="MPC - File Demo" Command="{Binding NavigateToFileDemoCommand}" Margin="0,5"/>
            <Button Text="File Open Test" Command="{Binding NavigateToTestViewCommand}" Margin="0,5"/>
            
            <BoxView HeightRequest="1" BackgroundColor="#E0E0E0" Margin="0,10"/>
            
            <Button Text="Settings" Command="{Binding NavigateToSettingsCommand}" Margin="0,5"/>
            <Button Text="About" Command="{Binding NavigateToAboutCommand}" Margin="0,5"/>
        </VerticalStackLayout>
    </Shell.FlyoutContent>

</Shell>

此方案需要在后台ViewModel中实现对应的导航和操作命令，完全自定义Flyout的布局和交互逻辑。

内容的提问来源于stack exchange，提问作者Jean-Marc Flamand