How to change window Title bar Color in WinUI 3

Question

Been looking into docs, web and the gallery app. The code provided in the UI Gallery app is not working.

Title bar Default Color

Answer 1

You can find the documentation here.

For Windows 11:

MainWindow.cs

private bool SetTitleBarColors()
{
    // Check to see if customization is supported.
    // The method returns true on Windows 10 since Windows App SDK 1.2, and on all versions of
    // Windows App SDK on Windows 11.
    if (AppWindowTitleBar.IsCustomizationSupported())
    {
        if (m_AppWindow is null)
        {
            m_AppWindow = GetAppWindowForCurrentWindow();
        }
        var titleBar = m_AppWindow.TitleBar;

        // Set active window colors
        // Note: No effect when app is running on Windows 10 since color customization is not
        // supported.
        titleBar.ForegroundColor = Colors.White;
        titleBar.BackgroundColor = Colors.Green;
        titleBar.ButtonForegroundColor = Colors.White;
        titleBar.ButtonBackgroundColor = Colors.SeaGreen;
        titleBar.ButtonHoverForegroundColor = Colors.Gainsboro;
        titleBar.ButtonHoverBackgroundColor = Colors.DarkSeaGreen;
        titleBar.ButtonPressedForegroundColor = Colors.Gray;
        titleBar.ButtonPressedBackgroundColor = Colors.LightGreen;

        // Set inactive window colors
        // Note: No effect when app is running on Windows 10 since color customization is not
        // supported.
        titleBar.InactiveForegroundColor = Colors.Gainsboro;
        titleBar.InactiveBackgroundColor = Colors.SeaGreen;
        titleBar.ButtonInactiveForegroundColor = Colors.Gainsboro;
        titleBar.ButtonInactiveBackgroundColor = Colors.SeaGreen;
        return true;
    }
    return false;
}

For Windows 10, you need to take a different approach:

MainWindow.xaml

<Window
    x:Class="TitleBarIconExample.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:TitleBarIconExample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid RowDefinitions="28,*">
        <!--  Title bar  -->
        <Grid
            x:Name="AppTitleBar"
            Grid.Row="0"
            Background="LightGreen">
            <Image
                Width="16"
                Height="16"
                Margin="8,0"
                HorizontalAlignment="Left"
                Source="Assets/WindowIcon.png" />
            <TextBlock
                x:Name="AppTitleTextBlock"
                Margin="28,0,0,0"
                VerticalAlignment="Center"
                Style="{StaticResource CaptionTextBlockStyle}"
                Text="App title"
                TextWrapping="NoWrap" />
        </Grid>

        <!--  Contents  -->
        <Grid Grid.Row="1">
            <!--  Contents here.  -->
        </Grid>
    </Grid>

</Window>

MainWindow.xaml.cs

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        ExtendsContentIntoTitleBar = true;
        SetTitleBar(AppTitleBar);
    }
}

Let me also mention that the CommunityToolkit Labs is working on this.