Custom title bar color doesn't work when MAUI app is maximized

Question

I recently succeeded at changing the color of the title bar of my MAUI app. Unfortunately, it doesn't work when it is maximized.

Here's how it looks when the windows state is restored. The applied color is red.

However, here's how it looks when the window is maximized. The image shows only the top right part for convenience.

A gray gap is shown between the title bar and the top of the main form. Also, the underlying minimize, mazimize and close buttons change color when I hover them.

This is the default MAUI app on top of which I only implemented a platform speficic service for changing the title bar color.

using Microsoft.Maui.Platform;
using uiXaml = Microsoft.UI.Xaml;
using windowing = Microsoft.UI.Windowing;

namespace MauiTesting2.Platforms.Windows;
public class WinUIPlatformService : IPlatformService {

    private uiXaml.Window NativeWindow => (uiXaml.Window)App.Current.Windows.First().Handler.PlatformView;
    private windowing.AppWindow m_appWindow = null;
    private windowing.AppWindow AppWindow {
        get {
            if (m_appWindow == null) {
                var windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(this.NativeWindow);
                var windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(windowHandle);
                m_appWindow = windowing.AppWindow.GetFromWindowId(windowId);
            }
            return m_appWindow;
        }
    }

    private windowing.AppWindowTitleBar m_titleBar = null;
    private windowing.AppWindowTitleBar TitleBar => m_titleBar ?? (m_titleBar = this.AppWindow.TitleBar);

    public void ApplyTitleBarColor(Color toColor) {
        var winUiColor = toColor.ToWindowsColor();
        this.TitleBar.InactiveBackgroundColor = winUiColor;
        this.TitleBar.BackgroundColor = winUiColor;
        this.TitleBar.ButtonBackgroundColor = winUiColor;
        this.TitleBar.ButtonHoverBackgroundColor = winUiColor;
        this.TitleBar.ButtonInactiveBackgroundColor = winUiColor;
        this.TitleBar.ButtonPressedBackgroundColor = winUiColor;
    }
}

Do you guys know how to fix this or if there's other ways to change the title bar color. My main concern right now, as a platform, is WinUI.

Answer 1

I tried @Dongzhi Wang-MSFT's solution. I managed to change the color of the title bar, by settings its height precisely at 29 pixels. Lower value didn't work.

<maui:MauiWinUIApplication
    <maui:MauiWinUIApplication.Resources>
        <SolidColorBrush x:Key="ActualWinUITitleBarBrush" Color="Red" />
        <StaticResource x:Key="WinUITitleBarBrush" ResourceKey="ActualWinUITitleBarBrush" />
        <DataTemplate x:Key="MauiAppTitleBarTemplate">
            <Border Height="29" Background="{ThemeResource WinUITitleBarBrush}"/>
        </DataTemplate>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

The extra resources are there to allow changing the color at runtime, as such:

using uiMedia = Microsoft.UI.Xaml.Media;

var winUITitleBarBrush = (uiMedia.SolidColorBrush)MauiTesting.WinUI.App.Current.Resources["WinUITitleBarBrush"];
winUITitleBarBrush.Color = toColor.ToWindowsColor();

However there was still is a semi-transparent overlay on the lower part of the title bar.

It appears that the WindowCaptionBackground WinUI style resource contains the solid brush for the title bar and that we need to change its color to remove that overlay. We can do this by setting that brush to transparent color in XAML or programatically as follows.

using graphics = Microsoft.Maui.Graphics;

var windowCaptionBackgroundBrush = new uiMedia.SolidColorBrush(graphics.Colors.Transparent.ToWindowsColor());
this.WinUIApp.Resources["WindowCaptionBackground"] = windowCaptionBackgroundBrush;

From there we are free to use our custom MauiAppTitleBarTemplate title bar.

Last but not least, another solution is to get rid of the MauiAppTitleBarTemplate altogether and change the color of the WindowCaptionBackground brush directly. I think I will opt for that solution, because I have no need for a custom titlebar, besides the color.

P-S: You can also change the following resource brush "CloseButtonBackgroundPointerOver" to the color of your choice to prevent the WinUI close button from showing up in red under your actual MAUI close button.

Thank you all