UWP Windows 10 App, TitleBar and Status bar customization

  • Article

"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