How to apply custom color in #UWP apps Title Bar?

If you are a developer and building apps for Universal Windows apps, you might like to customize your app title bar to match your app theme. You can also change various colors of the buttons. Windows 10 SDK provides you to customize the title bar of Universal apps.

Today in this blog post, we will learn how to apply custom colors in apps built for Universal Windows Platform along with different other APIs exposed for it.

Windows 10 SDK provides you a sealed class named ApplicationViewTitleBar under the namespace Windows.UI.ViewManagement, which implements the interface IApplicationViewTitleBar and exposes various properties to handle the theme/color of the Title Bar. Using it you can set foreground color, background color, inactive color, pressed color and hover color.

Here you can find the properties exposed by this class:

namespace Windows.UI.ViewManagement

{

    [ContractVersion(typeof(UniversalApiContract), 65536)]

    [MarshalingBehavior(MarshalingType.Agile)]

    [Threading(ThreadingModel.Both)]

    public sealed class ApplicationViewTitleBar : IApplicationViewTitleBar

    {

        public Color? BackgroundColor { get; set; }

        public Color? ButtonBackgroundColor { get; set; }

        public Color? ButtonForegroundColor { get; set; }

        public Color? ButtonHoverBackgroundColor { get; set; }

        public Color? ButtonHoverForegroundColor { get; set; }

        public Color? ButtonInactiveBackgroundColor { get; set; }

        public Color? ButtonInactiveForegroundColor { get; set; }

        public Color? ButtonPressedBackgroundColor { get; set; }

        public Color? ButtonPressedForegroundColor { get; set; }

        public Color? ForegroundColor { get; set; }

        public Color? InactiveBackgroundColor { get; set; }

        public Color? InactiveForegroundColor { get; set; }

    }

}

To receive the instance of the UWP app Title Bar, just call ApplicationView.GetForCurrentView().TitleBar and you will get the handle of the bar, which is actually type of ApplicationViewTitleBar. Now once the title bar handle is available to you, you can customize various properties of it as mentioned above.

To set the application title bar color, set the BackgroundColor and ForegroundColor of the instance. This will actually set the color to the content area only. The buttons available in the bar will have the default color set by Windows. You can also customize that by setting ButtonBackgroundColor and ButtonForegroundColor of the instance.

Here is the code snippet for your reference:

// Get the instance of the Title Bar

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

// Set the color of the Title Bar content

titleBar.BackgroundColor = Colors.Blue;

titleBar.ForegroundColor = Colors.White;

// Set the color of the Title Bar buttons

titleBar.ButtonBackgroundColor = Colors.Blue;

titleBar.ButtonForegroundColor = Colors.White;

I hope the code was useful and you will be able to change the theme of your application’s title bar along with your app theme. You can also allow your users to dynamically set the entire theme of your application.

Don’t just stop here. Read my other posts and subscribe to my blog’s RSS feed and email newsletter to get the regular updates on new blog posts. I am also available on Facebook, Twitter and Google+. Follow me on those social networking sites to subcribe to my feed to get the updates that I share over there. Keep sharing! Keep learning and share your feedback always.