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

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

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.

image

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.

 

image

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.

image

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

Hope this helps !

Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.

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

Comments are closed.