Click here to Skip to main content
13,592,003 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

5.6K views
130 downloads
5 bookmarked
Posted 14 Sep 2017
Licenced CPOL

WPF Resource Dictionary Basics

, 14 Sep 2017
Rate this:
Please Sign up or sign in to vote.
I present a short introduction to resource dictionaries with examples.

Introduction

The resource dictionary is a simple way to simplify the coding of WPF views, but the syntax can be less than obvious. In this short tip, I present a brief description of the following:

  1. Defining constants within a resource dictionary within a view.
  2. Defining styles within a resource dictionary within a view.
  3. Using items in a resource dictionary in a separate file in the same assembly.
  4. Using items located in a resource dictionary in a separate assembly.

It is assumed that you have a basic understanding of WPF, including styles.

Background

The new WPF view designer soon learns that she wants to create controls that have the same look and feel, and that entering the same text time and time again is tedious. The solution of course is to use a resource dictionary, whereby common values such as the width of a button or the style for a group box are stored in a common area, and referenced by multiple controls.

This has the advantage that development is quicker as styles can be reused, the application has a more consistent look and feel as similar controls use the same style, and the application styles are easily modified as they are defined in a common location.

Defining A Constant

The following example defines a constant in a view's resource dictionary:

<Window x:Class="WpfResourceDictionaryDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:System="clr-namespace:System;assembly=mscorlib"     

        Background="#DCE8F3"

        Title="Resource Dictionary Demo Application"

        Height="350"

        Width="600">
    <Window.Resources>
        <ResourceDictionary>
            <System:Double x:Key="ButtonWidth">80</System:Double>
        </ResourceDictionary>
    </Window.Resources>
    <Grid Margin="10">//

The constant is called 'ButtonWidth', it is a double, and it has the value 80.

Using the constant is quite simple:

<Button Grid.Row="6" Grid.Column="0" Content="Press Me" 

Width="{StaticResource ButtonWidth}" HorizontalAlignment="Left"/>

Thus, the width of the control has been set equal to the value defined by 'ButtonWidth'. Note that the Double type is defined in the System namespace which references the mscorlib component.

Defining A Style

The following example defines a style in a view's resource dictionary:

<Window x:Class="WpfResourceDictionaryDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:System="clr-namespace:System;assembly=mscorlib"     

        Background="#DCE8F3"

        Title="Resource Dictionary Demo Application"

        Height="350"

        Width="600">
    <Window.Resources>
        <ResourceDictionary>
            <System:Double x:Key="ButtonWidth">80</System:Double>
            <Style x:Key="groupBoxStyle" TargetType="GroupBox">
                <Setter Property="Margin" Value="3"/>
                <Setter Property="Padding" Value="5,5,5,5"/>
                <Setter Property="Background" 

                Value="{StaticResource ResourceKey=backgroundBrush}"/>
                <Setter Property="BorderBrush" Value="Black"/>
            </Style>
        </ResourceDictionary>
    </Window.Resources>

The style called 'groupBoxStyle' can be applied to a group box as follows:

<GroupBox Header="Styles Example One" Style="{StaticResource groupBoxStyle}">
    <Label>Styles defined in the window XAML</Label>
</GroupBox>

The style is easily modified as follows:

<GroupBox Grid.Row="8" Grid.Column="0" 

Name="_borderBottom" Header="Override a resource dictionary style">
    <GroupBox.Style>
        <Style TargetType="GroupBox" BasedOn="{StaticResource groupBoxStyle}">
            <Style.Triggers>
                <DataTrigger Binding="
                {Binding ElementName=_checkBoxYellowBackground, Path=IsChecked}" 

                Value="true">
                    <Setter Property="Background"  Value="LightYellow" />
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=_checkBoxYellowBackground, 
                Path=IsChecked}" Value="false">
                    <Setter Property="Background"  Value="LightCoral" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </GroupBox.Style>
    <CheckBox Grid.Row="8" Grid.Column="0" 

    x:Name="_checkBoxYellowBackground" Content="Yellow Background"/>
</GroupBox>

Thus, the group box style element overrides the 'canned' style and sets the background colour according to the check state of a check box.

Creating A Resource Dictionary File

Clearly a view's resource dictionary is very useful, but what if we want multiple views to have the same resources? The answer is to add a resource dictionary to the project. This is no more than a file with one element called ResourceDictionary. Here is a simple example:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Brush x:Key="backgroundBrush">#DCE8F3</Brush>
    <Style x:Key="groupBoxStyleRedBorder" TargetType="GroupBox">
        <Setter Property="Margin" Value="3"/>
        <Setter Property="Padding" Value="5,5,5,5"/>
        <Setter Property="Background" Value="PaleVioletRed"/>
        <Setter Property="BorderBrush" Value="Blue"/>
        <Setter Property="BorderThickness" Value="1"/>
    </Style>
    <Style x:Key="borderRedNoLine" TargetType="Border">
        <Setter Property="Background" Value="PaleVioletRed"/>
        <Setter Property="BorderThickness" Value="0"/>
    </Style>
</ResourceDictionary>

Thus, the dictionary defines a brush constant, and two styles.

In order to use the resource dictionary items in our view, we must modify the Window.Resources element as follows:

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <System:Double x:Key="ButtonWidth">80</System:Double>
    </ResourceDictionary>
</Window.Resources>

Now we can use the items in the external resource dictionary as if they were defined in the view. For example:

<Border Grid.Row="2" Grid.Column="0" 

Style="{StaticResource borderRedNoLine}">
    <GroupBox Header="Styles Example Two" 

    Style="{StaticResource groupBoxStyleRedBorder}">
        <Label>Styles defined in a dictionary in the application assembly</Label>
    </GroupBox>
</Border>

Using A Resource Dictionary In A Separate Assembly

What if we have multiple applications which want to share the same styles? The answer is simple, we allow them to access a resource dictionary in a shared assembly, typically a class library.

Let's assume that we have created a separate class library called WpfExternalDictionary.dll containing a resource dictionary in a file called ResourceDictionary.xaml located in a folder called View. We add a reference to the file in the Window.Resources element as follows:

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceDictionary.xaml"/>
            <ResourceDictionary Source="pack:
            //application:,,,/WpfExternalDictionary;component/View/ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <System:Double x:Key="ButtonWidth">80</System:Double>
    </ResourceDictionary>
</Window.Resources>

The items in the resource dictionary may now be used as if they were defined in the view XAML.

Example Application and Class Library

I have created a simple demonstration application and a separate class library, which illustrate the concepts described above. The link is of course at the start of this article.

History

  • 14th September, 2017: First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Leif Simon Goodwin
United Kingdom United Kingdom
C#/WPF/C++ Windows developer

You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180618.1 | Last Updated 14 Sep 2017
Article Copyright 2017 by Leif Simon Goodwin
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid