Tag: windows10

Customize Title Bar Colors In Windows 10 WinJS Apps

In my previous post, I showed how to set the title bar color in Windows 10 C#/XAML apps. It’s easy to do the same thing in a Windows 10 Javascript app as well, the syntax is slightly different. I added this code to the main js file for the app (example: default.js), right before the app.Start() method call.

[javascript]
var titleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;
titleBar.backgroundColor = Windows.UI.Colors.blue;
titleBar.buttonBackgroundColor = Windows.UI.Colors.blue;
titleBar.foregroundColor = Windows.UI.Colors.white;
titleBar.buttonForegroundColor = Windows.UI.Colors.white;
[/javascript]

That’s all it takes.

Customize Title Bar Colors In Windows 10 XAML Apps

Windows 10 apps can have customized title bar colors (for example, the Mail and Calendar apps) instead of the default white (or accent color in an upcoming Windows 10 update). Changing the title bar color in a Windows 10 XAML app is easy. In the constructor for your main XAML file (ie..MainPage.xaml.cs), you get a reference to the title bar from the ApplicationView object’s GetForCurrentView() method. You can then set the colors of both the title bar and the window controls by setting the properties:

[csharp]
public MainPage()
{
this.InitializeComponent();
var t = ApplicationView.GetForCurrentView().TitleBar;
t.BackgroundColor = Colors.Indigo;
t.ForegroundColor = Colors.White;
t.ButtonBackgroundColor = Colors.Indigo;
t.ButtonForegroundColor = Colors.White;

}
[/csharp]

That’s all it takes. You could easily implement user customizeable title bar colors for your app as well.