[Windows] On .NET MAUI 9.0 Preview 4, a modal full screen window is not properly maximized

[janne-hmp]

Description

On Windows in 9.0 Preview 4, a modal full screen window produced with

#if WINDOWS
            .ConfigureLifecycleEvents(events =>
            {
                // Make sure to add "using Microsoft.Maui.LifecycleEvents;" in the top of the file 
                events.AddWindows(windowsLifecycleBuilder =>
                {
                    windowsLifecycleBuilder.OnWindowCreated(window =>
                    {
                        window.ExtendsContentIntoTitleBar = false;
                        var handle = WinRT.Interop.WindowNative.GetWindowHandle(window);
                        var id = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(handle);
                        var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(id);
                        switch (appWindow.Presenter)
                        {
                            case Microsoft.UI.Windowing.OverlappedPresenter overlappedPresenter:
                                overlappedPresenter.SetBorderAndTitleBar(false, false);
                                overlappedPresenter.Maximize();
                                break;
                        }
                    });
                });
            })
#endif            

does not fully maximize itself, but leaves a blank space for where the title bar should be. Non-modal windows seem to work fine. The modal window is shown using the following code:

            var gamePage = new GamePage(this);
            await App.Current.MainPage.Navigation.PushModalAsync(gamePage);

Steps to Reproduce

1. Make the default MAUI app
2. Create a new MAUI ContentPage named ModalTestPage.
3. Change ModalTestPage's background color to Beige by adding to the page's XAML: BackgroundColor="Beige" .
4. Add the following code to the MainPage button:

            var modalPage = new ModalTestPage();
            Navigation.PushModalAsync(modalPage);

5. Add to the top of MauiProgram.cs the following:

using Microsoft.Maui.LifecycleEvents;

and add to builder the following:

#if WINDOWS
                .ConfigureLifecycleEvents(events =>
                {
                    // Make sure to add "using Microsoft.Maui.LifecycleEvents;" in the top of the file 
                    events.AddWindows(windowsLifecycleBuilder =>
                    {
                        windowsLifecycleBuilder.OnWindowCreated(window =>
                        {
                            window.ExtendsContentIntoTitleBar = false;
                            var handle = WinRT.Interop.WindowNative.GetWindowHandle(window);
                            var id = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(handle);
                            var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(id);
                            switch (appWindow.Presenter)
                            {
                                case Microsoft.UI.Windowing.OverlappedPresenter overlappedPresenter:
                                    overlappedPresenter.SetBorderAndTitleBar(false, false);
                                    overlappedPresenter.Maximize();
                                    break;
                            }
                        });
                    });
                })
#endif            

6. Build and start the app.
7. Press the button.
8. The modal page (beige) does not cover the whole window: Top still shows the main page underneath (white, with Home text):

Link to public reproduction project repository

https://github.com/hyvanmielenpelit/WindowsFullScreenModalPageSizeBug

Version with bug

9.0.0-preview.4.10690

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 11

Did you find any workaround?

No.

Relevant log output

No response

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• [regression/8.0.0] [Windows]Shell flyout menu missing 😨 when full screen (#18611), similarity score: 0.74

Closed similar issues:

• [regression/8.0.0-preview.4.8333] Full-screening a window no longer removes its title-bar (#15676), similarity score: 0.80
• [Bug] On maximize, content of the WinUI window doesn't resize automatically. Manual resizing does it well. (#1612), similarity score: 0.76
• [Android] Modal Pages do not fill screen when in Fullscreen (#10364), similarity score: 0.75
• Unable to hide title bar fron window with blazor hybrid on Windows (#17181), similarity score: 0.74

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[PureWeen]

@janne-hmp does this also happen on net8?

[janne-hmp]

@janne-hmp does this also happen on net8?

I'm not sure, since the game uses .NET 9.0 features and also I do not have .NET 8.0 installed, which both make it difficult to check something like that. At least the latest version in .NET 9.0 works incorrectly, so perhaps .NET 8.0 behaves similarly.

[janne-hmp]

I can also confirm that if I use PushAsync instead of PushModalAsync, the content page is of the right size (entire full screen). So the problem is just with the modal window.

[janne-hmp]

This is also relatively easy to reproduce:

1. Make the default MAUI app
2. Create a new MAUI ContentPage named ModalTestPage.
3. Change ModalTestPage's background color to Beige by adding to the page's XAML: BackgroundColor="Beige" .
4. Add the following code to the MainPage button:

            var modalPage = new ModalTestPage();
            Navigation.PushModalAsync(modalPage);

5. Add to the top of MauiProgram.cs the following:

using Microsoft.Maui.LifecycleEvents;

and add to builder the following:

#if WINDOWS
                .ConfigureLifecycleEvents(events =>
                {
                    // Make sure to add "using Microsoft.Maui.LifecycleEvents;" in the top of the file 
                    events.AddWindows(windowsLifecycleBuilder =>
                    {
                        windowsLifecycleBuilder.OnWindowCreated(window =>
                        {
                            window.ExtendsContentIntoTitleBar = false;
                            var handle = WinRT.Interop.WindowNative.GetWindowHandle(window);
                            var id = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(handle);
                            var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(id);
                            switch (appWindow.Presenter)
                            {
                                case Microsoft.UI.Windowing.OverlappedPresenter overlappedPresenter:
                                    overlappedPresenter.SetBorderAndTitleBar(false, false);
                                    overlappedPresenter.Maximize();
                                    break;
                            }
                        });
                    });
                })
#endif            

6. Build and start the app.
7. Press the button.
8. The modal page (beige) does not cover the whole window: Top still shows the main page underneath (white, with Home text):

[janne-hmp]

@janne-hmp does this also happen on net8?

Just managed to test this also on .NET 8, and it works there just like in .NET 9 Preview. In the sample app, there seem to be big title bar on MainPage (says "Home") and a small title bar on ModalTestPage (says "MauiApp2"), which are shown on the top of each other.

[kevinxufei]

This is also relatively easy to reproduce:

1. Make the default MAUI app
2. Create a new MAUI ContentPage named ModalTestPage.
3. Change ModalTestPage's background color to Beige by adding to the page's XAML: BackgroundColor="Beige" .
4. Add the following code to the MainPage button: ..........

Verified this issue with Visual Studio 17.11.0 Preview 2.0 (8.0.60 & 9.0.0-preview.5.24307.10). Can repro on Windows platform.

[janne-hmp]

It would be great to get a fix to this. Among other things, various page transition animations malfunction by not handling the top titlebar, leaving that part of the page cut off from the animation. Also, when recording the game with some software, the titlebar area is left gray; you cannot click the top area with cursor either.

After some research, I also found out the following: Page's PlatformView is ContentPanel on Windows. The parent of this ContentPanel is RootNavigationView. The AppBarTitleHeight property of RootNavigationView is set incorrectly to 32 (at least with modal pages shown with PushModalAsync), but I haven't found a way to change that value. It probably needs to be set directly by MAUI to its correct value. Not sure if this is the entire problem, though.

[HectorCF16]

Same issue here. We are making a Kiosk application and we're waiting to see how to fix this.

[janne-hmp]

For the time being, you can set the content page's layout's (e.g. a grid at the root) top margin to -32, but that is not a perfect fix, since you cannot then click the top 32 pixels of the page in that case. But if there's nothing clickable there in your app, it may be ok until the real fix comes by.

@davidortinau This would be another important thing to prioritize in .NET MAUI 9.0 / by the Windows team. It is probably a simple fix when you find the right place.

[HectorCF16]

Thank you very much @janne-hmp, It didn't work for me as my Content page is not fullscreen and the negative margin applies to the "¿Cómo quieres pagar?" page and not to the shadow, so the "¿Cómo quieres pagar?" page moves up when the margin is applied. This is my implementation of the negative margin:

So, as I can't apply the margin to the whole content page, but thanks a lot.

[RuddyOne]

Also having this issue and it is really bad for a production application. Can we get this basic functionality fixed?

This in also on .NET 8.

[janne-hmp]

@davidortinau Any update what's the status on this? I still think that this should really be prioritized on the Windows side, as it impacts every full screen application with modal pages. Happy to help out, if need be.

[MartyIX]

@janne-hmp It's typically much easier to fix issues like this with a standalone small repro project. FTR I have not tried to compile your game but I must admit that it puts me a bit off because it's big. A small repro is a great candidate for a test so ... it really helps.

If you have a small repro, I can take a quick look if I can spot what is wrong.

Btw: I had a visually similar issue a year ago and the issue was that I did not hidr my top shell bar. Not sure if shell is involved here.

[janne-hmp]

As per the steps to reproduce, you don't need the game here, you can just use the default MAUI app and add a few lines of code:

1. Make the default MAUI app
2. Create a new MAUI ContentPage named ModalTestPage.
3. Change ModalTestPage's background color to Beige by adding to the page's XAML: BackgroundColor="Beige" .
4. Add the following code to the MainPage button:

            var modalPage = new ModalTestPage();
            Navigation.PushModalAsync(modalPage);

5. Add to the top of MauiProgram.cs the following:

using Microsoft.Maui.LifecycleEvents;

and add to builder the following:

#if WINDOWS
                .ConfigureLifecycleEvents(events =>
                {
                    // Make sure to add "using Microsoft.Maui.LifecycleEvents;" in the top of the file 
                    events.AddWindows(windowsLifecycleBuilder =>
                    {
                        windowsLifecycleBuilder.OnWindowCreated(window =>
                        {
                            window.ExtendsContentIntoTitleBar = false;
                            var handle = WinRT.Interop.WindowNative.GetWindowHandle(window);
                            var id = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(handle);
                            var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(id);
                            switch (appWindow.Presenter)
                            {
                                case Microsoft.UI.Windowing.OverlappedPresenter overlappedPresenter:
                                    overlappedPresenter.SetBorderAndTitleBar(false, false);
                                    overlappedPresenter.Maximize();
                                    break;
                            }
                        });
                    });
                })
#endif            

6. Build and start the app.
7. Press the button.
8. The modal page (beige) does not cover the whole window: Top still shows the main page underneath (white, with Home text).

Does this enable you to have a look, or do you really need a full reproduction repository?

[MartyIX]

Does this enable you to have a look, or do you really need a full reproduction repository?

Full repro is preferable because then I know there is no difference between my end and your end and then one avoids losing time unnecessarily.

[janne-hmp]

Ok, here you go: https://github.com/hyvanmielenpelit/WindowsFullScreenModalPageSizeBug

[MartyIX]

(FTR this issue is reproducible on .NET 8 as well, so it affects .NET 9 and .NET 8.)

You can modify: https://github.com/hyvanmielenpelit/WindowsFullScreenModalPageSizeBug/blob/main/WindowFullScreenModalPageBug/AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="WindowFullScreenModalPageBug.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:WindowFullScreenModalPageBug"
    Shell.FlyoutBehavior="Disabled"
+   Shell.NavBarIsVisible="False"
    Title="WindowFullScreenModalPageBug">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

and the result is:

Before	After

However, that's not what this bug is about. I have found this great comment https://github.com/dotnet/maui/issues/22894#issuecomment-2156242959 and I believe it's relevant here.

I know that changing the line like this

			_rootView.UpdateAppTitleBar(
-					appbarHeight,
+ 				        0,
					UI.Windowing.AppWindowTitleBar.IsCustomizationSupported() &&
					isVisible
				);

"fixes" the issue. That is, I can see then no toolbar:

However, the gist of the issue is that this line:

https://github.com/dotnet/maui/blob/b182ffef2c85a5681686732a81b0f572a86591cc/src/Core/src/Platform/Windows/ApplicationExtensions.cs#L31

(which ultimately instantiates NavigationRootManager, see the great comment)

is called AFTER this line

https://github.com/dotnet/maui/blob/b182ffef2c85a5681686732a81b0f572a86591cc/src/Core/src/Platform/Windows/ApplicationExtensions.cs#L18

Consequently, your assignment is ignored by NavigationRootManager here.

I have tried numerous ways to hide that AppTitleBarContentControl (see):

... but I failed miserably. I basically tried to force the titlebar to be hidden after the modal appeared.

To debug this further, I have this branch: https://github.com/MartyIX/maui/tree/feature/2024-08-28-TitleBar-issue-22784 (https://github.com/MartyIX/maui/commit/f780ad14b8a6067127daecd2dde633bbe9cfb248) so one can debug it in the sandbox project easily.

I'm out of ideas at the moment.

cc @Takym cc @Foda (as he worked on #17041 which seems relevant here)

[Foda]

Hello! This issue is caused by the way I checked for the Window style. It should be fixed in the 1.6 WinAppSDK bump: https://github.com/dotnet/maui/pull/24266

[Takym]

I have tried https://github.com/dotnet/maui/pull/24266#issuecomment-2341609579 however the title bar is still shown doubly. I tested with this commit on the reproduction project: https://github.com/Takym/DoublyTitleBarsInMaui/commit/9145222a99d7c8a15bb445b05186a64c2ff266c0.

(I am sorry for the late reply.)

P.S. Current OS Version: Microsoft Windows [Version 10.0.19045.4894]

[RuddyOne]

I have also tried #24266 and am still seeing the same issue as the OP.

[MartyIX]

This issue should be fixed by this change: https://github.com/dotnet/maui/pull/24266/files#diff-60a1bc7c3c705e23af11c60ea9e5ccdd66a6e1821d82cbcad05d3648dacf77d5 (AFAIK).

So one would have to compile https://github.com/dotnet/maui/pull/24266. That is, upgrading to WinAppSDK 1.6 is probably not sufficient.

[janne-hmp]

Hello! This issue is caused by the way I checked for the Window style. It should be fixed in the 1.6 WinAppSDK bump: #24266

I recently updated to .NET MAUI 9.0 RC1 (along with Visual Studio 2022 17.12 Preview 2.0), and the issue still persists in RC1. Does RC1 use WinAppSDK 1.6 on Windows, or do we need to somehow upgrade it separately so that MAUI Windows will start using it?

[MartyIX]

Hello! This issue is caused by the way I checked for the Window style. It should be fixed in the 1.6 WinAppSDK bump: #24266

I recently updated to .NET MAUI 9.0 RC1 (along with Visual Studio 2022 17.12 Preview 2.0), and the issue still persists in RC1. Does RC1 use WinAppSDK 1.6 on Windows, [..]

https://github.com/dotnet/maui/pull/24266 is to upgrade MAUI for .NET 9 to WinAppSDK 1.6. So .NET MAUI 9.0 RC1 still runs on WinAppSDK 1.5.x.

[..] or do we need to somehow upgrade it separately so that MAUI Windows will start using it?

You can try https://github.com/dotnet/maui/pull/24266#issuecomment-2341609579

[janne-hmp]

Thanks, let me try the comment.

[janne-hmp]

Applying the comment (i.e. just changing the Windows build number) leads to a malfunctioning app that does not start. 19041 works fine. Perhaps 22621 is not very well tested yet:

[Takym]

This issue should be fixed by this change: https://github.com/dotnet/maui/pull/24266/files#diff-60a1bc7c3c705e23af11c60ea9e5ccdd66a6e1821d82cbcad05d3648dacf77d5 (AFAIK).

So one would have to compile #24266. That is, upgrading to WinAppSkd 1.6 is probably not sufficient.

Thank you for telling me. I misunderstood.

[MartyIX]

@janne-hmp

Applying the comment (i.e. just changing the Windows build number) leads to a malfunctioning app that does not start. 19041 works fine. Perhaps 22621 is not very well tested yet:

No, you don't have to change 19041 to 22621. Here https://github.com/dotnet/maui/pull/24266#issuecomment-2341609579 the guy works with 22621 SDK level (or whatever it is called). But you can actually stay on 19041:

<PropertyGroup>
    <TargetFrameworks>net8.0;net8.0-ios;net8.0-android</TargetFrameworks>
    <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net8.0-windows10.0.19041.0</TargetFrameworks>
    <WindowsSdkPackageVersion>10.0.19041.38</WindowsSdkPackageVersion>
</PropertyGroup>

and

  <ItemGroup Condition="$(TargetFramework.Contains('-windows'))">
    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.6.240829007" />
  </ItemGroup>

See here: https://www.nuget.org/packages/Microsoft.Windows.SDK.NET.Ref that "19041" packages were released recently:

edit: Now I wonder if I misunderstood your comment. But anyway, I'll leave it here because it's not obvious.

[janne-hmp]

As long as I have <WindowsSdkPackageVersion>10.0.19041.38</WindowsSdkPackageVersion> in the project file, I still get the aforementioned internal exception also in 19041, both with and without <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.6.240829007" /> As mentioned above, this also happened with WindowsSdkPackageVersion being 10.0.22621.38. So it seems to be something about WindowsSdkPackageVersion ending 38.

[RuddyOne]

Has anyone got this working? I cant seem to see this issue being fixed when trying to update the Windows SDK package version etc.