XAML Resources

Every element in Silverlight contains a Resource property that maintains a dictionary of resources. This collection can hold any type, and a key is used to refer to each individual resource. Each element has access to its own resources as well as the resources in all its parents. For this reason, a common way to define resources is at the page level so that all elements within that page can re-use that resource. If a given resource will be used across the entire application (i.e. multiple pages), then it is put in the <Application.Resources> section of the App.xaml file.

To find a resource, Silverlight recursively searches up the element tree terminating at the <Application.Resources> section in App.xaml file.

As an example, suppose I re-use a custom brush on multiple elements on my page. I put it in the <UserControl.Resources> section where it can be accessed by all elements on my page. It is defined as:

<UserControl.Resources>
    <LinearGradientBrush x:Key="CustomBrush">
        <GradientStop Offset="0.00" Color="Yellow" />
        <GradientStop Offset="1.00" Color="Orange" />
    </LinearGradientBrush>
</UserControl.Resources>

Using a Resource in XAML:

Now that my CustomBrush has been defined, it can be re-used in XAML. A given element needs a way to refer to this resource in order to reuse it. This is accomplished by using a markup extension. Markup extensions are a specialized syntax to set a property in a non-standard way, and are recognized by curly braces. For example, let’s say the Grid element needs to use the CustomBrush defined above:

<Grid x:Name="outerGrid" Background="{StaticResource BackgroundBrush}"

In this example, we use a markup extension named StaticResource. Here’s (MSDN) some more information about static and dynamic resources

Using a Resource in Code:

In order to use CustomBrush in my code (e.g. C#), I can access the Resources property as a dictionary by using the key to index and retrieve the specific resource.

Grid outerGrid = new Grid();
LinearGradientBrush customBrush = 
    (LinearGradientBrush) this.Resources["CustomBrush"];
outerGrid.Background = customBrush;

I can even update my resource in code. If I wanted to change the color gradient of my CustomBrush, I would do so as follows:

LinearGradientBrush customBrush = 
    (LinearGradientBrush) this.Resources["CustomBrush"];
customBrush.GradientStops[0].Color = Colors.Brown;
customBrush.GradientStops[1].Color = Colors.Red;

The really nifty bit is that every element that uses this customBrush will automatically update to use the new colors.

Silverlight does not support dynamic resources (but WPF does), and as a result it is not possible to update the resource reference with a new object. For example, the following code is not allowed in Silverlight:

this.Resources["CustomBrush"] = new LinearGradientBrush();