MAUI 桌面端標題欄設定與視窗調整

本文由網友投稿。

作者：智州 Ryan

原文標題：MAUI 桌面端標題列設定與視窗調整

原文連結：https://blog.csdn.net/Sir_aligaduo/article/details/128880940

寫在前面

如果你現在開始學習並使用 MAUI 開發桌面端，那麼接下來的問題相信你都會遇到，並且會想嘗試找方法解決它。

問題

本人在使用目前 VS2022 最新版 17.4 Professional 版建立新的 MAUI APP 基於 .NET6.0 專案時，發現完全找不到跟 WPF 一樣的 WindowStyle 或 ResizeMode 這樣的屬性，有點強迫症，一定要把這個標題列去掉，想著應該不難，但是資料太少了，文件寫得也很亂，根本無法對應到這個。找著找著，加到了 Dotnet9 網站站長，在他耐心的幫忙下，我解決了這個問題，所以特別感謝 Dotnet9 網站站長 風中一匹狼！

MAUI 自帶的 Windows 下的視窗是這樣的（完全不在我審美上）：

解決方法

一開始，我是根據站長網站裡提供的方法，連結：Maui 學習之路(1)-Windows 表單設定 嘗試解決該問題。

雖然能正常根據裡面操作了，但是我在操作的時候可能是我操作的問題，老是實現不了，只把標題列跟下面的 content 融在一起，標題列還是在那，而且我不好改顏色。

加了站長微信，站長耐心地幫我找了大佬 Chister.Wu 的 Demo，對照他的 Demo 終於是把這個問題解決了，現在總結下去掉原始標題列的方法。

1. 完美去掉標題列，下面是程式碼，寫在 MauiProgram.cs 裡設定生命週期方法，具體的資料在上面的連結：Maui 學習之路(1)-Windows 表單設定 裡也有，但是看起來比較麻煩，直接看程式碼可能好理解一點：

var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>()
		.ConfigureFonts(fonts =>
		{
			fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
			fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
		})
		.ConfigureLifecycleEvents(events =>
         {

#if WINDOWS
        events.AddWindows(windows => windows
        .OnWindowCreated(window =>
                      {
                          //window.SizeChanged += OnSizeChanged;
                          MauiWinUIWindow mauiwin = window as MauiWinUIWindow;
                          if (mauiwin == null) { return; }

                          //關閉擴充內容
                          mauiwin.ExtendsContentIntoTitleBar = false;
                          mauiwin.Title = "Hello Maui";


                          //透過MAUI視窗句柄取得AppWindow
                          ///這裡有個麻煩的東西，我用最新版新建的專案無法直接getappwindow，所以用了文章裡的方法
                          var wndId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(mauiwin.WindowHandle);
                          Microsoft.UI.Windowing.AppWindow appwin = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(wndId);

                          //對於OverlappedPresenter的解釋文件在這個網址
                          //https://learn.microsoft.com/zh-tw/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.overlappedpresenter?view=windows-app-sdk-1.2

                          //大致就是OverlappedPresenter會設定這個視窗，這個視窗可以和其他視窗重疊，並對視窗標題列、狀態列、工作列進行設定，以及其他一些調整視窗的操作
                          var customOverlappedPresenter = Microsoft.UI.Windowing.OverlappedPresenter.CreateForContextMenu();
                          appwin.SetPresenter(customOverlappedPresenter);
                      }));
#endif
            });

        return builder.Build();

原理就是重寫建立視窗的方法，在這裡重寫有個好處，視窗載入之後會重新整理，我在 Mainpage.cs 下寫 Loaded 的方法的話雖然標題列的按鈕去掉了，但是標題列那塊並沒有去掉，把站長的文章和 Demo 給的結合起來才實現了這樣的效果。

效果圖如下，完美去掉了：

2. 直接在 MainPage 裡寫 Loaded 方法，這也是一開始我用的方法，程式碼如下：

private void ContentPage_Loaded(object sender, EventArgs e)
    {

#if WINDOWS
        var winuiWindow = Window.Handler?.PlatformView as  Microsoft.UI.Xaml.Window;
		MauiWinUIWindow maui = winuiWindow as MauiWinUIWindow;

        winuiWindow.ExtendsContentIntoTitleBar = false;
        if (winuiWindow is null)
            return;

		var wndId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(maui.WindowHandle);
        Microsoft.UI.Windowing.AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(wndId);
        //var appWindow = maui.GetAppWindow();
        if (appWindow is null)
            return;

        var customOverlappedPresenter =  Microsoft.UI.Windowing.OverlappedPresenter.CreateForContextMenu();
        appWindow.SetPresenter(customOverlappedPresenter);
#endif
    }

缺點就是她會有一個類似 WPF 的 captionheight 標題列那樣的東西，檢視未完全重新整理。

以上就是去標題列的方法，想要程式碼的可以去 Gitee 上自己下載，連結：maui-title-handle-demo。

另外對於後續視窗的大小調整，自訂放大縮小按鈕可以參考 MauiDemo，注意一定要看清楚自己的專案設定。

參考文章：

• Maui 學習之路(1)-Windows 表單設定

參考 Demo

MauiDemo