Static And Dynamic Resources In WPF

Rikam Palkar
Jun 02, 2020

105.8k
0
3
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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);
}
}
}