In this tutorial I will show you how to skin a WPF application in Expression Blend. The application you'll create will have a very simple UI but the concepts you'll learn will enable you to skin WPF applications with more expansive user interfaces.
Skinning is the ability to change the look and feel of an application and enabling your WPF app to be skinnable involves taking into account certain factors which you'll familiarize yourself with as you go along.Let's start skinning;
- Start Expression Blend and create a new WPF project named 'Skinning'. Ensure that the Language is set to Visual Basic in the Language combo box.
- Select the Window element in Objects and Timeline and in the Layout section of the Properties panel set the width to 400 and height to 300.
- Select the Rectangle tool from the Toolbox and draw out a rectangle on the window. Set the rectangle's Vertical Alignment to top.
- Rename the rectangle as 'Header' and give it a blue gradient Fill. Set its Stroke to No brush.
- Select the Window element and in the Brushes section of the properties panel set its Background to a gradient brush.
- Select the Button tool and draw a button in the Window element.
We will skin our app next by changing the current blue look to red.
Skinning involves making use of ResourceDictionaries that contain the
different looks and feels that you'd want for your application. A
ResourceDictionary is basically a collection of resources. A resource
can be any of the properties of an object or, in the case of a control
like a button, a style or a template. For a property to change when you
add a new ResourceDictionary it must be assigned a DynamicResource. A
DynamicResource changes at runtime when you switch from one
ResourceDictionary to another.
If you take a look at the xaml code for the application you notice that there are no DynamicResources assigned to any of the properties of the elements in the application. This shall change as we go along.
ResourceDictionaries & Resources
In the following steps we shall create ResourceDictionaries and resources.
- Click on the Resources tab to open the Resources panel and click on the 'Create new resource dictionary' button.
- In the New Item dialog change the name of the new ResourceDictionary to BlueSkin.xaml. Click on Ok. BlueSkin.xaml is added to the list in the Resources panel.
- Select the Window element in Objects and Timeline and open the Properties panel.
- Click on the 'Advanced options' button that is next to the Background property in the brushes section. Select Convert to New Resource from the context menu. This opens the Create Brush Resource dialog.
- In the Create Brush Resource dialog change the name to 'WindowBackground' and select the Resource dictionary option button. Ensure that you have BlueSkin.xaml as the intended target in the combo box. Click on Ok.
If you switch to xaml view you will notice that the Background property of the Window element is assigned a DynamicResource named WindowBackground.
- Select the rectangle we added. In the Properties panel click on the Advanced options button of the Fill property and select 'Convert to New Resource' from the context menu.
- Name the new resource as 'HeaderFill' and select the 'Resource dictionary' option button. Click on Ok.
- Select the Resources tab to open the Resources panel. Create a new Resource Dictionary and name it as 'RedSkin.xaml'.
- Select the Window element and change the gradient brush of its Background to a reddish gradient.
- Click on the 'Advanced options' button of the Background property and select Convert to new Resource from the context menu.
- In the Create Brush Resource dialog change the name to 'WindowBackground' and select the Resource dictionary option button. Select RedSkin.xaml from the combo box and click on Ok. Ignore the warning.
If you look in the Resources panel and expand both BlueSkin and
RedSkin.xaml, you notice that both resource dictionaries have resources
with the same name.
Since WindowBackground in BlueSkin is a DynamicResource it will be swapped with WindowBackground in RedSkin when we change the resource dictionary. If the names were different there would be no change in the background color since your application wouldn't know which resource to apply from the new resource dictionary.
- Select Header in Objects and Timeline and give its Fill a Red gradient.
- Click on the 'Advanced options' button of the Fill property and select Convert to New Resource from the context menu.
- In the 'Create Brush Resource' dialog change the name to HeaderFill and select the Resource dictionary option button. Select RedSkin.xaml from the combo box and click on Ok.
Now that we have completed creating our Resource Dictionaries lets
add the necessary coding to enable us to switch to the red skin at