WPF allows you to define pieces of Xaml as resources, and use them in multiple places in your application. This allows us to share things like styles and brushes across our whole application, making it look more consistent and easier to maintain (since changes need only be made in a single place). As applications grow the size of these resource sections can make them more difficult to work with and create contention amongst the development team as different people try to work on the same large resource file. Also we may wish to re-use some resources across different WPF projects. For the same reason it is desirable to split our C# or VB.NET applications into multiple files it is also desirable to do factor out our Xaml resources into multiple files. How can this be accomplished?
Separation of resources across multiple files can be fairly easily done using this technique which I first saw used in Robert Ingebretsen's "SimpleStyles" sample. The technique involves adding external resources to an existing resource (like your application resources, or the resources for a window or pannel) using the MergedDictionaries property of the ResourceDictionary.
Lets walk through a simple example that assumes we have a text block style we want to factor out into a separate file from our application resources. First we create a new Xaml file (in this case called TextStyle.xaml) so that our project structure is as shown
The content of the file is just a ResourceDictionary - and because the ResourceDictionary is the root element in the Xml file we need to define the default namespaces, which you would probably be more used to seeing on a new root-level Window or Page when you create a new Xaml file in Visual Studio. The contents of the resource dictionary is a perfectly normal WPF style.
Xaml Code (WPF Beta 2)
<ResourceDictionary
xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation
"
xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml
" >
<Style TargetType="{x:Type TextBlock}" x:Key="TextStyle">
<Setter Property="FontFamily" Value="Lucida Sans" />
<Setter Property="FontSize" Value="22" />
<Setter Property="Foreground" Value="#58290A" />
</Style>
</ResourceDictionary>
The second step is to merge this resource stored in an external file into one of the resource dictionaries in our application. For this example we'll merge it in to the Application.Resouces collection (located in the App.xaml file). This is done by adding the elements highlighted below which point to the TextStyle.xaml file we created.
Xaml Code (WPF Beta 2)
<Application x:Class="LearnWPF.FactoringResources.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Window1.xaml"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="TextStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<!-- other styles can appear in the resource dictionary too -->
<Style TargetType="{x:Type Button}" x:Key="ButtonStyle">
<Setter Property="Background" Value="#feca00" />
</Style>
</Application.Resources>
</Application>
We can now use the TextBlock style in the TextStyle.xaml file just like any other style in our Application.Resources dictionary
Xaml Snippet (WPF Beta 2)
<StackPanel>
<TextBlock Style="{StaticResource TextStyle}" Text="Sample Text" />
<Button Style="{StaticResource ButtonStyle}" Content="Button" />
</StackPanel>