Change Apps Title Bar Colour And Enable Back Button In Windows 10 UWP

In Windows 10 by default the white title bars is available for all apps, sometimes we need to change for better UI. Using UI ViewManagement class we can get the application UI properties. So, I am going to get the title bar properties and change the colour using the following code.

  1. var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();  
  2.   
  3. appView.TitleBar.BackgroundColor = Colors.LightBlue;  
  4.   
  5. appView.TitleBar.ButtonBackgroundColor = Colors.LightBlue;  
  6.   
  7. appView.TitleBar.ForegroundColor = Colors.White;  
  8.   
  9. appView.TitleBar.ButtonForegroundColor = Colors.White;  
Place this code in app launching event in App.xaml.cs file as in the following,

Full code looks like the following code:

Code

Now run the app and see the title bar it looks like the following image,

run app

Enable back button in the app title bar Windows 10 UWP


In Windows 10 UWP the back button is disabled by default. If you need back button in the application title bar you need to enable it. I will show how to enable this button.

Write the followingcode to enable the back button.
  1. var view = SystemNavigationManager.GetForCurrentView();  
  2. view.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;  
Firstly, get the current view and enable the back button.

Now create event handler for handling the back button click.
  1. view.BackRequested += View_BackRequested;  
Add the following method to handle the back button click.
  1. private void View_BackRequested(object sender, BackRequestedEventArgs e)  
  2. {  
  3.    //do your task  
  4. }  
The full source code looks like the following,
  1. var view = SystemNavigationManager.GetForCurrentView();  
  2. view.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;  
  3. view.BackRequested += View_BackRequested;  
  4.   
  5. private void View_BackRequested(object sender, BackRequestedEventArgs e)  
  6. {  
  7.    //do your task  
  8. }  
Now run the app and see the output as in the following,

Demo

 

Next Recommended Readings