MAUI how to remove the Title Bar and fix the window size?

user_15450842 0
Viewed 3546

How can I remove the Title Bar in MAUI and fix the window size as 800x400 pixels in the Windows version of the application?

TitleBar full size

I searched for a very long time in the Internet, but I found already not actual information for later versions of MAUI released more than a year ago. Why MAUI does not support window resizing and disabling its scaling as conditional WPF, it also uses XAML for window creation, I wish there was such a possibility on the release.

The Title Bar looks broken because it is taller than the close/collapse/maximize buttons.

.net-6.0 maui winui-3 c#
3 Answers

When do title is empty then no show upper bar. Like this:

Title=""

Like this:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Chatfri.Pages.Settings"
             Title="">
    <StackLayout>
        <Label Text="Welcome to Settings!"
                VerticalOptions="Center" 
                HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

if you use shell you can use Shell.NavBarIsVisible="False".

<Shell
    x:Class="Chatfri.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Chatfri"
    xmlns:loc="clr-namespace:Chatfri.Pages"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="False">

    <TabBar>
        <Tab Icon="home" Title="Home">
            <ShellContent
        
        ContentTemplate="{DataTemplate loc:Home}"
        Route="Home" />
        </Tab>
        <Tab Icon="messages" Title="Messages">
            <ShellContent
        
        ContentTemplate="{DataTemplate loc:Messages}"
        Route="Messages" />
        </Tab>
        <Tab Icon="settings" Title="Settings">
            <ShellContent
        
        ContentTemplate="{DataTemplate loc:Settings}"
        Route="Settings" />
        </Tab>
    </TabBar>

</Shell>
user_45784500

This a known bug and a PR is open for it right now, when merged it will be fixed.

user_15063870

You can read the documentation SetBorderAndTitleBar and Resize:

SetBorderAndTitleBar(Boolean, Boolean) Sets the border and title bar properties of the window.

Resize(SizeInt32) Resizes the window to the specified size.

Your MauiProgram.cs should look like this

    using Microsoft.Maui.LifecycleEvents;
    #if WINDOWS
    using Microsoft.UI;
    using Microsoft.UI.Windowing;
    using Windows.Graphics;
    #endif
    
    namespace YourNameSpace
    {
        public static class MauiProgram
        {
            
            public static MauiApp CreateMauiApp()
            {
                var builder = MauiApp.CreateBuilder();
                builder
                    .UseMauiApp<App>()
                    .ConfigureFonts(fonts =>
                    {
                        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    });
    #if WINDOWS
            builder.ConfigureLifecycleEvents(events =>
            {
                events.AddWindows(wndLifeCycleBuilder =>
                {
                    wndLifeCycleBuilder.OnWindowCreated(window =>
                    {
                        window.ExtendsContentIntoTitleBar = false; /*This is important to prevent your app content extends into the title bar area.*/
                        IntPtr nativeWindowHandle = WinRT.Interop.WindowNative.GetWindowHandle(window);
                        WindowId win32WindowsId = Win32Interop.GetWindowIdFromWindow(nativeWindowHandle);
                        AppWindow winuiAppWindow = AppWindow.GetFromWindowId(win32WindowsId);
                        if(winuiAppWindow.Presenter is OverlappedPresenter p)
                        {
                            p.SetBorderAndTitleBar(false, false);
                        }
const int width = 1200;
                        const int height = 800;
/*I suggest you to use MoveAndResize instead of Resize because this way you make sure to center the window*/
                        winuiAppWindow.MoveAndResize(new RectInt32(1920 / 2 - width / 2, 1080 / 2 - height / 2, width, height));
                    });
                });
            });
    #endif
                builder.Services.AddMauiBlazorWebView();
                return builder.Build();
            }
        }
    }

But the code you need specifically is the one found in the preprocessor directive

#if WINDOWS
user_139989890
Related