Microsoft Expression, Digital Memories, Media and other fun stuff

Themed Applications using Resource Dictionaries in Expression Interactive Designer

Switching themes in an application can be achieved by creating multiple external resource dictionaries and ensuring that styles and/or templates defined in these resource dictionaries contain identical names.  The following example demonstrates how to switch “the look” of your application on the fly:

The sample walks through creating two styles for a button. Each style has the same name and same target, but the different “same named” styles are stored in two separate resource dictionaries. The application can then switch the style of the button at run time by loading and unloading respective resource dictionaries:

Setting up:

1. Launch Expression Interactive Designer
2. File->SaveProjectAs: “ThemeSwitching”
3. Create 2 external resource dictionaries by clicking File->New->ResourceDictionary twice.
4. Expand the Project Palette and notice the new ResourceDictionary1.Xaml in the list of files
5. Rename “ResourceDictionary1.Xaml” to “ResourceGreen.xaml” and ResrouceDictionary2.Xaml to “ResourceBrown.Xaml”
6. Ensure the Resource Palette is viewable (View->Resources)
7. On the resource palette, click “Link To Resources” and select “ResourceGreen.xaml”  and “ResourceBrown.Xaml”

Creating a Theme with a style stored in a resource dictionary:

1. Draw a button on the scene
2. Rename the button “greenThemeButton” and change the button content to “Switch to Green” rather than “Button”.
3. Right mouse click the greenThemeButton in the timeline and click: Edit Style->Edit a Copy of  the Style to bring up the Create Style Resource Dialog
4. On the Create Style Resource Dialog, Set “Define in:” option to be “other document” and select “ResourceGreen.xaml” from the dropdown.

5. After accepting the Create Style Resource Dialog, Interactive Designer leaves you in Style Editing Mode. Using the appearance palette, change the back color of the button to be green.
6. Now switch back to Window1.xaml and notice the button style has been applied to “greenThemeButton”

Creating a second theme:

1. First, break the current link to “greenThemeButton” by going to the Resources palette and deleting the link.  A dialog will appear asking what to do with the style from ResourceGreen.xaml that is currently applied to greenThemeButton. Click the “Don’t fix” option. After accepting the dialog, notice that the button is no longer green. This is expected and will reappear whenever we reestablish the link to the ResourceGreen.xaml resource.
2. Draw a second button on the scene and change the button content to “Switch to Brown” rather than “Button”.
3. Rename the button “brownThemeButton” and
4. Right mouse click the brownThemeButton in the timeline and click: Edit Style->Edit a Copy of  the Style to bring up the Create Style Resource Dialog
5. On the Create Style Resource Dialog, Set “Define in:” option to be “other document” and this time select “ResourceBrown.xaml” from the dropdown so that the style is saved in the ResourceBrown.Xaml dictionary. IMPORTANT: be sure to name the key “ButtonStyle1” just as it was in the ResourceGreen.xaml.
6. Using the appearance palette, change the buttons background to be a brown color.
7. Switch back to the design view of Window1.xaml. Note that both buttons are now brown. This is because each button has “ButtonStyle1” applied to it.

To test resource switching at design time, try the following:

1. Delete the link to the ResourceBrown.Xaml in the Resources palette,
2. Now link to ResourceGreen.xaml – the buttons will now turn green.

To get the buttons to do the switching at run-time, from the project palette double click window1.xaml.cs to open an external code editor and paste the following code inside the Window1 class:

public Window1()

{

      this.InitializeComponent();

      // Insert code required on object creation below this point.

this.greenThemeButton.Click += this.SwitchTheme;

      this.brownThemeButton.Click += this.SwitchTheme;

}

private void SwitchTheme(object sender, EventArgs e)

{

      string source = null;

      if (sender == this.greenThemeButton)

      {

            source = "ResourceGreen.xaml";

      }

      else if (sender == this.brownThemeButton)

      {

            source = "ResourceBrown.xaml";

      }

      if (source != null)

                  {

                        ResourceDictionary resourceDictionary = new ResourceDictionary();

                        resourceDictionary.Source = new Uri(source, UriKind.Relative);

                        // if you want to have application level resources (rather than just window), change this.Resources to Application.Current.Resources

                        this.Resources.MergedDictionaries.Clear();

                        this.Resources.MergedDictionaries.Add(resourceDictionary);

                  }

}