如何调整.NET MAUI桌面端Flyout Menu按钮的位置

针对.NET MAUI桌面端（Windows、Mac Catalyst）调整Flyout Menu按钮位置，可通过平台特定Handler自定义或自定义TitleView两种方式实现，以下是具体方案：

一、平台特定Handler自定义（推荐） #

Windows平台 #

在项目的Platforms/Windows/App.xaml.cs中添加Shell Handler的自定义逻辑，将Flyout按钮从标题栏左侧移至右侧：

using Microsoft.Maui.Handlers;
using Microsoft.UI.Xaml.Controls;

namespace YourAppName.Platforms.Windows;

public static class ShellCustomization
{
    public static void Initialize()
    {
        ShellHandler.Mapper.AppendToMapping("FlyoutButtonPosition", (handler, view) =>
        {
            if (handler.PlatformView is MauiShell mauiShell)
            {
                var titleBar = mauiShell.TitleBar;
                if (titleBar == null) return;

                // 查找Flyout按钮
                var flyoutButton = titleBar.FindDescendant<Button>();
                if (flyoutButton == null) return;

                // 获取标题栏左右两侧的容器
                var leftPanel = titleBar.FindDescendant<StackPanel>(p => 
                    p.Orientation == Orientation.Horizontal && p.Children.Contains(flyoutButton));
                var rightPanel = titleBar.FindDescendant<StackPanel>(p => 
                    p.Orientation == Orientation.Horizontal && !p.Children.Contains(flyoutButton));

                if (leftPanel != null && rightPanel != null)
                {
                    leftPanel.Children.Remove(flyoutButton);
                    rightPanel.Children.Insert(0, flyoutButton);
                }
            }
        });
    }
}

然后在App.xaml.cs的OnLaunched方法中调用ShellCustomization.Initialize();。

Mac Catalyst平台 #

在项目的Platforms/MacCatalyst/AppDelegate.cs中添加Shell Handler自定义，修改ToolbarItem的位置：

using Microsoft.Maui.Handlers;
using UIKit;

namespace YourAppName.Platforms.MacCatalyst;

public static class ShellCustomization
{
    public static void Initialize()
    {
        ShellHandler.Mapper.AppendToMapping("FlyoutButtonPosition", (handler, view) =>
        {
            if (handler.PlatformView is MauiNSWindow window)
            {
                var toolbar = window.Toolbar;
                if (toolbar == null) return;

                // 查找Flyout对应的ToolbarItem
                var flyoutItem = toolbar.Items.FirstOrDefault(item => item.Identifier == "Flyout");
                if (flyoutItem != null)
                {
                    // 将按钮位置设为右侧
                    flyoutItem.Position = NSToolbarItemPosition.Right;
                }
            }
        });
    }
}

同样在AppDelegate.cs的FinishedLaunching方法中调用ShellCustomization.Initialize();。

二、自定义TitleView（更灵活） #

如果需要完全自定义导航栏布局，可通过Shell.TitleView替换默认标题栏，自行控制Flyout按钮位置：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="YourAppName.AppShell"
       FlyoutIcon="transparent"> <!-- 隐藏默认Flyout按钮 -->

    <Shell.TitleView>
        <HorizontalLayout HorizontalOptions="FillAndExpand">
            <!-- 左侧自定义内容 -->
            <Label Text="我的应用" FontSize="Large" HorizontalOptions="Start" />
            
            <!-- 右侧放置自定义Flyout按钮 -->
            <Button IconImageSource="hamburger_icon.png"
                    Command="{Binding Source={x:Reference this}, Path=ToggleFlyoutCommand}"
                    HorizontalOptions="End" />
        </HorizontalLayout>
    </Shell.TitleView>

    <!-- 你的Shell内容 -->
    <FlyoutItem Title="首页">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>

</Shell>

然后在AppShell.xaml.cs中添加切换Flyout的命令：

using Microsoft.Maui.Controls;

namespace YourAppName;

public partial class AppShell : Shell
{
    public ICommand ToggleFlyoutCommand => new Command(() =>
    {
        FlyoutIsPresented = !FlyoutIsPresented;
    });

    public AppShell()
    {
        InitializeComponent();
    }
}

注意事项 #

• 平台特定代码需放在对应平台的项目文件夹下，或使用条件编译（如#if WINDOWS）区分不同平台逻辑。
• 使用Handler方式时，需确保MAUI版本支持相关API（建议使用.NET 7及以上版本）。
• 自定义TitleView时，需准备适配不同桌面平台的图标资源。

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