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.

Compartmentalize

FWIW, Maui is NOT yet released. Its Preview, so developers can get a head start on it, and find bugs. It is unrealistic to expect it to be fully documented. Or fully functional. Just pointing that out, as you commented that it had been released a year ago. As an app developer myself, it does look like it is getting very close - and docs are starting to catch up. Not much longer! – Shawnee

were you able to get around this issue? – Whited

Answer 1

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" />

Lucillelucina

Doesn't work. Only removes the page's Title area which I do want to keep. The gray title bar remains. – Hope

at 2023-08-29, should be false (in lowercase) – Pyrostat

@Pyrostat :( lower case false doesn't work either. This flag is obeyed on iOS but not Android. So frustrating. – Antiphonary

Answer 2

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>

Escobar

This hides the navigation bar that goes under the title bar, but not the title bar itself. – Unkennel

It not works on iOS The @ÉdgarSanchezGordon anwser works on iOS – Guzel

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

Heterophony

This works, except for a 5px white bar above the Shell.TitleView (that I'm using within the content pages). I had to set my background color of the TitleView to white because of it. – Hope

Answer 4

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

Belva

Is there an AppBuilder option yet to set initial window size? Or is it still necessary to write handler code such as github.com/dotnet/maui/discussions/…? – Shawnee

I think that should still go through a handler for now – Belva

Answer 5

Maybe this will make it much clearer than just showing portions of the codes and confusing, especially newbies. Take note of the "Shell.NavBarIsVisible".

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Demo.MainPage"
             Shell.NavBarIsVisible="False">
       
</ContentPage>

Taeniacide

Answer 6

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

Origin

Answer 7

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

Vaulting

You should add explanation. – Morganica