MAUI AppShell汉堡菜单按钮点击事件触发方案咨询

问题背景 #

需要在用户点击AppShell的汉堡菜单按钮（触发侧边栏展开的按钮）时执行自定义逻辑，尝试过使用Appearing事件，但该事件会在应用启动时就触发，不符合需求。

提供的AppShell XAML代码：

<Shell
    x:Class="NoaMobileApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:Usersviews="clr-namespace:NoaMobileApp.Pages.UsersPages.TransportBB_Pages.View"
    xmlns:iconFont="clr-namespace:NoaMobileApp.Helpers.IconFont"
    xmlns:localization="clr-namespace:NoaMobileApp.Extensions.Localization"
    xmlns:models="clr-namespace:NoaMobileApp.Pages.Main_Pages.ViewModel"
    xmlns:views="clr-namespace:NoaMobileApp.Pages.Main_Pages.View"
    x:DataType="models:AppShellViewModel"
    NavigationPage.HasBackButton="False"
    NavigationPage.HasNavigationBar="False"
    Shell.FlyoutBehavior="Flyout"
    Shell.NavBarIsVisible="False"
    Shell.TabBarIsVisible="False">

    <Shell.FlyoutHeader>
        <StackLayout Padding="20">
            <Image
                Aspect="Fill"
                HeightRequest="100"
                Source="source.svg" />
            <Label
                FontAttributes="Bold"
                FontSize="Header"
                Text="{localization:Translate Hello}" />
            <Label
                x:Name="UserIDLabel"
                FontAttributes="Bold"
                FontSize="Subtitle"
                Text="{Binding Name}" />
        </StackLayout>
    </Shell.FlyoutHeader>

    <ShellContent
        Title="LoadingPage"
        ContentTemplate="{DataTemplate views:LoadingPage}"
        FlyoutItemIsVisible="False"
        NavigationPage.HasNavigationBar="False"
        Route="LoadingPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.NavBarIsVisible="False" />
</Shell>

对应的ViewModel代码：

public partial class AppShellViewModel : ObservableObject
{
    [ObservableProperty]
    public string name = string.Empty;

    [RelayCommand]
    async void SignOut()
    {
        SecureStorage.Default.Remove("_authentificationToken");
        await AppShell.Current.GoToAsync($"//{nameof(LoginPage)}");
    }
}

解决方案 #

方法1：使用Shell的FlyoutOpening事件 #

MAUI Shell原生提供了FlyoutOpening事件，该事件仅在用户点击汉堡按钮展开侧边栏时触发，完全匹配需求：

1. 在AppShell的XAML中绑定事件：

<Shell
    ...
    FlyoutOpening="OnFlyoutOpening">

2. 在代码后台实现事件处理逻辑：

private void OnFlyoutOpening(object sender, EventArgs e)
{
    // 此处添加你需要触发的自定义逻辑
    if (BindingContext is AppShellViewModel vm)
    {
        // 可调用ViewModel中的方法或属性，例如：
        // vm.UpdateUserData();
    }
}

方法2：监听FlyoutIsVisible属性变化 #

通过监听Shell的FlyoutIsVisible属性变化，判断是否是从隐藏切换到显示的状态（对应汉堡按钮点击动作）：

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        BindingContext = new AppShellViewModel();
        PropertyChanged += AppShell_PropertyChanged;
    }

    private void AppShell_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(FlyoutIsVisible) && FlyoutIsVisible)
        {
            // 仅在Flyout展开时执行逻辑
            // 自定义代码写在这里
        }
    }
}

方法3：自定义汉堡按钮 #

如果需要完全自定义按钮样式，可替换默认汉堡按钮为自定义控件并绑定命令：

1. 在AppShell的XAML中添加自定义标题栏按钮：

<Shell.TitleView>
    <Button 
        Text="☰" 
        FontSize="Large"
        Command="{Binding HamburgerClickedCommand}" />
</Shell.TitleView>

2. 在ViewModel中添加对应命令：

public partial class AppShellViewModel : ObservableObject
{
    // 原有属性和命令不变

    [RelayCommand]
    void HamburgerClicked()
    {
        // 切换Flyout显示状态
        AppShell.Current.FlyoutIsVisible = !AppShell.Current.FlyoutIsVisible;
        // 此处添加自定义逻辑
    }
}

内容的提问来源于stack exchange，提问作者Alexandre S.