IgorShare Thoughts and Ideas

Consulting and Training

WPF Skin Factory – or how to skin your application

Posted by Igor Moochnick on 06/19/2008

Here are a couple of very simple steps to follow to make your WPF application skin-friendly.

  1. Create an empty WPF Windows Application (or use or old one)
  2. Create a Skins folder and a subfolder for each separate skin (you’ll need it later if your skins become more complex)
  3. Add a Resource dictionary (Add –> New Item –> Resource Dictionary) into each skin folder.
    1. In this example we’ll create a Black skin with BlackResources.xaml and
    2. Green skin with GreenResources.xaml
  4. In the App.xaml add the following code in the <Application.Resources> section:
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- Use the Black skin by default -->
            <ResourceDictionary Source="Skins\Black\BlackResources.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

  5. Let’s start (for simplicity) with skinning of the main window background only.
  6. In each skin resource dictionary create a Brush resource:
  7. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     
        <!-- The Background Brush is used as the background for the Main Window -->
        <LinearGradientBrush x:Key="MainBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF2C952C" Offset="0"/>
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </LinearGradientBrush>
     
    </ResourceDictionary>

  8. In the window’s XAML bind the window’s background brush to the skin dynamic resource by it’s name (note that we have to use DynamicResource, since we’re planning to change it while the application is still running to let the customers to change the skin):
  9. <Window x:Class="SkinFactory.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300"
        Background="{DynamicResource MainBackgroundBrush}">
        
        <Grid>
            <Button Width="100" Height="100" Content="Toggle Skin" />
        </Grid>
        
    </Window>

  10. Let’s wire the “Toggle Skin” button with the functionality that will toggle between these two (Black and Green) skins:
  11.    1: private void ToggleSkin_Click(object sender, RoutedEventArgs e)
       2: {
       3:     var rd = new ResourceDictionary();
       4:  
       5:     string uriSkin;
       6:     if (_bIsBlackSkin)
       7:     {
       8:         uriSkin = @"Skins\Green\GreenResources.xaml";
       9:     }
      10:     else
      11:     {
      12:         uriSkin = @"Skins\Black\BlackResources.xaml";
      13:     }
      14:     _bIsBlackSkin = !_bIsBlackSkin;
      15:  
      16:     rd.MergedDictionaries.Add(Application.LoadComponent(new Uri(uriSkin, UriKind.Relative)) as ResourceDictionary);
      17:     Application.Current.Resources = rd;
      18: }

  12. Note: try to avoid hardcoding the resource dictionary path in the code. You can replace it either with a configuration file or with a simple file discovery.
  13. You have to make sure that the resource files will be located in the output folder. To do so you need:
    1. On the resource file properties set Build Action to Content
    2. Set the “Copy to Output directory” to “Copy if newer”
  14. Start the application.

You can take the sample source code here:

If you’ll toggle the button you’ll see the window background colors are changing.

skin_factory

About these ads

7 Responses to “WPF Skin Factory – or how to skin your application”

  1. Sven said

    Hi, this is exactly what I’ve been looking for for my own app. However, I’d rather have the skins embedded in the .exe file (instead of separate files). I’ve tried to use Application.GetResourceStream and XamlReader.Load to deserialize the ResourceDictionary but no go. Do you know how to do this ?

    Thanks for your time

  2. […] http://igorshare.wordpress.com/2008/06/19/wpf-skin-factory-or-how-to-skin-your-application/ […]

  3. […] http://igorshare.wordpress.com/2008/06/19/wpf-skin-factory-or-how-to-skin-your-application/ […]

  4. […] http://igorshare.wordpress.com/2008/06/19/wpf-skin-factory-or-how-to-skin-your-application/ […]

  5. Nafees said

    very nice example for beginer.

  6. Check out Mike Taulty’s Blog post – Blend Bits 10: Being More Resourceful (http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2010/09/17/blend-bits-10-being-more-resourceful.aspx)
    Great example on how to dynamically change your skin in Silverlight

  7. tricks acne tips…

    […]WPF Skin Factory – or how to skin your application « IgorShare Weblog[…]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: