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

Implementation

Let’s look at our existing Button Definitions…

<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}" />

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.

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

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

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:

<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}" />

Style Setters

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


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

Buttons

Remove the Commonality from the buttons.

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

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…

Styles.png
Styles

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.

One thought on “Universal App Tutorials Part 16 : Styles”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s