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.
- Create an empty WPF Windows Application (or use or old one)
- Create a Skins folder and a subfolder for each separate skin (you’ll need it later if your skins become more complex)
- Add a Resource dictionary (Add –> New Item –> Resource Dictionary) into each skin folder.
- In this example we’ll create a Black skin with BlackResources.xaml and
- Green skin with GreenResources.xaml
- In the App.xaml add the following code in the <Application.Resources> section:
- Let’s start (for simplicity) with skinning of the main window background only.
- In each skin resource dictionary create a Brush resource:
- 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):
- Let’s wire the “Toggle Skin” button with the functionality that will toggle between these two (Black and Green) skins:
- 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.
- You have to make sure that the resource files will be located in the output folder. To do so you need:
- On the resource file properties set Build Action to Content
- Set the “Copy to Output directory” to “Copy if newer”
- Start the application.
If you’ll toggle the button you’ll see the window background colors are changing.