Windows 10 UWP – Template 10 Mobile Status Bar

Windows-Dev

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
            await NavigationService.NavigateAsync(typeof(Views.MainPage));
           
            //Set StatusBar background and foreground colors
            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))

            {
                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:

uwp-status-bar

Sources:

View story at Medium.com

https://stenobot.wordpress.com/2015/07/08/uwp-app-development-styling-the-mobile-status-bar/

https://blogs.msdn.microsoft.com/gianlucb/2015/10/08/uwp-windows-10-app-titlebar-and-status-bar-customization/

Advertisements

Windows 10 UWP – Setting a Light Theme in Template 10

Windows-Dev

Template 10 is a set of Visual Studio project templates for Window 10 XAML / C# apps. By default Template 10 uses the Dark theme.

If you need to switch the Light theme you can add the following code to App.xaml in <common:Bootstrapper:

RequestedTheme="Light"

To see this change in the designer, save changes and restart Visual Studio.

Windows Phone 8 Dev – Creating A Basic Color Swatch

Windows8-Phone-Logo

In this post I am going to go over how to quickly create a color swatch in Windows Phone 8. This particular app shows the colors for the Windows Phone 8 themes and their hexadecimal and RGB values.

This is our to-do list:

  • create a basic grid with rows and columns
  • define a style for the rectangles inside the grid
  • define a style for the text
  • force the app to use the light theme (optional)

The Windows Phone 8 themes consist of 20 colors:

WP8 Themes Accents

So I decided on a grid of 3 columns and 7 rows:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

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:

<ScrollViewer VerticalScrollBarVisibility="Auto">

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:

<Application.Resources>
        <local:LocalizedStrings xmlns:local="clr-namespace:HexColor" x:Key="LocalizedStrings"/>

        <!--Text Style for Grid-->
        <Style x:Key="GridCellStyle"
               TargetType="TextBlock">
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="TextAlignment"
                    Value="Center" />
            <Setter Property="Foreground"
                    Value="White" />
            <Setter Property="FontWeight"
                    Value="SemiBold" />
        </Style>

Here I have named my text style GridCellStyle and the TargetType is set to TextBlock. I have Setters for Horizontal and Vertical Alignment, Text Alignment, Foreground (color) and Font Weight.

To call on these properties use <StackPanel.Resources> in your MainPage.xaml like this:

<StackPanel>
<StackPanel.Resources>
                <Style BasedOn="{StaticResource GridCellStyle}"
                       TargetType="TextBlock" />
                <Style BasedOn="{StaticResource RectangleStyle}"
                       TargetType="Rectangle" />
            </StackPanel.Resources>
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid> ...

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:

        <Style x:Key="RectangleStyle"
               TargetType="Rectangle">
            <Setter Property="Width"
                    Value="125" />
            <Setter Property="Height"
                    Value="125" />
            <Setter Property="Margin"
                    Value="10" />
        </Style>

Now that we have our grid defined and our properties set up we can populate the grid cells. Starting with the rectangles we just need to define the colors and their position in the grid:

                    <!--Lime-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="0"
                               Fill="#FFA4C400" />

                    <!--Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="1"
                               Fill="#FF60A917" />

                    <!--Dark Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="2"
                               Fill="#FF008A00" />

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:

<TextBlock Text="Lime
#A4C400
RGB
(164,196,0)"
            Grid.Row="0"
            Grid.Column="0" />
<TextBlock Text="Green
#60A917
RGB
(96,169,23)"
            Grid.Row="0"
            Grid.Column="1" />
<TextBlock Text="Dark Green
#008A00
RGB
(0,138,0)"
            Grid.Row="0"
            Grid.Column="2" />

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:

Install-Package PhoneThemeManager

Now simply add the following to App.xaml.cs:

//Set theme to Light
ThemeManager.ToLightTheme();

That’s everything on our list done and even though it’s very simple I think that it looks good.

App Screenshot

If this swatch is of use to you it is available in the Windows Phone Store here.

Sources:

http://www.jeff.wilcox.name/2012/01/phonethememanager/

http://www.creepyed.com/2012/11/windows-phone-8-theme-colors-hex-rgb/