Hello everyone,

Recently, I started playing a little with the new TitleBar for the UWP.
It allows you to change the colors of it (title bar and buttons), hide it to use some more space in your application or add your own custom buttons.

In my new application, Greek Wifi Finder, I just wanted to change the color of it and the code is simple and straightforward.

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.BackgroundColor = Color.FromArgb(100,230, 74, 25);
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.ForegroundColor = Colors.White;
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.ButtonBackgroundColor = Color.FromArgb(100, 230, 74, 25);
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.ButtonForegroundColor = Colors.White;

And the result is like this

Capture

As you can see, the color of the title bar changed.

Then, I tried to run the same app on my Windows 10 Mobile

Capture

The bar is still white. Well, I was pretty sure that it was not going to write my app’s name or color any button (as there isn’t any) as it does with windows, but I was hoping for it to paint the white space.
Then the Windows Phone 8.1’s StatusBar came in my mind and I tried to find it inside the Windows.UI.ViewManagement namespace but it wasn’t there.
After searching a bit, I had to add a new extension reference in my project. The Microsoft Mobile Extension SDK for Universal App Platform. You can find it under Reference Manager -> Windows Universal -> Extensions.

Voila, the StatusBar class appeared inside the Windows.UI.ViewManagement namespace.
Same logic as the TitleBar, I used the following code

Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundColor = Color.FromArgb(100, 230, 74, 25);
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundOpacity = 1;
Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ForegroundColor = Colors.White;

Capture

Yep that worked!
And I was pretty sure that I was ready to go now. Unfortunately, I was wrong.

I tried to run my app on Windows again and the following exception was thrown
  “Requested Windows Runtime type ‘Windows.UI.ViewManagement.StatusBar’ is not registered.”

The StatusBar class does not exist in the Windows Runtime, but the ApplicationView class exists in the Windows 10 Mobile. The only reason I can think, that Microsoft did it that way, is Windows 10 Continuum so ApplicationView will be used by phones too.
So how to fix it?

Another thing that came in my mind from the ‘old’ Windows 8.1 Universal apps was the use of pragma #ifs.
So I used something like

#if !WINDOWS_APP
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundColor = Color.FromArgb(100, 230, 74, 25);
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundOpacity = 1;
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ForegroundColor = Colors.White;
#endif


even if Visual Studio doesn’t have WINDOWS_APP as a Conditional compilation symbol under the Project Properties -> Build Tab.

UPDATE
#if WINDOWS_APP is not longer supported! (SDK Version 10.0.10166)
So I used the new static class ApiInformation to check if the current device has the type we need. (StatusBar)

if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundColor = Color.FromArgb(100, 230, 74, 25);
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundOpacity = 1;
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ForegroundColor = Colors.White;
}

That’s it! Everything is working now.
So the whole code I used is

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.BackgroundColor = Color.FromArgb(100,230, 74, 25);
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.ForegroundColor = Colors.White;
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.ButtonBackgroundColor = Color.FromArgb(100, 230, 74, 25);
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar.ButtonForegroundColor = Colors.White;

if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundColor = Color.FromArgb(100, 230, 74, 25);
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundOpacity = 1;
    Windows.UI.ViewManagement.StatusBar.GetForCurrentView().ForegroundColor = Colors.White;
}

Thanks for reading!
George

Advertisements