One of the problems of using Universal Apps is that some components only exist in one platform and not in another. One such example is the StatusBar (formally known as SystemTray) for Windows Phone 8.1. For example, to change the colour of the StatusBar you have to use code rather than xaml. This makes life a bit awkward when you want to use a shared page. So to avoid this issue I’ve created a User Control (ChromeController.xaml) that exists in both platforms;
The ChromeController is just dropped into the shared page like any other control, except this one doesn’t have any visuals (I could have used a real control, but I’m being lazy).
User Control
<UserControl x:Class="UniApp.ChromeController" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" />
Snippet from shared page;
<Grid> <local:ChromeController Background="Pink" Opacity="0.6" />
For the Windows 8.1 variant the code does absolutely nothing, although in the long term it could easily control win81 only assets. However, for the Windows Phone 8.1 it reuses the elements Background and Opacity settings and sets the StatusBar to the same values.
public sealed partial class ChromeController : UserControl { public ChromeController() { this.InitializeComponent(); this.Loaded += ChromeController_Loaded; } void ChromeController_Loaded(object sender, RoutedEventArgs e) { var solidColorBrush = this.Background as SolidColorBrush; if (solidColorBrush != null) { var color = solidColorBrush.Color; var statusBar = StatusBar.GetForCurrentView(); statusBar.BackgroundOpacity = this.Opacity; statusBar.BackgroundColor = color; } } }
Here’s the result.
Cool stuff, of course to make it running in the Shared node, you need to hide the StatusBar handling in a preprocessing block
void ChromeControl_Loaded(object sender, RoutedEventArgs e)
{
#if WINDOWS_PHONE_APP
var solidColorBrush = this.Background as SolidColorBrush;
if (solidColorBrush != null)
{
var color = solidColorBrush.Color;
var statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
statusBar.BackgroundOpacity = this.Opacity;
statusBar.BackgroundColor = color;
}
#endif
}
No, you don’t need the directive. You have the User Control duplicated in both projects, in the win8 one it would make changes to whatever specific chrome you wanted
How status bar be hidden on Windows 10 Mobile?
It’s a bit different, you must have included the mobile extensions and then you can use; Windows.UI.ViewManagement.StatusBar.HideAsync()