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

Question

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

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.

Answer 1

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>

Answer 2

Not in the shell itself, but in the page that's being displayed inside the shell, you should set the Shell.NavBarIsVisible attribute to false, like so:

<ContentPage
    ...
    Shell.NavBarIsVisible="False" />

Answer 3

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

Answer 4

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

Answer 5

Your MauiProgram.cs file should look like this if you want your app to be fullscreen with (completely) hidden titlebar:

using Microsoft.Maui.LifecycleEvents;
#if WINDOWS
    using Microsoft.UI;
    using Microsoft.UI.Windowing;
    using Windows.Graphics;
#endif

namespace MauiApp1;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {

        var builder = MauiApp.CreateBuilder();

        #if WINDOWS

        builder.ConfigureLifecycleEvents(events =>
        {
            events.AddWindows(lifeCycleBuilder =>
            {
                lifeCycleBuilder.OnWindowCreated(w =>
                {
                    w.ExtendsContentIntoTitleBar = false;
                    IntPtr wHandle = WinRT.Interop.WindowNative.GetWindowHandle(w);
                    WindowId windowId = Win32Interop.GetWindowIdFromWindow(wHandle);
                    AppWindow mauiWindow = AppWindow.GetFromWindowId(windowId);
                    mauiWindow.SetPresenter(AppWindowPresenterKind.FullScreen);  // TO SET THE APP INTO FULL SCREEN


                    //OR USE THIS LINE FOR YOUR CUSTOM POSITION
                    //  mauiWindow.MoveAndResize(YOUR DESIRED HOTIZONTAL POSITION, YOUR DESIRED VERTICAL POSITION, YOUR DESIRED WINDOW WIDTH, YOUR DESIRED WINDOW HEIGHT) ;
                });
            });
        });

        #endif


        #region == THIS IS GENERATED DEFAULT (UNRELATED) CODE ==

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

        #endregion
        return builder.Build();
    }
}

Answer 6

I am using .NET MAUI and MODAL navigation and I wanted to have a full-screen app - without header title - without any frame this code worked for me.

NavigationPage.SetHasNavigationBar(this, false);

The above code worked for me for the .Net MAUI app. 

public partial class ImageDisplay: ContentPage
{
    public ImageDisplay()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);  
    }
}