Home » Silverlight 3: Loading Merged Resource Dictionaries runtime

Silverlight 3: Loading Merged Resource Dictionaries runtime

By Alex van Beek
14 years ago
0 comments
Various

To customize the look of our application in Silverlight 3, we organize everything “look related” in Styles and put those styles in ResourceDictionaries. Usually by adding those styles in XAML to the Resources property of the current user control. In Silverlight 2 we would get huge XAML files with huge ResourceDictionaries, because there wasn’t any way to put a ResourceDictionary in its own file. With Silverlight 3 and Merged Resource Dictionaries, we can remedy this problem by putting Styles in a ResourceDictionary which has it’s own .xaml file. That .xaml file needs to have a build action of “Content” or “Resource”. With both of these options the application needs to be recompiled every time you want to change the look of your application. With the solution provided below, you can change the look of your application by changing the .xaml file of the ResourceDictionary and just by pressing F5 (refresh) you will see the changes applied to your Silverlight application.

The sample application

Before we’re going to take a dive into the code, we’re first going to take a look at the example application:

<UserControl x:Class="RuntimeStyles.MainPage"
    >="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    >="http://schemas.microsoft.com/winfx/2006/xaml"
    >="http://schemas.microsoft.com/expression/blend/2008" >="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  
  <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Ellipse Style="{StaticResource myEllipseStyle}" />
        <Rectangle Style="{StaticResource myRectangleStyle}" Grid.Column="1"/>   
  </Grid>
</UserControl>

Nothing too fancy here: A rectangle and an ellipse which both have their Style properties set. The interesting part is that both of the styles come out of different .xaml ResourceDictionaries, without merging those dictionaries in the XAML shown above. Below are both of the styles:

<ResourceDictionary
    >="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    >="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="myRectangleStyle" TargetType="Rectangle">
        <Setter Property="Fill">
            <Setter.Value>
                <SolidColorBrush Color="Blue"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Stroke">
            <Setter.Value>
                <SolidColorBrush Color="Red"/>
            </Setter.Value>
        </Setter>
    </Style> 
</ResourceDictionary>

<ResourceDictionary
    >="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    >="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="myEllipseStyle" TargetType="Ellipse">
        <Setter Property="Fill">
            <Setter.Value>
                <SolidColorBrush Color="Red"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Stroke">
            <Setter.Value>
                <SolidColorBrush Color="Blue"/>
            </Setter.Value>
        </Setter>
    </Style> 
</ResourceDictionary>

Both of these styles are in their own .xaml files, relative to the location of the .xap file of my Silverlight application. They are not contained in my Silverlight project:

And a screen shot of the application:

The StyleLoader class

It’s good OO practice to give each class one responsibility,  so I’ve put the code to load the styles at runtime in its own class. This class is called “StyleLoader” and the source is shown below:

using System;
using System.Net;
using System.Windows;
using System.Windows.Markup;
using System.Collections.Generic;
using System.Linq;
namespace RuntimeStyles
{
    public class StyleLoader
    {      
        public event EventHandler AllStylesLoaded;
        private List<ResourceDictionary> _allReadyLoaded;
        private ResourceDictionary _toMergeWith;
&nbsp; 
        public void LoadStyles(ResourceDictionary toMergeWith, Uri xamlUri, params Uri[] xamlUris)
        {
            if (_allReadyLoaded != null)
            {
                throw new InvalidOperationException("You have to wait before" +
                " the previous call has finished!");
            }
            _allReadyLoaded = new List<ResourceDictionary>(xamlUris.Length);
            _toMergeWith = toMergeWith;
&nbsp; 
            DownloadStyle(xamlUri);
            foreach (Uri downloadUri in xamlUris)
            {
                DownloadStyle(downloadUri);
            }
        }
&nbsp; 
        public void LoadStyles(Uri xamlUri, params Uri[] xamlUris)
        {
            LoadStyles(Application.Current.Resources,xamlUri, xamlUris);
        }
&nbsp; 
        private void DownloadStyle(Uri downloadUri)
        {
            WebClient wc = new WebClient();
            wc.DownloadStringCompleted += ParseAndAddStyles;
            wc.DownloadStringAsync(downloadUri);
        }
&nbsp; 
       private void ParseAndAddStyles(object sender, DownloadStringCompletedEventArgs e)
       {
           if (e.Error == null)
           {
               ResourceDictionary loaded = null;
               try
               {
                   loaded = XamlReader.Load(e.Result) as ResourceDictionary;
               }
               catch
               {
                   CleanUp();
                   throw;
               }
               if (loaded != null)
               {
                   if (_allReadyLoaded.Count == _allReadyLoaded.Capacity)
                   {
                       //This was the last call to complete
                       _toMergeWith.MergedDictionaries.Add(loaded);
                       foreach (ResourceDictionary dic in _allReadyLoaded)
                       {
                           _toMergeWith.MergedDictionaries.Add(dic);
                       }
                       CleanUp();
                       OnAllStylesLoaded(new EventArgs());
                   }
                   else
                   {
                       _allReadyLoaded.Add(loaded);
                   }
               }
               else
               {
                   CleanUp();
                   throw new InvalidOperationException("The loaded xaml was not a resource dictionary!");
               }
           }
           else
           {
               CleanUp();
               throw e.Error;
           }
       }
&nbsp; 
       private void CleanUp()
       {
           _toMergeWith = null;
           _allReadyLoaded = null;
       }
&nbsp; 
        protected virtual void OnAllStylesLoaded(EventArgs args)
        {
            EventHandler temp = AllStylesLoaded;
            if (temp != null)
            {
                temp(this, new EventArgs());
            }
        }
&nbsp; 
    }
}

I’ll only cover the important parts:

Line 15 –30: This method is the heart of the class. It accepts a resource dictionary to put the loaded styles in and one or more uri’s. These uri’s are the locations of the .xaml file you wish to load. The method is called LoadStyles, but can actually be used to load any ResourceDictionary. The method calls the DownloadStyle() method for each uri it receives, effectively creating a WebClient object for every uri. This means that all external ResourceDictionaries are downloaded in parallel. I keep track of how how many calls still have to complete by using the_allReadyLoaded list. You can not call this method again until all WebClient objects have completed their calls.
Line 32-35: This is just a convenience overload of above method. If you don’t want to supply a ResourceDictionary to load the styles in, the ResourceDictionary of the Application is used.
Line 44-87: This method is the completed event handler for the WebClient objects. Every time a WebClient call completes, the downloaded XAML string is parsed by using the XamlReader class and the resulting ResourceDictionary is added to the list of already loaded dictionaries. When the _allreadyLoaded list has used all of it’s capacity, the last WebClient request has returned and all the loaded dictionaries are merged and the AllStylesLoaded event is fired. I’m first gathering all the loaded dictionaries and then adding them in one go. This way, when one of the WebClient requests fail, I can leave the application in a consistent state with none of the resource dictionaries loaded. I thought about putting synchronization logic in this method, because all the WebClient calls are asynchronous, but the completed events of the different WebClient objects all fire on the UI thread. This means that the code in the ParseAndAddStyles method is executed by a single thread and no synchronization is needed.

Using the StyleLoader class

Below is the source of the MainPage file:

using System;
using System.Windows.Controls;
&nbsp; 
namespace RuntimeStyles
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            StyleLoader sl = new StyleLoader();
            sl.AllStylesLoaded += new EventHandler(sl_AllStylesLoaded);
            sl.LoadStyles(new Uri("Styles/MyEllipseStyles.xaml",UriKind.Relative),
                new Uri("Styles/MyRectangleStyles.xaml", UriKind.Relative));
        }
&nbsp; 
        private void sl_AllStylesLoaded(object sender, EventArgs e)
        {
            InitializeComponent();
        }
&nbsp; 
    }
}

The one thing that’s really important is that the call to load the styles must happen before the InitializeComponent() call. This is very important because in the InitializeComponent() call all components execute their bindings. These will of course fail because no resource dictionaries have been loaded if InitializeComponent() is called before the StyleLoader raises it’s AllStylesLoaded event. You can find the full application here. Go ahead and change some of the styles in the ResourceDictionary .xaml files in the web project. You only have to press F5 (refresh) and you will see your changes applied to your Silverlight application without recompiling.