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.

 

How to apply custom colors for Title Bar of Universal Windows Platform apps? (www.kunal-chowdhury.com)

 

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.

 

Windows 10 Universal App - Set different color to Title Bar buttons (www.kunal-chowdhury.com)

 

Windows 10 Universal App - Title Bar (www.kunal-chowdhury.com)

 

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.

 


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter , Facebook , Google+ and LinkedIn . I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

0 comments


 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top