WinUI 3 Can't properly change the background colour of the titlebar

Question

My aim is to make the background colour of the title bar and the content inside the app to be the same colour, but that is not working.

I wanted to make everything of this colour #FF2B2B2B, the problem is while the content of the app is of the correct colour, the colour of the title bar is lighter than it should be, in fact the same issue happens with the default XAML colour Black but everything works fine with the default XAML colour Red.

MainWindow.xaml

<Window
x:Class="TItleBarBackground.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TItleBarBackground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid>
    <Grid.Resources>
        <SolidColorBrush x:Key="Colour" Color="#FF2B2B2B"/>
    </Grid.Resources>
    <Grid x:Name="AppTitleBar" Height="28" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="{StaticResource Colour}">
        <TextBlock Text="Title"/>
    </Grid>

    <Rectangle Fill="{StaticResource Colour}" Margin="0,40,0,0" />
</Grid>

MainWindow.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace TItleBarBackground
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            ExtendsContentIntoTitleBar = true;
            SetTitleBar(AppTitleBar);
        }
    }
}

score 3 · Accepted Answer · answered Oct 08 '22 at 01:45

Unfortunately, there's a known issue (bug) ongoing.

When they fix the issue, you'll need to override these:

WindowCaptionBackground
WindowCaptionBackgroundDisabled

Here's the code.

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <!-- Other merged dictionaries here -->
        </ResourceDictionary.MergedDictionaries>
        <!-- Other app resources here -->
        <Color x:Key="AppCommonBackground">#FF2B2B2B</Color>
        <SolidColorBrush x:Key="WindowCaptionBackground" Color="{StaticResource AppCommonBackground}"/>
        <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled" Color="{StaticResource AppCommonBackground}"/>
    </ResourceDictionary>
</Application.Resources>

MainWindow.xaml

<Window
    x:Class="TitleBars.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:TitleBars"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid RowDefinitions="Auto,*" Background="{StaticResource AppCommonBackground}">
        <Grid
            x:Name="AppTitleBar"
            Grid.Row="0"
            Height="28"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Top"
            Canvas.ZIndex="1">
            <TextBlock Text="Title" />
        </Grid>
        <TextBlock
            Grid.Row="1"
            Text="Body" />
    </Grid>
</Window>

Hello, Thank you for the answer by overriding those colour resources everything worked as I wanted. I guess AppTitleBar Background property is not being rendered properly while if it's done from those Microsoft colour resources it works fine. I am saying because based on what you said it appears that you're expecting your code to not work until Microsoft patch comes in but thankfully it works even right now. — uhlw32n2, Oct 09 '22 at 00:29
Thanks a lot for this answer, this fix helped me a lot. you are a life saver mate :) — Michael Stephen, Aug 07 '23 at 16:40

WinUI 3 Can't properly change the background colour of the titlebar

1 Answers1