Template 10 is a set of Visual Studio project templates for Windows 10 XAML / C# apps.
In my previous post I set the app theme to Light and found that the status bar was completely white on Windows 10 Mobile. The status icons were no longer visible.
Before we can make changes to the status bar we first need to add Windows Mobile Extensions for the UWP to our references:
In the Solution Explorer right click on References and then click Add Reference. In the left pane select Universal Windows and then Extensions from the drop down menu. In the right hand pane select Windows Mobile Extensions for the UWP and click OK.
Now we can customize the status bar by adding the highlighted code to App.xaml.cs.
public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
// TODO: add your long-running task here
//Set StatusBar background and foreground colors
var statusBar = StatusBar.GetForCurrentView();
if (statusBar != null)
statusBar.BackgroundOpacity = 1;
statusBar.BackgroundColor = Colors.Orange;
statusBar.ForegroundColor = Colors.White;
Next just add the required using statements as prompted by Visual Studio.
As you can see I set the background color to orange and the text to white:
As you can see, in MainPage.xaml, we have a Grid and three ColumnDefinitions with a “*” for the width. This means that each column gets one third of the width of the screen. I also have 7 RowDefinitions whose height is set to “Auto“. This means that they adjust their size according to their content.
We want our content to scroll up and down so we need to add a ScrollViewer:
So now we have a grid that can scroll up and down and we need to start putting content into each cell of the grid. Before we do that it pays to think about the properties of our content – we don’t want to manually specify each property in every grid right?
In App.xaml we can set properties under <Application.Resources> as follows. Let’s start with the text properties first:
As you can see we have our style based on GridCellStyle with TartgetType set as TextBlock– so all of the text we set will have the properties that we defined in App.xaml.
Similarly you can see that I also have a RectangleStyle with a TargetType set as Rectangle. This style has properties for the Width, Height and Margin of the rectangles that I am going to draw in the grid. Here are the rectangle style settings from App.xaml:
These are the first three rectangles that I defined – as you can see all I need to set in their position in the grid using Grid.Row and Grid.Column and the Fill color (in hexadecimal). You can just type the color name instead of the hexadecimal value if that meets your needs.
Again with the text for each grid cell I am just defining the grid position and the actual text to display:
The last item on my list is to force the use of the light theme. I did this because I think a color swatch looks best that way – but there are some caveats. For phones with AMOLED or similar screens this will impact battery life (if the app is used a lot).
To force the light theme I am using Jeff Wilcox Phone Theme Manager. To install it click Tools > NuGet Package Manager > Package Manager Console. Run the command below:
Now simply add the following to App.xaml.cs:
//Set theme to Light
That’s everything on our list done and even though it’s very simple I think that it looks good.
If this swatch is of use to you it is available in the Windows Phone Store here.