.NET MAUI中如何重新创建Shell Flyout项并设置汉堡图标位置？

方法一：自定义TitleView替换默认导航栏 #

这种方式直接隐藏默认导航栏，完全自定义顶部栏内容，灵活度最高：

1. 隐藏默认Shell导航栏
   在AppShell.xaml中设置NavBarIsVisible="False"：

<Shell
    x:Class="YourApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    NavBarIsVisible="False"
    FlyoutBehavior="Flyout">

2. 添加自定义顶部栏（含汉堡按钮）
   使用Shell.TitleView定义自定义顶部布局，替换默认导航内容：

<Shell.TitleView>
    <HorizontalLayout HorizontalOptions="Start" VerticalOptions="Center" Padding="10,0">
        <Button
            x:Name="HamburgerToggleBtn"
            ImageSource="hamburger_icon"
            BackgroundColor="Transparent"
            Clicked="HamburgerToggleBtn_Clicked"
            WidthRequest="40"
            HeightRequest="40"/>
        <!-- 可在此添加标题、其他操作按钮等 -->
    </HorizontalLayout>
</Shell.TitleView>

3. 绑定汉堡按钮点击事件
   在AppShell.xaml.cs中处理按钮点击，控制Flyout的显示/隐藏：

private void HamburgerToggleBtn_Clicked(object sender, EventArgs e)
{
    FlyoutIsPresented = !FlyoutIsPresented;
}

4. 适配Windows系统标题栏
   在App.xaml.cs的OnLaunched方法中，让应用内容延伸到系统标题栏区域，避免顶部留白：

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    base.OnLaunched(args);

    if (Application.Current.Windows.FirstOrDefault() is Window window)
    {
        var nativeWindow = window.Handler.PlatformView as Microsoft.UI.Xaml.Window;
        nativeWindow.ExtendsContentIntoTitleBar = true;
        // 设置空标题栏容器，让自定义内容覆盖系统标题栏区域
        nativeWindow.SetTitleBar(new Microsoft.UI.Xaml.Controls.Grid());
    }
}

方法二：通过自定义Shell渲染器修改默认工具栏 #

如果需要保留部分默认导航栏功能，可通过自定义Windows平台的Shell渲染器来移除多余元素、调整汉堡图标位置：

1. 创建自定义Shell渲染器
   在项目的Platforms/Windows文件夹下新建CustomShellRenderer.cs：

using Microsoft.Maui.Controls.Platform.Windows;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace YourApp.Platforms.Windows;

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
    {
        return new CustomToolbarAppearanceTracker();
    }
}

public class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker
{
    public void Dispose() { }

    public void ResetAppearance(ShellToolbar toolbar, IShellToolbarTracker toolbarTracker) { }

    public void SetAppearance(ShellToolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
    {
        // 移除默认多余元素（比如返回按钮）
        var unwantedItem = toolbar.ToolbarItems.FirstOrDefault(item => 
            item is FrameworkElement fe && fe.Name == "BackButton");
        if (unwantedItem != null)
        {
            toolbar.ToolbarItems.Remove(unwantedItem);
        }

        // 定位并调整汉堡图标位置
        var hamburgerBtn = toolbar.ToolbarItems.FirstOrDefault(item => 
            item is Button btn && btn.Icon is SymbolIcon si && si.Symbol == Symbol.Hamburger) as Button;
        if (hamburgerBtn != null)
        {
            // 通过Margin调整位置，示例为左移20px
            hamburgerBtn.Margin = new Thickness(20, 0, 0, 0);
            // 也可修改其他布局属性，比如对齐方式
        }
    }

    public void SetAppearance(ShellToolbarItem item, IShellToolbarTracker toolbarTracker, ShellAppearance appearance) { }
}

2. 注册自定义渲染器
   在Platforms/Windows/MauiProgram.cs中添加渲染器注册：

builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler(typeof(Shell), typeof(CustomShellRenderer));
});

注意事项 #

• 自定义汉堡图标时，需将图标文件放入Resources/Images目录，并设置生成操作为MauiImage
• 若使用方法一，需确保所有页面的顶部布局与自定义TitleView适配，避免内容被遮挡

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