TitleBar color customizations don't work if titlebar is added to the UI

[brunosonnino]

Describe the bug

When you customize the titlebar button colors with something like this

if (AppWindowTitleBar.IsCustomizationSupported())
{
    var titleBar = AppWindow.TitleBar;
    titleBar.ForegroundColor = Colors.White;
    titleBar.BackgroundColor = ColorHelper.FromArgb(0xff, 0xb0, 0x0e, 0x25);
    titleBar.ButtonForegroundColor = Colors.White;
    titleBar.ButtonBackgroundColor = ColorHelper.FromArgb(0xff, 0xb0, 0x0e, 0x25);
    titleBar.ButtonHoverForegroundColor = Colors.White;
    titleBar.ButtonHoverBackgroundColor = ColorHelper.FromArgb(0xff, 0x82, 0x03, 0x1c);
    titleBar.ButtonPressedForegroundColor = Colors.White;
    titleBar.ButtonPressedBackgroundColor = ColorHelper.FromArgb(0xff, 0x82, 0x03, 0x1c);

    titleBar.InactiveForegroundColor = Colors.Black;
    titleBar.InactiveBackgroundColor = ColorHelper.FromArgb(0xff, 0xfe, 0xc1, 0xc1);
    titleBar.ButtonInactiveForegroundColor = Colors.Black;
    titleBar.ButtonInactiveBackgroundColor = ColorHelper.FromArgb(0xff, 0xfe, 0xc1, 0xc1);
}

The custom colors work if you don't add a TitleBar control to the UI. If you add one,the custom colors don't work anymore

The TitleBar doesn't need to have anything on it

Steps to reproduce the bug

• Create a Blank WinUI3 app
• Upgrade the WindowsAppSdk Nuget package to 1.6 experimental 2
• Change the project file to add

<WindowsSdkPackageVersion>10.0.19041.35-preview</WindowsSdkPackageVersion>

• Add this code in MainWindow.xaml.cs

public MainWindow()
{
    this.InitializeComponent();
    SetTitleBarColors();
}

private void SetTitleBarColors()
{
    if (AppWindowTitleBar.IsCustomizationSupported())
    {
        var titleBar = AppWindow.TitleBar;
        titleBar.ForegroundColor = Colors.White;
        titleBar.BackgroundColor = ColorHelper.FromArgb(0xff, 0xb0, 0x0e, 0x25);
        titleBar.ButtonForegroundColor = Colors.White;
        titleBar.ButtonBackgroundColor = ColorHelper.FromArgb(0xff, 0xb0, 0x0e, 0x25);
        titleBar.ButtonHoverForegroundColor = Colors.White;
        titleBar.ButtonHoverBackgroundColor = ColorHelper.FromArgb(0xff, 0x82, 0x03, 0x1c);
        titleBar.ButtonPressedForegroundColor = Colors.White;
        titleBar.ButtonPressedBackgroundColor = ColorHelper.FromArgb(0xff, 0x82, 0x03, 0x1c);

        titleBar.InactiveForegroundColor = Colors.Black;
        titleBar.InactiveBackgroundColor = ColorHelper.FromArgb(0xff, 0xfe, 0xc1, 0xc1);
        titleBar.ButtonInactiveForegroundColor = Colors.Black;
        titleBar.ButtonInactiveBackgroundColor = ColorHelper.FromArgb(0xff, 0xfe, 0xc1, 0xc1);
    }
}

• Run the project
  • The title bar has the colors
• Add a TitleBar to the UI
• Run the project
  • The title bar buttons lost the colors

This project has a working sample for the bug: https://github.com/brunosonnino/TitleBarBugs/tree/main/1%20-%20AddTitleBar

Expected behavior

The colors of the buttons should be kept

Screenshots

With no TitleBar in the UI

With TitleBar in the UI

NuGet package version

WinUI 3 - Windows App SDK 1.6 Experimental 2: 1.6.240701003-experimental2

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[github-actions]

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. Thank you!

Open similar issues:

• New TitleBar Caption Button Colors does not work properly (#9788), similarity score: 0.81

Closed similar issues:

• Custom Title Bar Does not honor Windowing classes (#8105), similarity score: 0.81

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

[ghost1372]

@brunosonnino this is working fine.
It seems you forgot to apply the title bar:

public MainWindow()
{
    this.InitializeComponent();
    ExtendsContentIntoTitleBar = true;
    SetTitleBar(AppTitleBar);
SetTitleBarColors();
}

<TitleBar Title="Hello" Subtitle="v1.2.3" x:Name="AppTitleBar"/>

[brunosonnino]

If you call SetTitleBarColors in the constructor, it doesn't work:

        public MainWindow()
        {
            this.InitializeComponent();
            ExtendsContentIntoTitleBar = true;
            AppWindow.TitleBar.BackgroundColor = Colors.Red;
            AppWindow.TitleBar.ForegroundColor = Colors.Yellow;
            SetTitleBar(titleBar);
            SetTitleBarColors();
        }

But if you call from a button, like you did, it works:

private void Button_Click(object sender, RoutedEventArgs e)
{
    SetTitleBarColors();
}

[brunosonnino]

If you use something like this, it also works:

public MainWindow()
{
    this.InitializeComponent();
    ExtendsContentIntoTitleBar = true;
    AppWindow.TitleBar.BackgroundColor = Colors.Red;
    AppWindow.TitleBar.ForegroundColor = Colors.Yellow;
    SetTitleBar(titleBar);
    Activated += MainWindow_Activated;
}

private void MainWindow_Activated(object sender, WindowActivatedEventArgs args) 
{
    DispatcherQueue.TryEnqueue(Microsoft.UI.Dispatching.DispatcherQueuePriority.Low, () => SetTitleBarColors());
    Activated -= MainWindow_Activated;
}