winui-3titlebarwindows-app-sdkcustom-titlebar

How to change window Title bar Color in WinUI 3


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

Title bar Default Color


Solution

  • 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.