How to apply custom color to the Title Bar in Windows 10 Universal Apps ?

By | October 9, 2015

If you are developing a Windows 10 Universal Apps and want to play around with the Title Bar of your app, you can easily do that. There are set of APIs that can help you to deal with playing around Title Bar. Instead of having default color of title bar, you can apply your own colors. Not only with colors, you can even customize the overall appearance of the Title bar.


This is often useful when you want to match a color theme with your overall app along with the title bar. For an example, the “Calendar” app.  The title bar appearance is different than the default title bar styles.



Must Read : How to display the back button in the Windows Universal APPs title bar ?

So here is how you can customize the title bar for your own applications. The ApplicationView class represents the active view of the application and all the associate states. ApplicationView.getForCurrentView() methods use to get the app view for the current app that returns an instance of ApplicationView . Now you can use all the associated properties for the current view, and TitleBar is one of them.

Include the following namespace

using Windows.UI.ViewManagement;

and here the snippet of the code to change the title bar color.

               var titleBar = ApplicationView.GetForCurrentView().TitleBar;

            // Title Bar Content Area
            titleBar.BackgroundColor = Colors.DarkBlue;
            titleBar.ForegroundColor = Colors.White;

            // Title Bar Button Area
            titleBar.ButtonBackgroundColor = Colors.DarkBlue;
            titleBar.ButtonForegroundColor = Colors.White;

This is how it will look like – A blue background title bar for your application.


There are several sets of properties that you can change for TitleBar.

Hope this helps !

2 thoughts on “How to apply custom color to the Title Bar in Windows 10 Universal Apps ?

  1. Pingback: Visual Studio – Developer Top Ten for Oct 13th, 2015 - Dmitry Lyalin

  2. Pingback: How to place custom XAML content in the Windows Universal app’s Title Bar ?

Comments are closed.