Static And Dynamic Resources In WPF

Introduction

In this article, you will learn how to define static & dynamic resources, how to utilize them in an application or single-screen wide, and how to load multiple resource files together.

What are Resources?

Resources are stored temporarily somewhere so that we can reuse them when we need them.

Just like cached memory in the CPU. It stores frequently used data in the cache for faster access, and it loads data from the cache instead of fetching it from RAM or HDD.

The same concept exists in WPF: we store data in UI (Screen) i.e. in the same XAML or some common XAML from where other UI pages can load its data.

Advantages

Re-usability, just define it once in a common file and use it in multiple XAMLs.
Store data locally, i.e. in the same window, if usage scope is the same window or in some common file is usage scope is global i.e. entire application.
Or you can define it inside a panel such as Grid, Stack panel, etc.

So let's get down to it.

WPF has 2 types of resources.

Static Resource
Dynamic Resource

How to declare: here we can declare Resources as per their usage scope. There are 4 ways:

Window level resources:

<Window.Resources>
<Thickness x:Key="MarginTop">0 5 0 0</Thickness>
</Window.Resources>

Panel level resources:

<Grid.Resources>
<Thickness x:Key="MarginTR">0 5 5 0</Thickness>
</Grid.Resources>

Application-level resources

Go to the application's App.Xaml

<Application.Resources>
<Thickness x:Key="MarginTR">0 5 5 0</Thickness>
</Application.Resources>

Resource Dictionary

Right-click on a project and add a resource dictionary:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:A">
<Thickness x:Key="MarginTR">0 5 5 0</Thickness>
</ResourceDictionary>

Once you are finished with defining a ResourceDictionary, you can add it inside a App.xaml if you wanted to use it across the application.

Edit App.Xaml as follows.

The advantage here is that you can add multiple resource dictionaries to an application.

<Application x:Class="A.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:A"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ResourceDictionaryMargins.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

If you want to keep your scope to your Window or UserControl, then update Window.Resources.

<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ResourceDictionaryMargins.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>

How to Use

It's very simple, just use StaticResource or DynamicResource tag, as per the application's requirements.

Margin="{StaticResource MarginTop}"

Let's go ahead and create a WPF application.

Static Resource

It will not change once it's assigned and they are applied at the compiled time only.

Add 2 static resources, one for button's background & another for the button's border.

<Window x:Class="A.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:A"
mc:Ignorable="d"
Title="MainWindow" Height="150" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="SolidAquamarine" Color="Aquamarine"/>
<SolidColorBrush x:Key="SolidBlack" Color="Black"/>
</Window.Resources>
<Grid x:Name="MainGrid">
<Button x:Name="SubmitButton"
Background="{StaticResource SolidAquamarine}"
BorderBrush="{StaticResource SolidBlack}"
Content="Submit"
Height="20"
Width="100"/>
</Grid>
</Window>

As you can see, the .NET framework does not wait until code execution, you can see changes at compile-time only.

Dynamic Resource

It will change even after its being used. The concept is the same as data binding in WPF if the value of the bound property is changed.

So is the value on UI.

Change XAML as follows: added a new button.

<Window x:Class="A.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:A"
mc:Ignorable="d"
Title="MainWindow" Height="150" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="SolidAquamarine" Color="Aquamarine"/>
<SolidColorBrush x:Key="SolidBlack" Color="Black"/>
</Window.Resources>
<Grid x:Name="MainGrid">
<StackPanel VerticalAlignment="Center">
<Button x:Name="SubmitButton"
Background="{StaticResource SolidAquamarine}"
BorderBrush="{StaticResource SolidBlack}"
Content="Submit"
Height="20"
Width="100"/>
<Button x:Name="ExitButton"
Background="{DynamicResource ButtonExitBackgroundColor}"
BorderBrush="{DynamicResource ButtonExitBorderColor}"
Margin="0 10 0 0"
Content="Submit"
Height="20"
Width="100"/>
</StackPanel>
</Grid>
</Window>

Also, add 2 resources in the code behind.

using System.Drawing;
using System.Windows;
using System.Windows.Media;
namespace A
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel();
this.Resources["ButtonExitBackgroundColor"] = new SolidColorBrush(Colors.LightGray);
this.Resources["ButtonExitBorderColor"] = new SolidColorBrush(Colors.Black);
}
}
}

Now, have a look. Color is not applied on the 2nd button at compile-time, as the .NET framework resolves it at runtime.

Now run the project to see the magic.

Hurray! Color has been applied on the 2nd button as expected.

You can define DynamicResource in XAML as well, but it will resolve at runtime only.

<StackPanel VerticalAlignment="Center">
<Button x:Name="SubmitButton"
Background="{StaticResource SolidAquamarine}"
BorderBrush="{StaticResource SolidBlack}"
Content="Submit"
Height="20"
Width="100"/>
<Button x:Name="ExitButton"
Background="{DynamicResource SolidAquamarine}"
BorderBrush="{DynamicResource SolidBlack}"
Margin="0 10 0 0"
Content="Submit"
Height="20"
Width="100"/>
</StackPanel>

I hope this article has cleared your confusion between static and dynamic resources in WPF.

Please apply them to achieve reusability in your projects.

Happy Coding!

If you have any queries, feel free to connect with me @