UWP - How to change title bar color

UWP - Change TitleBar Color

The following Universal Windows Platform application development tutorial demonstrates how we can programmatically customize/change the title bar color.

Here we will get the application view for the current view. Then we will get the title bar of the application view. After getting the title bar we will change the title bar’s various colors.

The ApplicationView class represents the active application view and associated states and behaviors. The ApplicationView class GetForCurrentView() method gets the view state and behavior settings of the active application. This method returns an ApplicationView instance that can be used to get and set app display properties.

The ApplicationView class TitleBar property gets the title bar of the app. This property value is an ApplicationViewTitleBar which is the title bar of the app.

The ApplicationViewTitleBar class represents the title bar of an app. The ApplicationViewTitleBar class BackgroundColor property gets or sets the color of the title bar background. So using this property the UWP developers can set the title bar background color. The Foreground color gets or sets the color of the title bar foreground.

The ApplicationViewTitleBar class InactiveBackgroundColor property gets or sets the color of the title bar background when it's inactive. The InactiveForegroundColor property gets or sets the color of the title bar foreground when it's inactive.

The ApplicationViewTitleBar class ButtonBackgroundColor property gets or sets the background color of the title bar buttons. The ButtonForegroundColor property gets or sets the foreground color of the title bar buttons.

The ApplicationViewTitleBar class ButtonHoverBackgroundColor property gets or sets the background color of a title bar button when the pointer is over it. The ButtonHoverForegroundColor property gets or sets the foreground color of a title bar button when the pointer is over it.

The ApplicationViewTitleBar class ButtonInactiveBackgroundColor property gets or sets the background color of a title bar button when it's inactive. The ButtonInactiveForegroundColor property gets or sets the foreground color of a title bar button when it's inactive.

The ApplicationViewTitleBar class ButtonPressedBackgroundColor property gets or sets the background color of a title bar button when it's pressed. The ButtonPressedForegroundColor property gets or sets the foreground color of a title bar button when it's pressed.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >
    <StackPanel Orientation="Vertical" Background="AliceBlue" Padding="50">
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI;
using Windows.UI.ViewManagement;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Get the application view title bar
            ApplicationViewTitleBar appTitleBar = ApplicationView.GetForCurrentView().TitleBar;

            // Set the title bar background and forground color
            appTitleBar.BackgroundColor = Colors.Crimson;
            appTitleBar.ForegroundColor = Colors.Snow;

            // Set the title bar inactive colors
            appTitleBar.InactiveBackgroundColor = Colors.DarkGray;
            appTitleBar.InactiveForegroundColor = Colors.LightGray;

            // Set the title bar button colors
            appTitleBar.ButtonBackgroundColor = Colors.DarkOrange;
            appTitleBar.ButtonForegroundColor = Colors.Gold;

            // Title bar button hover state colors
            appTitleBar.ButtonHoverBackgroundColor = Colors.Green;
            appTitleBar.ButtonHoverForegroundColor = Colors.GreenYellow;

            // Title bar button inctive state colors
            appTitleBar.ButtonInactiveBackgroundColor = Colors.DarkKhaki;
            appTitleBar.ButtonInactiveForegroundColor = Colors.Silver;

            // Title bar button pressed state colors
            appTitleBar.ButtonPressedBackgroundColor = Colors.Navy;
            appTitleBar.ButtonPressedForegroundColor = Colors.WhiteSmoke;
        }
    }
}