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);
        }
    }
}

Answer 1

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>