.NET MAUI Blazor Hybrid应用标题栏定制方法求助

针对你的需求，以下是分步实现方案，重点覆盖Windows平台（因为最小化/最大化/关闭按钮是桌面端特性）：

一、修改默认标题栏按钮样式 #

要完全自定义标题栏按钮的外观，需要隐藏系统默认按钮，自行实现按钮UI和窗口控制逻辑：

1. 定义窗口控制服务 #

先创建跨平台接口，用于封装窗口操作：

public interface IWindowService
{
    void MinimizeWindow();
    void ToggleMaximizeWindow();
    void CloseWindow();
    bool IsWindowMaximized();
}

在Windows平台实现该服务（Platforms/Windows/WindowService.cs）：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Windowing;

namespace YourAppNamespace.Platforms.Windows;

public class WindowService : IWindowService
{
    public void MinimizeWindow()
    {
        var appWindow = Window.Current.AppWindow;
        appWindow.Presenter.Minimize();
    }

    public void ToggleMaximizeWindow()
    {
        if (Window.Current.AppWindow.Presenter is OverlappedPresenter presenter)
        {
            if (presenter.State == OverlappedPresenterState.Maximized)
                presenter.Restore();
            else
                presenter.Maximize();
        }
    }

    public void CloseWindow() => Window.Current.Close();

    public bool IsWindowMaximized()
    {
        if (Window.Current.AppWindow.Presenter is OverlappedPresenter presenter)
        {
            return presenter.State == OverlappedPresenterState.Maximized;
        }
        return false;
    }
}

在MauiProgram.cs中注册服务：

builder.Services.AddSingleton<IWindowService, Platforms.Windows.WindowService>();

2. 隐藏系统默认标题栏 #

修改Platforms/Windows/App.xaml.cs的OnLaunched方法：

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    base.OnLaunched(args);
    var appWindow = Microsoft.UI.Xaml.Window.Current.AppWindow;
    appWindow.TitleBar.IsVisible = false; // 隐藏系统标题栏
}

3. 实现自定义标题栏UI #

在Blazor主布局（如MainLayout.razor）中添加自定义标题栏：

<div class="custom-title-bar">
    <span class="app-title">你的应用名称</span>
    
    <!-- 自定义控件区域 -->
    <div class="custom-controls">
        <!-- 这里后续添加自定义按钮/菜单 -->
    </div>

    <!-- 自定义窗口控制按钮 -->
    <div class="window-controls">
        <button @onclick="() => _windowService.MinimizeWindow()" class="control-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M4 15h16v-2H4v2z"/>
            </svg>
        </button>
        <button @onclick="ToggleMaximize" class="control-btn">
            @if (_isMaximized)
            {
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 21h-6v-6"/><path d="M3 3h6v6"/>
                </svg>
            }
            else
            {
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="18" height="18" rx="2"/>
                </svg>
            }
        </button>
        <button @onclick="() => _windowService.CloseWindow()" class="control-btn close-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
        </button>
    </div>
</div>

@code {
    [Inject] private IWindowService _windowService { get; set; } = default!;
    private bool _isMaximized;

    protected override void OnInitialized()
    {
        _isMaximized = _windowService.IsWindowMaximized();
    }

    private void ToggleMaximize()
    {
        _windowService.ToggleMaximizeWindow();
        _isMaximized = !_isMaximized;
    }
}

4. 添加标题栏样式 #

在wwwroot/css/app.css中添加样式：

.custom-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    background-color: #f8f9fa;
    padding: 0 8px;
    -webkit-app-region: drag; /* 允许拖动标题栏 */
    border-bottom: 1px solid #e9ecef;
}

.app-title {
    font-size: 14px;
    color: #343a40;
}

.window-controls {
    display: flex;
    gap: 0;
    -webkit-app-region: no-drag; /* 按钮区域禁止拖动，保证点击有效 */
}

.control-btn {
    width: 46px;
    height: 32px;
    border: none;
    background: transparent;
    color: #343a40;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    background-color: rgba(0,0,0,0.05);
}

.close-btn:hover {
    background-color: #dc3545;
    color: white;
}

二、添加自定义控件（按钮、下拉菜单） #

直接在custom-controls区域添加所需控件即可，以下是示例：

1. 添加自定义按钮和下拉菜单 #

修改MainLayout.razor的custom-controls部分：

<div class="custom-controls">
    <button class="action-btn" @onclick="HandleCustomAction">操作按钮</button>
    
    <div class="dropdown">
        <button class="dropdown-trigger">菜单 ▼</button>
        <div class="dropdown-menu">
            <a @onclick="() => HandleMenuOption(1)" class="dropdown-item">选项1</a>
            <a @onclick="() => HandleMenuOption(2)" class="dropdown-item">选项2</a>
            <a @onclick="() => HandleMenuOption(3)" class="dropdown-item">选项3</a>
        </div>
    </div>
</div>

@code {
    private void HandleCustomAction()
    {
        // 自定义按钮逻辑
    }

    private void HandleMenuOption(int option)
    {
        // 下拉菜单选项逻辑
    }
}

2. 添加自定义控件样式 #

在app.css中补充样式：

.custom-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    -webkit-app-region: no-drag;
}

.action-btn {
    padding: 4px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    cursor: pointer;
}

.action-btn:hover {
    background-color: #e9ecef;
}

.dropdown {
    position: relative;
}

.dropdown-trigger {
    padding: 4px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 8px 12px;
    color: #343a40;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

注意事项 #

• 移动端（Android/iOS）无桌面端标题栏概念，如需定制导航栏，可使用MAUI的NavigationPage自定义导航栏样式。
• MacOS平台的标题栏逻辑类似，可通过Platforms/MacOS下的代码获取窗口对象进行修改。

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