This post is a part of a series of posts about the Social Media Dashboard Sample. This post was written by Dag König. For an introductionary blog post, click here.

How to style your app is a rather big topic. I will in this blog post concentrate on a couple of important styling features that we use in SMD.

But first…

The difference between a Style and a Template

A style controls the individual properties of a control. A template on the other hand describes how the control is build, which controls it uses.

For example, use a style to change the font used to display text. Use a template to describe how to render items in a listbox.

Styling in Social Media Dashboard

We try to style everything, but we have not done it everywhere. (This is often because of some laziness.)

We store all styles in separate files that we merge together in App.xaml.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Common/Styles/StandardStyles.xaml"/>
            <ResourceDictionary Source="Common/Styles/SpecificAppStyles.xaml"/>
            <ResourceDictionary Source="Common/Styles/CommonAppStyles.xaml"/>
            <ResourceDictionary Source="Common/Styles/OriginalStyle.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

We use the attribute BasedOn to inherit from other style. Here is an example from StandarStyles.xaml.

<Style x:Key="BasicRichTextStyle" TargetType="RichTextBlock">
       [...]
</Style>

<Style x:Key="BaselineRichTextStyle" TargetType="RichTextBlock" 
       BasedOn="{StaticResource BasicRichTextStyle}">
       [...]
</Style>

The above style has a key, which mean that it is a named style. You can also declare default styles for a TargetType. The difference is that you don’t declare the x:Key attribute.

<Style TargetType="TextBlock">
    <Setter Property="FontSize" Value="20" />    
</Style>

You can also define resources such as fonts and colors and then use them in styles. This is a good solution if you, for example, only want define the background color in one place. Here is an example where we define the default font in the app.

<FontFamily x:Key="AppFontFamily">Segoe UI</FontFamily>

Then we use it in a style where we define the default style for a TextBlock.

<Style TargetType="TextBlock">
    <Setter Property="FontFamily" Value="{StaticResource AppFontFamily}" />    
</Style>