What’s New In Silverlight 3 – Merged Resources

Silverlight 3 provides the ability to manage your various resources in dedicated files and folders, and then merge them together as needed. This allows for far easier scaling of applications and easier reuse of resources.

It is easiest to see this at work by creating a small example. I’ll open a new application and name it MergedResources1 and I’ll create this one in VB.

To keep life simple, I’m going to use some of the resources I used in the based-on-styles discussion. I’ll create a simple layout with three buttons:

   1: <Button x:Name="Button1"

   2:         Content="Standard"

   3:         Grid.Row="0"

   4:         Grid.Column="1"

   5:         Style="{StaticResource StandardButton}" />

   6:   <Button x:Name="Button2"

   7:         Content="Big"

   8:         Grid.Row="1"

   9:         Grid.Column="1"

  10:         Style="{StaticResource BigButton}" />

  11: <Button x:Name="Button3"

  12:         Content="Big Font"

  13:         Grid.Row="2"

  14:         Grid.Column="1"

  15:         Style="{StaticResource BigFontButton}" />


These are inserted into a two column grid.  Notice that three resources are called upon:

  • On line 5 we look for the StaticResource named Standard Button
  • Line 10 looks for the StaticResource named BigButton
  • Line 15 wants the StaticResource named BigFontButton

The BigFontButton style, however, uses a new resource:

   1: <Style x:Key="BigFontButton"

   2:     TargetType="Button"

   3:     BasedOn="{StaticResource BigButton}">

   4:    <Setter Property="FontFamily"

   5:        Value="Georgia" />

   6:    <Setter Property="FontSize"

   7:        Value="24" />

   8:    <Setter Property="Background"

   9:          Value="{StaticResource bBrush}" />

  10: </Style>

On lien 9 we declare that a BigFontButton will use a brush whose key is bBrush. 

Breaking Resources Into Files & Directories

In a Silverlight 2 application all these resources would be in App.xaml. As you move to larger and more complex applications it helps greatly to be able to organize your resources into folders. This allows you to deal with smaller files that are more clearly dedicated to a specific purpose; and it fosters reuse.

You accomplish this in Silverlight 3 by creating a folder of your resource files, and then merging in each resource dictionary where it is needed.  In this example, I’ll create a folder named resources, and place two files into it:


I’ll put the brush into Assets.xaml

   1: <ResourceDictionary

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

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

   4:   <LinearGradientBrush x:Key="bBrush">

   5:     <GradientStop Color="Red" Offset="0" />

   6:     <GradientStop Color="Yellow"

   7:                   Offset="0.5" />

   8:     <GradientStop Color="Blue"

   9:                   Offset="1" />

  10:   </LinearGradientBrush>

  11: </ResourceDictionary>

I could of course create a set of brushes in this file. 

With that in place, I can create my stiles in Styles.xaml and when I want to use the Brush I just merge in the library…

   1: <ResourceDictionary

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

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

   4:                     xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">


   6:   <!-- Merge in the Assets dictionary -->

   7:   <ResourceDictionary.MergedDictionaries>

   8:     <ResourceDictionary Source="Assets.xaml" />

   9:   </ResourceDictionary.MergedDictionaries>


  11:   <Style x:Key="StandardButton"

  12:          TargetType="Button">

  13:     <Setter Property="Width"

  14:             Value="100" />

  15:     <Setter Property="Height"

  16:             Value="35" />

  17:     <Setter Property="HorizontalAlignment"

  18:             Value="Left" />

  19:     <Setter Property="VerticalAlignment"

  20:             Value="Bottom" />

  21:   </Style>


  23:    <!--Based on style -->

  24:    <Style x:Key="BigButton"

  25:          BasedOn="{StaticResource StandardButton}"

  26:          TargetType="Button">

  27:       <Setter Property="Width"

  28:             Value="150" />

  29:       <Setter Property="Height"

  30:             Value="50" />

  31:    </Style>


  33:    <!--Based on style that uses brush from Asset.xaml-->

  34:    <Style x:Key="BigFontButton"

  35:        TargetType="Button"

  36:        BasedOn="{StaticResource BigButton}">

  37:       <Setter Property="FontFamily"

  38:           Value="Georgia" />

  39:       <Setter Property="FontSize"

  40:           Value="24" />

  41:       <Setter Property="Background"

  42:             Value="{StaticResource bBrush}" />

  43:   </Style>


  45: </ResourceDictionary>


You’ve seen the based-on syntax (lines 25 and 36) before; what is new here is merging in the dictionary defined in Assets.xaml (lines 7-9) and then using that resource on line 42. 

Root It In App.xaml

Styles.xaml brings in Assets, but we’ll use App.xaml to bring in Styles.

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

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

   3:              x:Class="MergedResources.App">

   4:     <Application.Resources>

   5:        <ResourceDictionary Source="Resources/Styles.xaml" />

   6:   </Application.Resources>

   7: </Application>


Since App.xaml is brought in automatically, we now have it all.


Previous:  Multi-select ListBox    Next: Navigation

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen Pluralsight & LinkedIn Learning courses. He was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

2 Responses to What’s New In Silverlight 3 – Merged Resources

Comments are closed.