MAUIデスクトップのタイトルバー設定とウィンドウ調整

本記事は読者からの投稿です。

著者：智州 Ryan

原著タイトル：MAUI デスクトップのタイトルバー設定とウィンドウ調整

原著リンク：https://blog.csdn.net/Sir_aligaduo/article/details/128880940

はじめに

これから MAUI を学習し、デスクトップアプリ開発を始めるなら、以下の問題に必ず遭遇し、その解決方法を探そうとするでしょう。

問題

現在 VS2022 最新版 17.4 Professional で .NET6.0 ベースの新しい MAUI APP プロジェクトを作成した際、WPF にあるような WindowStyle や ResizeMode といったプロパティが全く見つかりませんでした。少し完璧主義なところがあり、どうしてもこのタイトルバーを消したかったのですが、難しいことではないだろうと思いつつ、情報が少なく、ドキュメントも整理されておらず、対応関係が全く分かりませんでした。探しているうちに Dotnet9 サイト管理者 にたどり着き、彼の親切な助けによりこの問題を解決できました。この場を借りて Dotnet9 サイト管理者 の「風中の一匹狼」さんに深く感謝いたします！

maui 標準の Windows でのウィンドウはこんな感じです（私の美的感覚には全く合いません）：

解決方法

最初は、管理者のサイトで紹介されていた方法（リンク：Maui 学習之路(1)-Windows フォーム設定）で問題を解決しようとしました。

指示通りに操作できたものの、私の操作ミスかもしれませんが、うまくいかず、タイトルバーとコンテンツが融合するだけで、タイトルバーはそのまま残り、色も変更できませんでした。

管理者に微信で連絡し、親切にも Chister.Wu 氏のデモを紹介してもらい、そのデモを参考にしてようやく問題を解決しました。ここで元のタイトルバーを除去する方法をまとめます。

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の説明は以下のURLを参照
                          //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 メソッドを書くと、タイトルバーのボタンは消えてもタイトルバー領域が残ってしまいましたが、管理者の記事とデモを組み合わせることでこの効果が得られました。

効果画像は以下の通り。完全に除去できました。

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 フォーム設定

参考デモ

MauiDemo