Skip to content

Latest commit

 

History

History
119 lines (100 loc) · 3.73 KB

README.md

File metadata and controls

119 lines (100 loc) · 3.73 KB

CSS in WPF

Introduction

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

Selector CSS WPF
Element Yes Yes
Id Yes Yes
Class Yes No

In this article 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 read first:

Intoduction to Attached Behavior in WPF

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

Creating Styles

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">
        <s:Double x:Key="FontSize">12</s:Double>
        <FontWeight x:Key="FontWeight">Normal</FontWeight>
        <FontFamily x:Key="FontFamily">$FontStyle</FontFamily>
    </ResourceDictionary>
</ResourceDictionary>

Extend/Inheritance

In SASS/CSS

%center {
    text-align: center;
}

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

.title-text {
    @extend %center;
    @extend %base-font;
    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 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"
        xmlns:local="clr-namespace:CSS"
        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.

Licence

This article, along with any associated source code and files, is licensed under MIT License