Universal App Tutorials Part 16 : Styles

Using Styles to create a consistent User Interface is generally considered to be a best practice.  In much the same way as CSS is used on the Web, Styles in XAML provide a similar development experience.

Outcome

By the end of this post we will have implemented a Style to target our About and Settings Buttons on the Home Page. removing some of the duplication in the XAML definitions.

Prerequisites

• Morse Coder Part 15 (or a fork on GitHub);
• Visual Studio 2015 Community Edition;
• Windows 10.

Implementation

Let’s look at our existing Button Definitions…

[xml]
<Button Content="About" Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Center" FontSize="18" Command="{Binding AboutNavigateCommand}"/>
<Button Content="Settings" Margin="20" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" FontSize="18" Command="{Binding SettingsNavigateCommand}" />
[/xml]

There’s clearly a similarity there!

Let’s look at pulling the Margin, Horizontal and Vertical Alignments and the FontSize out into a style and setting the Styles on the Buttons instead.

For this example we’ll create an application wide Style, but the Style scope can also be on the page itself.

Style

Create a Style in the App.xaml file under Application.Resources, alongside the ViewModelLocator.

[xml]
<Application.Resources>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />

<Style x:Key="ButtonStyle" TargetType="Button"/>
</Application.Resources>
[/xml]

Looking at that closer, we’ve specified a Style with a key, ButtonStyle (I’d probably be more specific if using it in anger!), and a TargetType of Button, this can be any control type.

It’s currently empty, but let’s look at setting the new Style on the Buttons.

Buttons

Add the Style Property to one of the Button Controls:

[xml]
<Button Content="About" Style="{StaticResource ButtonStyle}" Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Center" FontSize="18" Command="{Binding AboutNavigateCommand}"/>
<Button Content="Settings" Margin="20" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" FontSize="18" Command="{Binding SettingsNavigateCommand}" />
[/xml]

Style Setters

We can now pull out the previously mentioned properties into the style using Setter Elements.

[xml]

<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Margin" Value="20" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontSize" Value="18" />
</Style>

[/xml]

Buttons

Remove the Commonality from the buttons.

[xml]
<Button Content="About" Style="{StaticResource ButtonStyle}" Command="{Binding AboutNavigateCommand}"/>
<Button Content="Settings" Grid.Column="1" Command="{Binding SettingsNavigateCommand}" />
[/xml]

There’s significantly less bloat in the Page definition now.  It’s a good idea to do this wherever possible.  The Button Definition is now only concerned with specific Properties, i.e. the Command the button refers to, it’s location on the page, and the Button Text.

This will give you…

Note the difference between the buttons, it’s exactly what you would expect given that one has no properties or style assigned to alter it from the default, but you can see that the style is being correctly applied to the About Button.

Add the style in to the Settings Button to even it up.

Summary

Where are we?

• We created a Style;
• We assigned it to the Button;
• We cleaned up the Button Xaml Definitions.

Where are we heading?

• making the app User Experience (UX) more usable;
• adding some more functionality to our About Page;
• methods of serialising POCOs to Application Settings.

As usual the code is available on Github.