Windows TitleBar is now permanently transparent showing things underneath (.NET8), did not have this issue before (.NET7)

[jonmdev]

Description

Previously in .NET 7 the TitleBar was broken as described here: #17679

In particular, there was no accurate reading on its height from App.Window.TitleBar.Height.

That appears to be fixed now in .NET8 which is great. But now the TitleBar has become transparent, allowing things to pass through under it no matter what the setting is. For example like this:

Here we should be seeing a green TitleBar all the way across the screen and under the title of the bar, but instead the image underneath is showing through.

Secondarily, the same bug remains where if you do appWindow.Move(new PointInt32(0, 0)); on lifeCycleBuilder.OnWindowCreated, it is offset from the left side of the screen by a certain margin. I am not sure why that persists.

ie. In the screencap above, the window should be at position (0,0) of the screen which it certainly isn't.

Steps to Reproduce

All repro code is in App.xaml.cs and MauiProgram.cs

App.xaml.cs:

using System.Diagnostics;

namespace WindowsTitleBarBug {
    public partial class App : Application {
        public App() {
            InitializeComponent();

            //BASIC LAYOUT
            ContentPage contentPage = new ContentPage();
            MainPage = contentPage;

            AbsoluteLayout absoluteLayout = new AbsoluteLayout();
            absoluteLayout.BackgroundColor = Colors.Red;
            contentPage.Content = absoluteLayout;

            Image image = new Image();
            Size imgSize = new Size(800, 526);
            image.Source = "beach.jpg";
            absoluteLayout.Add(image);

            AbsoluteLayout topBar = new AbsoluteLayout();
            topBar.BackgroundColor = Colors.White;
            topBar.HeightRequest = 40;
            absoluteLayout.Add(topBar);

            //RESIZER
            contentPage.SizeChanged += delegate {
                if (contentPage.Height > 0) {
                    absoluteLayout.HeightRequest = contentPage.Height;
                    absoluteLayout.WidthRequest = contentPage.Width;

                    image.WidthRequest = contentPage.Width;
                    image.HeightRequest = (imgSize.Height / imgSize.Width) * image.WidthRequest;

                    topBar.WidthRequest = contentPage.Width;
                }
            };

            //OSCILLATOR
            var timer = Application.Current.Dispatcher.CreateTimer();
            timer.Interval = TimeSpan.FromSeconds(1 / 30.0);
            DateTime lastDateTime = DateTime.Now;
            double timerTime = 0;
            timer.Tick += delegate {
                image.TranslationY = Math.Sin(Math.Tau * 0.3 * timerTime) * 300;
                timerTime += (DateTime.Now - lastDateTime).TotalSeconds;
                lastDateTime = DateTime.Now;
            };
            timer.Start();


        }
        protected override Window CreateWindow(IActivationState activationState) {
            
            Window window = base.CreateWindow(activationState);
            window.Title = "HELLO APPLICATION";
            return window;

        }

    }
}

MauiProgram.cs

using Microsoft.Extensions.Logging;
using Microsoft.Maui.LifecycleEvents;
using Microsoft.Maui.Platform;

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

namespace WindowsTitleBarBug {
    public static class MauiProgram {
        public static MauiApp CreateMauiApp() {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts => {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });


#if WINDOWS
            //https://stackoverflow.com/questions/71806578/maui-how-to-remove-the-title-bar-and-fix-the-window-size //temporary solution, if make full screen no mismatch pixels
            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 appWindow = AppWindow.GetFromWindowId(windowId);
                        var titleBar = appWindow.TitleBar;         
                        titleBar.BackgroundColor = Microsoft.Maui.Graphics.Colors.GreenYellow.ToWindowsColor();
                        titleBar.ButtonBackgroundColor = Microsoft.Maui.Graphics.Colors.GreenYellow.ToWindowsColor();                                             
                        titleBar.InactiveBackgroundColor = Microsoft.Maui.Graphics.Colors.LightGrey.ToWindowsColor();    
                        titleBar.ButtonInactiveBackgroundColor = Microsoft.Maui.Graphics.Colors.DarkGrey.ToWindowsColor();
                        //appWindow.SetPresenter(AppWindowPresenterKind.FullScreen);  // TO SET THE APP INTO FULL SCREEN
                        appWindow.SetPresenter(AppWindowPresenterKind.Default);  // TO NOT SET THE APP INTO FULL SCREEN
                        appWindow.Resize (new SizeInt32(1500, 700));
                        appWindow.Move(new PointInt32(0, 0));
                    });
                    
                });
            });

#endif
#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

Link to public reproduction project repository

https://github.com/jonmdev/WindowsTitleBarBug

Version with bug

8.0.1 GA

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

7.0.101

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[Foda]

Hello! This was due to a change we made a bit ago regarding titlebars, and hope to provide a much better API for this soon. Currently, the titlebar is transparent to allow the Mica material to be shown and changes based on the user's "Show accent color in titlebar" setting in Windows.

For now, you can customize the background color of the titlebar by adding the following into a ResourceDictionary in the Platforms/Windows/App.xaml file:

<DataTemplate x:Key="MauiAppTitleBarTemplate">
    <Grid >
        <Border
            Canvas.ZIndex="1"
            VerticalAlignment="Stretch"
            Background="GreenYellow">

            <TextBlock
                Foreground="Red"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Text="HELLO APPLICATION"/>
        </Border>
    </Grid>
</DataTemplate>

[jonmdev]

Thanks. Is there any way to do this with C#? I am not using any xaml anywhere in my apps. Thanks.

[ninachen03]

Verified this issue with Visual Studio 17.10.0 Preview 2. Can repro on windows platform with sample project.

[PureWeen]

@jonmdev not easily.

Since this is part of the WinUI XAML layer that's a bit trickier to reach with C#