C#•3mo 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•3mo ago

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

plushechka•3mo ago

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

leowest•3mo 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

plushechka•3mo ago

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

leowest•3mo 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"

plushechka•3mo ago

insert instead of "navbar"?

leowest•3mo ago

u can have both

plushechka•3mo ago

neither one nor the other works(

leowest•3mo 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

plushechka•3mo ago

1 minute

leowest•3mo ago

u might want to try this one to false ExtendsContentIntoTitleBar

plushechka•3mo ago

leowest•3mo ago

ah ok yeah I think u want the above then

plushechka•3mo 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•3mo ago

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

plushechka•3mo ago

how?

leowest•3mo ago

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

plushechka•3mo ago

leowest•3mo ago

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

ExtendsContentIntoTitleBar = false;

ExtendsContentIntoTitleBar = false;

plushechka•3mo ago

I can't figure out which library it belongs to

leowest•3mo ago

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

plushechka•3mo ago

)

leowest•3mo ago

@plushechka in the MauiProgram.cs

plushechka•3mo 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•3mo 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
});

plushechka•3mo ago

Did it work for you?

leowest•3mo ago

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

leowest•3mo 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•3mo ago

without that, this is what it looks like

plushechka•3mo ago

message.txt

plushechka•3mo ago

I don't quite understand where to implement this

leowest•3mo ago

looks right is it not compiling?

plushechka•3mo ago

yes which libraries should I use?

leowest•3mo 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

plushechka•3mo 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•3mo 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

plushechka•3mo ago

android dont support this

leowest•3mo 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?

plushechka•3mo ago

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

plushechka•3mo ago

for android too, but not scary, I think)

leowest•3mo 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

plushechka•3mo ago

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

leowest•3mo ago

u should be able to yes

plushechka•3mo ago

or reduce its size to a minimum

leowest•3mo ago

i saw what mine looks like? there

plushechka•3mo ago

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

leowest•3mo ago

what I am using here is just the sample maui app

leowest•3mo 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•3mo 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

plushechka•3mo ago

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

leowest•3mo ago

which panel?

plushechka•3mo ago

this

plushechka•3mo ago

leowest•3mo ago

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

plushechka•3mo ago

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

leowest•3mo ago

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

leowest•3mo ago

plushechka•3mo ago

who the hell knows

leowest•3mo ago

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

plushechka•3mo 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•3mo ago

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

plushechka•3mo ago

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

plushechka•3mo ago

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

GitHub

GitHub - 5LU6E4KA/FitLogDiplom

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

plushechka•3mo ago

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

leowest•3mo ago

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

plushechka•3mo ago

leowest•3mo 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

plushechka•3mo ago

i try

leowest•3mo ago

plushechka•3mo ago

How?

leowest•3mo 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

plushechka•3mo ago

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

leowest•3mo 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

plushechka•3mo ago

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

leowest•3mo ago

yes

plushechka•3mo ago

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

leowest•3mo ago

dunno u can try

plushechka•3mo ago

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

leowest•3mo 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

plushechka•3mo ago

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

leowest•3mo 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

plushechka•3mo ago

ok, thank you so much for your help today.

leowest•3mo ago

no worries 😉

MODiX•3mo ago

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

Gaming

Programming

MAUI. How to remove the Title Bar?