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
runtime.