.NET Maui 如何在涉及图标的弹出菜单中执行非常具体的操作

Question

抱歉标题不好...我想不出一种方法可以用一句话来解释我想要做的事情。另请注意，该平台是完全Android（我认为这并不重要，但我可能是错的）。

这在视觉上更容易解释。接下来的三张图片是两页的：

1. Home

   页面。请注意弹出菜单汉堡包。
飞出弹出菜单后的

2. Home

   页面。

3. About

   页。

当前弹出菜单的描述
我有一个弹出菜单。目前菜单上有两个页面，

Home

和

About

。从

Home

页面来看，目前的样子是这样的：

然后我打开弹出菜单：

点击

About

页面，我们会进入...

About

页面，如下所示：

我想改变什么
我要改的东西都在

About

页面上。我愿意：

• 删除汉堡图标并将其更换为其他东西（“后退”按钮）
• 删除标题，这样导航栏上唯一的就是新图标（这很简单）
• 更改按下汉堡图标更改为后退按钮图标时发生的行为...而不是飞出菜单，让它返回到

  Home

  页面。

这就是我想要的样子：

当前代码
我将展示以下代码：

• AppShell.xaml

  ，我在其中输入了

  Home

  和

  About

  页面
的代码

• AboutPage.xaml

  ，现在不感兴趣，但可能是我需要添加代码的地方。

• AboutPageViewModel.cs

  ，我在其中添加了与按弹出菜单中的“后退”箭头的操作相对应的方法（我不确定这是添加此代码的正确位置）。

请注意，我对毛伊岛相对缺乏经验，因此我很可能错误地处理了所有内容 - 例如，也许所有

Shell

属性都应该在页面各自的 xaml 文件中设置，而不是在

AppShell.xaml 中设置

？

这些问题的答案是我刚刚编造的。不管怎样，这是我开始尝试各种东西来实现我的目标之前的状态代码。

AppShell.xaml

Home

页面的 xml：

    <FlyoutItem x:Name="HomePage"
                FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Home"
                      ContentTemplate="{DataTemplate view:HomePage}"
                      FlyoutItemIsVisible="True"
                      Icon="home.png"
                      Route="HomePage"
                      Shell.BackgroundColor="#2e3292"
                      Shell.ForegroundColor="White"
                      Shell.NavBarIsVisible="True"
                      Shell.TitleColor="White" />
    </FlyoutItem>

AppShell.xaml，

About

页面的代码：

    <FlyoutItem x:Name="FlyoutMenuItems"
                FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="About"
                      ContentTemplate="{DataTemplate view:AboutPage}"
                      FlyoutItemIsVisible="True"
                      Icon="about.png"
                      Route="AboutPage"
                      Shell.BackgroundColor="#2e3292"
                      Shell.NavBarIsVisible="True"
                      Shell.TitleColor="GhostWhite"/>
    </FlyoutItem>

AboutPage.xaml，到目前为止还没有太多内容：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="SandboxProject.View.AboutPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodel="clr-namespace:SandboxProject.ViewModel">

    <StackLayout Padding="10">
        <Label Margin="10,80,0,0"
            FontAttributes="Bold"
            FontSize="Large"
            Text="About WHAT?!?" />
    </StackLayout>
</ContentPage>

AboutPageViewModel.cs，完全是空的：

namespace SandboxProject.ViewModel;
public partial class AboutPageViewModel : ObservableObject{}

我尝试了什么？
相当多。我将给出最有意义的例子......

我很确定我需要使用

BackButtonBehavior

（转到this页面的底部阅读它），但我没有正确使用它。

这是我对

About

中的

ApShell.xaml

页面代码所做的更改...我将 FlyoutIcon 的图标设置为“关于”图标（你知道，“i”字符），然后我设置了图标页面本身的图标是向左箭头。我删除了标题。

    <FlyoutItem x:Name="FlyoutMenuItems"
                FlyoutDisplayOptions="AsMultipleItems"
                FlyoutIcon="about.png">
        <ShellContent ContentTemplate="{DataTemplate view:AboutPage}"
                      FlyoutItemIsVisible="True"
                      Route="AboutPage"
                      Icon="leftarrow.png"
                      Shell.BackgroundColor="#2e3292"
                      Shell.NavBarIsVisible="True"/>
    </FlyoutItem>

我将这些代码行添加到

AboutPage.xaml

。这应该将图标绑定到命令Back:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    ...>

    <Shell.BackButtonBehavior>
        <BackButtonBehavior Command="{Binding BackCommand}" />
    </Shell.BackButtonBehavior>

    <StackLayout>
        <Label... />
    </StackLayout>
</ContentPage>

这是

AboutPageViewModel.cs

、

Back

中的命令，当用户单击向左箭头图标时应触发该命令：

namespace SandboxProject.ViewModel;
public partial class AboutPageViewModel : ObservableObject
{
    [RelayCommand]
    private async Task Back() =>
        await Shell.Current.GoToAsync($"//{nameof(HomePage)}");
}

这不起作用。

About

页面导航栏为空。 “关于”字符串消失了，这是我想要的，但没有图标，没有什么可按的。

如果有人可以教我，我将不胜感激。

Answer 1

要删除弹出图标：

AboutPage xaml 上的 Shell.FlyoutBehavior="Disabled"

用于删除标题栏和默认后退按钮

Shell.NavBarIsVisible="False"

现在您可以使用 Shell.TitleView 拥有自己的后退按钮和标题（如果需要）并挂钩后退按钮以转到主页

https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/pages?view=net-maui-8.0#display-views-in-the-navigation-bar