Freigeben über

UWP Windows 10 App, TitleBar and Status bar customization

  • Artikel

"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

  • 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