UWP Windows 10 App, TitleBar and Status bar customization

"Hello World"!

Customize the title bar of your Universal App for Windows 10 is quite easy, but you need to write different code for PC and Mobile.  The class that allows you to customize the title bar:

• when running on a PC is called TitleBar
• when running on a Mobile is called StatusBar

Before to call the API you first need to check if it exists (true if you are running on that platform):

 //PC customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
{
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    if (titleBar != null)
    {
        titleBar.ButtonBackgroundColor = Colors.DarkBlue;
        titleBar.ButtonForegroundColor = Colors.White;
        titleBar.BackgroundColor = Colors.Blue;
        titleBar.ForegroundColor = Colors.White;
    }
 }

//Mobile customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{

    var statusBar = StatusBar.GetForCurrentView();
    if (statusBar != null)
    {
        statusBar.BackgroundOpacity = 1;
        statusBar.BackgroundColor = Colors.DarkBlue;
        statusBar.ForegroundColor = Colors.White;
    }
}

These are two different classes with a different set of properties and methods. While the TitleBar class allows you to change only its color scheme the mobile version is more complete; it allows you for example to hide the bar or even display a progress bar.

Remember that before to use any specific platform API you need to add a reference to the correspondent Extension:

• Windows Mobile Extensions for the UWP
• Windows Desktop Extensions for the UWP

• Anonymous
  March 08, 2016
  great information. thanks
• Anonymous
  April 03, 2016
  Great tip. What you can do if the BackGround color you want is almost the same as the X? The red color that appear when you hoverI mean, is there a way to change that BackGround color? Or at least change the mouse cursor
  • Anonymous
    May 13, 2016
    You can change the background/foreground/pressed/inactive/hover colors for all the buttons, but the ButtonHoverBackgroundColor does not work for the "close (X)" button.So you cannot change the "red" behavior
• Anonymous
  June 23, 2016
  I have one question because i am new to this where do i put this code? in app.xaml.cs ??
  • Anonymous
    September 14, 2016
    Where you like, I use it in the View's constructor (i.e: MainView())
• Anonymous
  July 21, 2016
  Hello, this works fine for PC, but the second part gives me an error that StatusBar is not present in the current context (Cannot resolve symbol StatusBar)
  • Anonymous
    September 14, 2016
    You need to add the reference to "Windows Mobile Extensions for the UWP"
• Anonymous
  August 17, 2016
  Thank you. Very useful information
• Anonymous
  August 20, 2016
  After add colour in UWP title bar in PC working great but in mobile it start getting white space on top in please of status bar. I want fully hide that white space from to help please ?
  • Anonymous
    September 14, 2016
    If I understood your question, to fill all the available space on mobile you can try with: ApplicationView.GetForCurrentView().TryEnterFullScreenMode();remeber to check for ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView") before to call it.
• Anonymous
  September 22, 2016
  Thank you for this helpful informations.
• Anonymous
  August 28, 2017
  found it very useful! thank you