CSS in WPF

• Download source code - 5.2 MB

Introduction

In the HTML world, we have CSS (Cascade Style Sheets) to style the web page.
In WPF, we have resource dictionary to define styling.
In the following table, you can compare the two types of styling:
 

In this tip, we will show how to add class selectors to WPF styling by using attached behavior.

Prerequisite

If you are not familiar with attached behavior in WPF, my recommendation is to first read the following article:

• Introduction to Attached Behaviors in WPF by Josh Smith

Visual Studio Designer behavior is as follows:

• Visual Studio 2022 WPF Designer correctly shows attached properties.
• Visual Studio 2019 WPF Designer does not correctly shows attached properties.

Creating Styles

By Using Variable(s)

In SASS/CSS:

$FontStyle: 'Poppins', sans-serif;

.base-font {
    font-family: $FontStyle;
    font-size: 12em;
    font-weight: 400;
}

In WPF:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:System;assembly=mscorlib">
    <FontFamily x:Key="$FontStyle">Resources/Poppins/#Poppins</FontFamily>
    <ResourceDictionary x:Key="BaseFont">
        <FontFamily x:Key="FontFamily">$FontStyle</FontFamily>
        <s:Double x:Key="FontSize">12</s:Double>
        <FontWeight x:Key="FontWeight">Normal</FontWeight>
    </ResourceDictionary>
</ResourceDictionary>

By Extend/Inheritance

In SASS/CSS:

%center {
    text-align: center;
}

%base-font {
    font-size: 12em;
    font-weight: 400;
}

.title-text {
    @extend %base-font;
    @extend %center;
    font-size: 28em;
}

In WPF:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:s="clr-namespace:System;assembly=mscorlib"
                    xmlns:ui="clr-namespace:CSS.UI">
    <ResourceDictionary x:Key="Center">
        <HorizontalAlignment x:Key="HorizontalAlignment">Center</HorizontalAlignment>
        <VerticalAlignment x:Key="VerticalAlignment">Center</VerticalAlignment>
    </ResourceDictionary>

    <ResourceDictionary x:Key="BaseFont">
        <s:Double x:Key="FontSize">12</s:Double>
        <FontWeight x:Key="FontWeight">Normal</FontWeight>
    </ResourceDictionary>

    <ResourceDictionary x:Key="TitleText">
        <ui:CSS x:Key="BaseFont Center"/>
        <s:Double x:Key="FontSize">28</s:Double>
    </ResourceDictionary>
</ResourceDictionary>

Using the CSS Style in Code

<Window x:Class="CSS.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:ui="clr-namespace:CSS.UI"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical">
        <TextBlock Text="Title" ui:X.CSS="TitleText"/>
        <TextBlock Text="Title Centered" ui:X.CSS="TitleText Center"/>
        <TextBlock Text="Body text" ui:X.CSS="BaseFont"/>
    </StackPanel>
</Window>

Important to remember:

• Key name is property name you want to set locally.
• CSS inheritance is applied first than local property.

History

• 1^st November, 2021: Initial version