MAUI desktop title bar settings and window adjustments

This article was submitted by netizens.

Author: Zhizhou Ryan

Original title: MAUI desktop title bar settings and window adjustments

Original link: https://www.example.com

written in front

If you start to learn and use MAUI to develop the desktop now, I believe you will encounter the next problems and will try to find a way to solve them.

problem

本人在使用目前 VS2022 最新版 17.4 Professional 版创建新的 MAUI APP 基于.NET6.0 项目时，发现完全找不到跟 wpf 一样的WindowStyle或者ResizeMode这样的属性，有点强迫症，一定要把这个标题栏去掉，想着应该不难，但是资料太少了，文档写的也很乱，根本无法对应到这个，找着找着，加到了Dotnet9 网站站长，在他耐心的帮忙下，我解决了这个问题，所以特别感谢Dotnet9 网站站长风中一匹狼！

The windows under maui's own windows look like this (not in my aesthetic at all):

solution

一开始，我是根据站长网站里提供的方法，链接: Maui 学习之路(1)-Windows 窗体设置尝试解决该问题。

Although I can operate according to the inside normally, it may be a problem with my operation when I operate, so I always can't realize it. I just mix the title bar with the content below. The title bar is still there, and I can't change the color.

With the addition of the webmaster WeChat, the webmaster patiently helped me find a demo from the boss Chister.Wu. After comparing it with his demo, I finally solved this problem. Now I will summarize the methods to remove the original title bar.

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();

The principle is to rewrite the method of creating a window. There is an advantage to rewriting here. The window will be refreshed after it is loaded. If I wrote the Loaded method under Mainpage.cs, although the button in the title bar was removed, the section in the title bar was not removed. This effect was achieved by combining the webmaster's article with the one given by the demo.

The renderings are as follows, perfectly removed:

2. Write the Loaded method directly in MainPage, which was also the method I used at the beginning. 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 she will have something like WPF's captionheight title bar, and the view is not completely refreshed.

以上就是去标题栏的方法，想要代码的可以去 gitee 上自己下载，链接: maui-title-handle-demo。

另外对于后续窗口的大小调整，自定义放大缩小按钮可以参考MauiDemo，注意一定要看清自己的项目配置。

• • Reference article: **

• Maui 学习之路(1)-Windows 窗体设置

• • Refer to demo **

MauiDemo