net maui 9.0 AppShell.xaml 实现多级飞出菜单办法

Question

net maui 9.0 AppShell.xaml 实现多级飞出菜单办法

张中伟 80

我的功能流程是登陆窗口wlogin.xaml成功后，跳转到AppShell.xaml.用飞出菜单实现多页面切换。

因为无法实现类似WINFORM的多级菜单效果。只有CONTENTPAGE才可以实现菜单的功能。所以想实现右键菜单来代替。如何弹出，点左键弹出不了。有类似的解决方案也行。 <Shell.FlyoutFooter>

 <Button Text="详细菜单" HorizontalOptions="Center" Clicked="Button_Clicked">

     <Button.Resources>

         <MenuFlyout x:Name="mf1" x:Key="MainMenu">

             <MenuFlyoutSubItem Text="编辑">

                 <MenuFlyoutItem Text="复制" />

                 <MenuFlyoutItem Text="剪切" />

                 <MenuFlyoutSeparator/>

                 <MenuFlyoutItem Text="删除" />

             </MenuFlyoutSubItem>

             <MenuFlyoutItem Text="退出" />

         </MenuFlyout>

     </Button.Resources>

 </Button>
``` </Shell.FlyoutFooter>      private void Button_Clicked(object sender, EventArgs e)

{

  Button MyBtn = (Button)sender;

  if (MyBtn != null)

  {

      MenuFlyout MyMF = (MenuFlyout)MyBtn.Resources["MainMenu"];

      if (MyMF != null)

      {

          FlyoutBase.SetContextFlyout(MyBtn, MyMF);

        //这里如何弹出

      }

  }

}

2 个答案

你的答案

Answer 1

匿名

您好,

因为无法实现类似WINFORM的多级菜单效果。只有CONTENTPAGE才可以实现菜单的功能。所以想实现右键菜单来代替。如何弹出，点左键弹出不了。

您应该把 <Button.Resources> 改成 <FlyoutBase.ContextFlyout> 如下代码，当你右击Button, 就可以看到显示上下文菜单

<Shell.FlyoutFooter>
    <Button Text="详细菜单" HorizontalOptions="Center" Clicked="Button_Clicked">
       <FlyoutBase.ContextFlyout>
           <MenuFlyout x:Name="mf1" >
 
                 <MenuFlyoutSubItem Text="编辑" Clicked="MenuFlyoutSubItem_Clicked">
 
                     <MenuFlyoutItem Text="复制" Clicked="MenuFlyoutItem_Clicked" />
 
                     <MenuFlyoutItem Text="剪切" />
 
                     <MenuFlyoutSeparator/>
 
                     <MenuFlyoutItem Text="删除" />
 
                 </MenuFlyoutSubItem>
 
                 <MenuFlyoutItem Text="退出" />
 
             </MenuFlyout>
        </FlyoutBase.ContextFlyout>
     </Button>
</Shell.FlyoutFooter>

这里还有一篇文档：在 .NET MAUI 桌面应用中显示上下文菜单

如果答案是正确的，请点击“接受答案”并点赞。如果您对此答案还有其他疑问，请点击“评论”。

注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知此线程的通知。

张中伟 80

通过你的代码可以右键弹出菜单，我是想单击事件弹出菜单，这个CS代码怎么写，最可以指定弹出的方向。让用户体验是点击弹出的菜单不是右键才弹出的。 <Shell.FlyoutFooter>

 <HorizontalStackLayout HorizontalOptions="Center">

     <Button x:Name="btnMenu" Text="主菜单" WidthRequest="100">

         <FlyoutBase.ContextFlyout>

             <MenuFlyout x:Name="mf1" >

                 <MenuFlyoutSubItem Text="编辑">

                     <MenuFlyoutItem Text="复制"/>

                     <MenuFlyoutItem Text="剪切"/>

                     <MenuFlyoutSeparator/>

                     <MenuFlyoutItem Text="删除"/>

                 </MenuFlyoutSubItem>

                 <MenuFlyoutItem Text="退出" />

             </MenuFlyout>

         </FlyoutBase.ContextFlyout>

     </Button>

 </HorizontalStackLayout>

</Shell.FlyoutFooter>

匿名

2025-03-05T09:40:05.7+00:00

没有对应的方法去鼠标左键去触发MenuFlyout。我觉得可以通过popup 控件，或者创建一个ContentView(放入Button 和其他菜单中的条目IsVisable 设置成False), 一开始只显示一个Button, 点击button，把其他条目的IsVisable 设置成true. 我尝试使用popup 控件去实现，但是弹出popup 背景会有一层白色的蒙板，我正在寻找办法把popup背景设置成透明

Answer 2

接上面，我回复的内容怎么不见了。我要达到的效果是左键点击，指定位置弹出菜单，指定弹出方向。不是右键才弹出。 <Shell.FlyoutFooter>

 <HorizontalStackLayout HorizontalOptions="Center">

     <Button x:Name="btnMenu" Text="主菜单" WidthRequest="100">

         <FlyoutBase.ContextFlyout>

             <MenuFlyout x:Name="mf1" >

                 <MenuFlyoutSubItem Text="编辑">

                     <MenuFlyoutItem Text="复制"/>

                     <MenuFlyoutItem Text="剪切"/>

                     <MenuFlyoutSeparator/>

                     <MenuFlyoutItem Text="删除"/>

                 </MenuFlyoutSubItem>

                 <MenuFlyoutItem Text="退出" />

             </MenuFlyout>

         </FlyoutBase.ContextFlyout>

     </Button>

 </HorizontalStackLayout>
``` </Shell.FlyoutFooter>