C#•9mo ago

MAUI. How to remove the Title Bar?

I need to remove the top panel so that the user can not use the buttons on it.

87 Replies

leowest•9mo ago

are u reffering to the black bar or the minimize, close etc buttons

plushechkaOP•9mo ago

in general, this whole area, because if you then switch to another page, the "back" button will appear.

leowest•9mo ago

well that black menu is from the debug tools they wont show up of the user and u can minimize it by clicking the arrow as for the navigation try Shell.NavBarIsVisible="False" but if u want to make it completely borderless like in WPF I am unsure if that is currently possible with MAUI

plushechkaOP•9mo ago

I tried to add this line to my view, but nothing disappeared.

leowest•9mo ago

u would do that to the shell well depends how ur app is structured but the main window how about disabling the flyout? Shell.FlyoutBehavior="Disabled"

plushechkaOP•9mo ago

insert instead of "navbar"?

leowest•9mo ago

u can have both

plushechkaOP•9mo ago

neither one nor the other works(

leowest•9mo ago

I cannot see the back button in your image thou so it makes hard for me to identify if these are what u really want

plushechkaOP•9mo ago

1 minute

leowest•9mo ago

u might want to try this one to false ExtendsContentIntoTitleBar

plushechkaOP•9mo ago

leowest•9mo ago

ah ok yeah I think u want the above then

plushechkaOP•9mo ago

well, I'll find out, maybe if nothing terrible happens, then you can leave it, it will just look strange on some pages

leowest•9mo ago

ExtendsContentIntoTitleBar would remove it from the title bar if u set it to false

plushechkaOP•9mo ago

how?

leowest•9mo ago

im finishing update my vs if u give me a few minutes I will check it out and explain

plushechkaOP•9mo ago

leowest•9mo ago

but it should work if u throw it inside the constructor under InitializeComponent(); just

ExtendsContentIntoTitleBar = false;

ExtendsContentIntoTitleBar = false;

plushechkaOP•9mo ago

I can't figure out which library it belongs to

leowest•9mo ago

yeah give me a few and I will let u know had a bad day with vs

plushechkaOP•9mo ago

)

leowest•9mo ago

@plushechka in the MauiProgram.cs

plushechkaOP•9mo ago

using FitLogDiplom.IViews; using FitLogDiplom.Models; using FitLogDiplom.Services; using FitLogDiplom.Views.Mobile; using FitLogDiplom.Views.Desktop; using Microsoft.Extensions.Logging; using FitLogDiplom.ViewModels; using FFImageLoading.Maui; namespace FitLogDiplom { public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .UseFFImageLoading() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }) .UseViewServices(); builder.Services.AddDbContext<FitLogDiplomContext>(); builder.Services.AddSingleton<SignInViewModel>(); #if ANDROID || IOS builder.Services.AddSingleton<ISignInView, MobileSignInView>(); builder.Services.AddTransient<IRegistrationView, MobileRegistrationView>(); #else builder.Services.AddSingleton<ISignInView, DesktopSignInView>(); builder.Services.AddTransient<IRegistrationView, DesktopRegistrationView>(); #endif return builder.Build(); } } }

leowest•9mo ago

u would add

builder.ConfigureLifecycleEvents(lifecycle => 
{
#if WINDOWS
    lifecycle.AddWindows(windows => windows.OnWindowCreated((del) => {
        del.ExtendsContentIntoTitleBar = false;
    }));
#endif
});

builder.ConfigureLifecycleEvents(lifecycle => 
{
#if WINDOWS
    lifecycle.AddWindows(windows => windows.OnWindowCreated((del) => {
        del.ExtendsContentIntoTitleBar = false;
    }));
#endif
});

plushechkaOP•9mo ago

Did it work for you?

leowest•9mo ago

yes there are more things u can remove give me a moment

leowest•9mo ago

so yeah u can remove the hwole thing

    builder.ConfigureLifecycleEvents(lifecycle => {
#if WINDOWS
        lifecycle.AddWindows(windows => windows.OnWindowCreated((w) => 
        {
            if (w is not MauiWinUIWindow window)
                return;

            w.ExtendsContentIntoTitleBar = false;
            var handle = WinRT.Interop.WindowNative.GetWindowHandle(window);
            var id = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(handle);
            var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(id);
            if (appWindow.Presenter is OverlappedPresenter pre)
            {
                pre.IsMaximizable = false;
                pre.IsResizable = false;
                pre.IsMinimizable = false;
                pre.SetBorderAndTitleBar(false, false);
             }
        }));
#endif
    });

    builder.ConfigureLifecycleEvents(lifecycle => {
#if WINDOWS
        lifecycle.AddWindows(windows => windows.OnWindowCreated((w) => 
        {
            if (w is not MauiWinUIWindow window)
                return;

            w.ExtendsContentIntoTitleBar = false;
            var handle = WinRT.Interop.WindowNative.GetWindowHandle(window);
            var id = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(handle);
            var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(id);
            if (appWindow.Presenter is OverlappedPresenter pre)
            {
                pre.IsMaximizable = false;
                pre.IsResizable = false;
                pre.IsMinimizable = false;
                pre.SetBorderAndTitleBar(false, false);
             }
        }));
#endif
    });

leowest•9mo ago

without that, this is what it looks like

plushechkaOP•9mo ago

message.txt

plushechkaOP•9mo ago

I don't quite understand where to implement this

leowest•9mo ago

looks right is it not compiling?

plushechkaOP•9mo ago

yes which libraries should I use?

leowest•9mo ago

ah right mmm

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

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

these 2

plushechkaOP•9mo ago

True, it worked, but now you can't pull the window and change its size, it's a constant value. Also, then you can make the main three buttons to hide, close and minimize do I understand correctly that this only works for Windows?

leowest•9mo ago

I dont know if thye work for mac as I never tried u would have to try essentially yes

pre.IsMaximizable = false;
pre.IsResizable = false;
pre.IsMinimizable = false;

pre.IsMaximizable = false;
pre.IsResizable = false;
pre.IsMinimizable = false;

these remove those buttons

plushechkaOP•9mo ago

android dont support this

leowest•9mo ago

This removes the border and title

pre.SetBorderAndTitleBar(false, false);

pre.SetBorderAndTitleBar(false, false);

This only prevents the controls from invading the title bar

w.ExtendsContentIntoTitleBar = false;

w.ExtendsContentIntoTitleBar = false;

mobile works different so the navigation is completely different from what u have on windows on mobile u dont have a border title and button per say but you asked this for windows anyway right?

plushechkaOP•9mo ago

having such an empty area and removing all the buttons, etc., can I add my own buttons or text there, for example?

plushechkaOP•9mo ago

for android too, but not scary, I think)

leowest•9mo ago

well the window u showed me doesn't exist on android its different as I said which would be disabled by those 2 properties I gave u earlier

plushechkaOP•9mo ago

and now can I add my own elements to this panel, thereby not leaving this empty white space?

leowest•9mo ago

u should be able to yes

plushechkaOP•9mo ago

or reduce its size to a minimum

leowest•9mo ago

i saw what mine looks like? there

plushechkaOP•9mo ago

can you give a github or tell me how to do it?

leowest•9mo ago

what I am using here is just the sample maui app

leowest•9mo ago

https://github.com/dotnet/maui-samples

GitHub

GitHub - dotnet/maui-samples: Samples for .NET Multi-Platform App U...

Samples for .NET Multi-Platform App UI (.NET MAUI) - dotnet/maui-samples

leowest•9mo ago

more specifically this one https://github.com/dotnet/maui-samples/tree/main/8.0/Apps/WeatherTwentyOne

GitHub

maui-samples/8.0/Apps/WeatherTwentyOne at main · dotnet/maui-samples

Samples for .NET Multi-Platform App UI (.NET MAUI) - dotnet/maui-samples

plushechkaOP•9mo ago

ok, thank you @leowest I apologize, but have you tried changing the color of this panel?

leowest•9mo ago

which panel?

plushechkaOP•9mo ago

this

plushechkaOP•9mo ago

leowest•9mo ago

never tried but I think I saw some properties to do it

plushechkaOP•9mo ago

Shell.BackgroundColor="#080927" i tried it perfectly

leowest•9mo ago

in the content page Shell.BackgroundColor="DarkGreen" should work for that

leowest•9mo ago

plushechkaOP•9mo ago

who the hell knows

leowest•9mo ago

if nothing went green in yours then something to do with your xaml

plushechkaOP•9mo ago

it's a heck of a thing, I even removed the MauiProgram stuff I previously put in with you. It still won't change to green

leowest•9mo ago

do u have a github of your project I can try?

plushechkaOP•9mo ago

I'll fix some things and get them to you.

plushechkaOP•9mo ago

https://github.com/5LU6E4KA/FitLogDiplom

GitHub

GitHub - 5LU6E4KA/FitLogDiplom

Contribute to 5LU6E4KA/FitLogDiplom development by creating an account on GitHub.

plushechkaOP•9mo ago

@leowest if anything, I'll comment on where and what.

leowest•9mo ago

I will take a look in a few and get back to u a bit busy right now

plushechkaOP•9mo ago

leowest•9mo ago

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="FitLogDiplom.Views.Desktop.DesktopSignInView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:svg="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"
    NavigationPage.HasNavigationBar="False">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid BackgroundColor="DarkBlue" Grid.ColumnSpan="5"/>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
        </Grid>

        <Button
        Grid.Row="0" Grid.RowSpan="2"
        Command="{Binding NavigateToSecondPageCommand}"
        Text="Next"
        WidthRequest="245" />
    </Grid>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="FitLogDiplom.Views.Desktop.DesktopSignInView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:svg="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"
    NavigationPage.HasNavigationBar="False">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid BackgroundColor="DarkBlue" Grid.ColumnSpan="5"/>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
        </Grid>

        <Button
        Grid.Row="0" Grid.RowSpan="2"
        Command="{Binding NavigateToSecondPageCommand}"
        Text="Next"
        WidthRequest="245" />
    </Grid>
</ContentPage>

DesktopSignInView.xaml

plushechkaOP•9mo ago

i try

leowest•9mo ago

plushechkaOP•9mo ago

How?

leowest•9mo ago

the XAML above u can literally replace the one u have in the file DesktopSignInView.xaml and it should give u the same thing NavigationPage.HasNavigationBar="False" is what removes teh white space at the top and lets u use the full space

plushechkaOP•9mo ago

Shell.BackgroundColor="Green" Why didn't it work?

leowest•9mo ago

u dont need it the way your page is working u can modify the grid directly and it will affect the space <Grid BackgroundColor="DarkBlue" Grid.ColumnSpan="5"/> that is the first row and I changed its color to dark blue

plushechkaOP•9mo ago

is doing the same thing in the next view a workable option?

leowest•9mo ago

yes

plushechkaOP•9mo ago

supposedly, now I can add close buttons and other buttons there too?

leowest•9mo ago

dunno u can try

plushechkaOP•9mo ago

Do you know if the same option will work for the mobile version?

leowest•9mo ago

again mobile is different the menu u have for desktop does not work in mobile so u will have to learn the mobile way of doing things mobile also does no have a minimize, close button like u have in a normal desktop app so u will have to learn those and adjust as needed

plushechkaOP•9mo ago

@leowest Ok, if anything, can I contact you in private messages for questions?, I'm just a beginner).

leowest•9mo ago

sorry I dont take dms. you can open another #help and whoever is available at the time will help you out, there are others around that can help as well 🙂 once u start doing android etc u will understand better what I am saying

plushechkaOP•9mo ago

ok, thank you so much for your help today.

leowest•9mo ago

no worries 😉

MODiX•9mo ago

Use the /close command to mark a forum thread as answered

Gaming

Programming

MAUI. How to remove the Title Bar?