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
Comments (11)

  1. Raimund Popp says:

    great information. thanks

  2. SuNcO says:

    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 hover

    I mean, is there a way to change that BackGround color? Or at least change the mouse cursor

    1. 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

  3. panoukos says:

    I have one question because i am new to this where do i put this code? in app.xaml.cs ??

    1. Where you like, I use it in the View's constructor (i.e: MainView())

  4. damiano says:

    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)

    1. You need to add the reference to "Windows Mobile Extensions for the UWP"

  5. Nils says:

    Thank you. Very useful information

  6. Shubham says:

    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 ?

    1. 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.

  7. Daniel says:

    Thank you for this helpful informations.

Skip to main content