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}" />
16:
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">
5:
6: <!-- Merge in the Assets dictionary -->
7: <ResourceDictionary.MergedDictionaries>
8: <ResourceDictionary Source="Assets.xaml" />
9: </ResourceDictionary.MergedDictionaries>
10:
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>
22:
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>
32:
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>
44:
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