MAUI Desktop Title Bar Settings and Window Adjustment

This article is contributed by a reader.

Author: Zhi Zhou Ryan

Original title: MAUI Desktop Title Bar Settings and Window Adjustment

Original link: https://blog.csdn.net/Sir_aligaduo/article/details/128880940

Foreword

If you are now learning and using MAUI for desktop development, you will definitely encounter the following problems and will try to find solutions.

Problem

When I created a new MAUI APP project based on .NET6.0 using the latest VS2022 17.4 Professional edition, I found that I could not find properties like WindowStyle or ResizeMode that are available in WPF. I'm a bit obsessive-compulsive and really want to remove the title bar. I thought it wouldn't be hard, but there is very little information available, and the documentation is messy, making it impossible to find what I needed. While searching, I contacted the owner of Dotnet9 website. With his patient help, I solved the problem. So special thanks to Dotnet9 website owner (Feng Zhong Yi Pi Lang)!

The default MAUI window on Windows looks like this (not my taste at all):

Solution

At first, I tried to solve the problem using the method provided on the owner's website: Maui Learning Path (1) - Windows Form Settings.

Although I could follow the steps, maybe it was my operation issue, I couldn't achieve the desired effect. The title bar and the content below merged together, but the title bar was still there, and I couldn't easily change its color.

I added the owner's WeChat, and he patiently helped me find the demo from the expert Chister.Wu. After comparing with his demo, I finally solved the problem. Here is a summary of the method to remove the original title bar.

1. Perfectly remove the title bar. Below is the code, written in MauiProgram.cs to configure the lifecycle method. Specific information is also available in the link above: Maui Learning Path (1) - Windows Form Settings, but it looks more complicated. Directly reading the code might be easier to understand:

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; }

                          // Disable extended content into title bar
                          mauiwin.ExtendsContentIntoTitleBar = false;
                          mauiwin.Title = "Hello Maui";


                          // Obtain AppWindow through the MAUI window handle
                          /// There is an annoying thing: with the newest version of the project, I cannot directly get the appwindow, so I used the method from the article
                          var wndId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(mauiwin.WindowHandle);
                          Microsoft.UI.Windowing.AppWindow appwin = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(wndId);

                          // Explanation of OverlappedPresenter is at this URL
                          // https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.overlappedpresenter?view=windows-app-sdk-1.2

                          // Basically, OverlappedPresenter sets the window so it can overlap with other windows,
                          // and configures the title bar, status bar, taskbar, and other window adjustments
                          var customOverlappedPresenter = Microsoft.UI.Windowing.OverlappedPresenter.CreateForContextMenu();
                          appwin.SetPresenter(customOverlappedPresenter);
                      }));
#endif
            });

        return builder.Build();

The principle is to override the window creation method. The advantage of doing it here is that the window will be refreshed after loading. If I wrote the Loaded method in MainPage.xaml.cs, the title bar buttons would be removed, but the title bar area itself would not disappear. By combining the owner's article and the demo, this effect was achieved.

The result is shown below, perfectly removed:

2. Directly write the Loaded method in MainPage. This was the method I used initially. The code is as follows:

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
    }

The downside is that there is still something like a caption height (similar to WPF's captionheight) left, meaning the view is not completely refreshed.

The above is the method for removing the title bar. If you want the code, you can download it from gitee: maui-title-handle-demo.

Additionally, for subsequent window resize adjustments and custom maximize/minimize buttons, you can refer to MauiDemo. Make sure to check your project configuration.

Reference article:

• Maui Learning Path (1) - Windows Form Settings

Reference demo

MauiDemo