.NET Maui Android平台Flyout菜单About页导航栏自定义

针对带有Home和About页面的Flyout菜单应用，要实现About页面导航栏的以下需求：

• 移除汉堡图标，替换为返回箭头
• 移除页面标题
• 点击返回箭头回到Home页面

之前单独使用BackButtonBehavior未达成效果，最终通过组合配置Shell.TitleView与Shell.BackButtonBehavior解决，具体实现如下：

1. 配置About页面的XAML属性 #

在About页面的XAML中，设置隐藏默认标题、启用自定义返回按钮行为：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.Views.AboutPage"
             Shell.NavBarIsVisible="True"
             <!-- 移除页面标题 -->
             Shell.TitleView="{x:Null}"
             <!-- 绑定自定义返回按钮行为 -->
             Shell.BackButtonBehavior="{StaticResource CustomBackButtonBehavior}">

    <!-- 页面内容区域 -->
    <StackLayout Padding="20">
        <Label Text="About Page Content" FontSize="Large" />
    </StackLayout>
</ContentPage>

2. 定义自定义返回按钮行为 #

在AppShell.xaml的资源字典中，定义BackButtonBehavior，指定返回图标与触发命令：

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

    <Shell.Resources>
        <ResourceDictionary>
            <BackButtonBehavior x:Key="CustomBackButtonBehavior"
                                <!-- 使用系统默认返回箭头图标，也可替换为自定义图标路径 -->
                                IconOverride="arrow_back"
                                IsEnabled="True"
                                Command="{Binding GoBackCommand}" />
        </ResourceDictionary>
    </Shell.Resources>

    <!-- Flyout菜单路由配置 -->
    <FlyoutItem Title="Menu">
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:HomePage}" Route="Home" />
        <ShellContent Title="About" ContentTemplate="{DataTemplate local:AboutPage}" Route="About" />
    </FlyoutItem>
</Shell>

3. 实现返回命令逻辑 #

在About页面的ViewModel中，编写返回Home页面的命令：

using Microsoft.Maui.Controls;
using System.Windows.Input;

namespace YourAppNamespace.ViewModels
{
    public class AboutViewModel
    {
        public ICommand GoBackCommand => new Command(async () =>
        {
            // 通过Shell路由导航回Home页面
            await Shell.Current.GoToAsync("//Home");
        });
    }
}

别忘了在About页面的XAML中绑定ViewModel：

<ContentPage.BindingContext>
    <local:AboutViewModel />
</ContentPage.BindingContext>

关键说明 #

单独使用BackButtonBehavior无效的原因是：Flyout菜单模式下的页面默认显示汉堡图标，需要通过Shell.TitleView="{x:Null}"移除默认标题栏的标题与汉堡图标占位，再通过自定义BackButtonBehavior替换为返回箭头并绑定返回逻辑。

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