Mitesh Sureja's Blog: WPF Resources

WPF resource system allows you to keep useful objects around you so you can reuse easily. There are multiple ways to define Resources in WPF. In this post I will explain all the ways where we can define and use resources. Resource element defines a resource dictionary and dictionary requires every item to have key, so we must provide key to every resource declared inside resource dictionary.

Declaring resource inside element’s resources property -

You can declare resources which are going to be used inside your current window those resources can be declared inside Window.Resources element. In fact almost every resource in WPF has resources property so you can set anywhere you want. But the resources are accessible to the element and its child elements. Resources declared at top element (root level element) can be accessible to every element in window. In below example I have declared resources in window.resources element so every elements of window will have access those resources.

<Window x:Class="WpfApplication1.WPFResourcesDemo"

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

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

Title="WPF Resources" Height="100" Width="300">

<Window.Resources>

<LinearGradientBrush x:Key="linearGradientforButton">

<GradientStop Color="Blue" Offset="0"/>

<GradientStop Color="White" Offset="0.5"/>

<GradientStop Color="Cyan" Offset="1"/>

</LinearGradientBrush>

<Style TargetType="Button" x:Key="ButtonStyle">

<Setter Property="Width" Value="150" />

<Setter Property="Height" Value="40" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="VerticalAlignment" Value="Top" />

<Setter Property="Margin" Value="10" />

</Style>

</Window.Resources>

<Grid>

<Button Name="MyButton"

Content="Click Me!"

Background="{StaticResource linearGradientforButton}"

Style="{StaticResource ButtonStyle}" />

</Grid>

</Window>

In above example, two resources are declared and both are used by one button. If you have multiple buttons in the same window, all the buttons will have access to the resources defined in window’s resources element. All the resource must be uniquely identified by x:key name inside resource dictionary. Similarly element can access those using StaticResource markup extension.

In WPF logical tree, almost every control has resource dictionaries. When any control uses resource, WPF look upward through the tree until it finds an object defined in resource with given key. In above example, Button’s background and style property uses resource from resource dictionary. So WPF will look upwards and it will find resource declared in window’s resource dictionary.

Declaring Resources in App.xaml -

As shown in above example, if control uses resource then WPF look upwards till root object e.g. window but if the resource is not declared at root level then it will look in Application.Resources element of App.xaml file. The resources are declared in app.xaml file will be accessible to all windows inside application. So when resources are used by multiple windows, app.xaml file will be the best suitable place to declare those resources.

Let’s have a look on below code.

<Window x:Class="WpfApplication1.WPFResourcesDemo"

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

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

Title="WPF Resources" Height="100" Width="300">

<Grid>

<Button Name="MyButton"

Content="Click Me!"

Background="{StaticResource linearGradientforButton}"

Style="{StaticResource ButtonStyle}" />

</Grid>

</Window>

app.xaml

<Application x:Class="WpfApplication1.App"

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

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

StartupUri="WPFResourcesDemo.xaml">

<Application.Resources>

<LinearGradientBrush x:Key="linearGradientforButton">

<GradientStop Color="Blue" Offset="0"/>

<GradientStop Color="White" Offset="0.5"/>

<GradientStop Color="Cyan" Offset="1"/>

</LinearGradientBrush>

<Style TargetType="Button" x:Key="ButtonStyle">

<Setter Property="Width" Value="150" />

<Setter Property="Height" Value="40" />

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="VerticalAlignment" Value="Top" />

<Setter Property="Margin" Value="10" />

</Style>

</Application.Resources>

</Application>

The output of this code will be the same as first example. In this example resources are declared in Application.Resources element of App.XAML file

Declaring resources in separate Resource Dictionary -

WPF allows you to keep your all the resources at single place called resource dictionary file. Resource dictionary file has root element called ResourceDictionary. If your application has lots of resources and you want declare those resources inside app.xaml the file will be too large and difficult to manage and also it is not good practice to place so many resources inside app.xaml. In this case you should go for separate file called ResourceDictionary. You should place different resources in multiple resources file and merge it in window. You can create multiple resource dictionary files and merge those files inside your main window. Let’s have a look on below code.

ResourceDictionary.Xaml

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

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

</LinearGradientBrush>

</Style>

</ResourceDictionary>

MainWindow.Xaml

<Window x:Class="WpfApplication1.WPFResourcesDemo"

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

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

Title="WPF Resources" Height="100" Width="300">

<Window.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="MyResourceDictionary.xaml" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<Button Name="MyButton"

Content="Click Me!"

Background="{StaticResource linearGradientforButton}"

Style="{StaticResource ButtonStyle}" />

</Grid>

</Window>

The output of this example is same as above two examples. In this example resources are placed inside separate ResourceDictionary file and in MainWindow resource dictionary merged in Window.Resources element.

Accessing Resources from code -

WPF resources can also be created or accessed using code. Inside code we need to find resource by key name using TryFindResoruce Method or FindResource method. Both methods used to find resources from resource dictionary the only difference is FindResource method will throw an exception if resource not found while TryFindResource Method will return null. Let’s have a look on below code.

private void MyButton_Click(object sender, RoutedEventArgs e)

{

MyButton.Background = (Brush)TryFindResource("linearGradientforButton");

}

In above code snippet, TryFindResource method will try to find “linearGradientforButton” resource from dictionary if found assign to background property and if not found then assign null to background property.

Hope you liked this article on WPF Resources. Please feel free to write feedback/comments in comment section below.

See also –

Styles in WPF

ControlTemplate in WPF

Triggers inWPF

DataBindingin WPF