Skinning a Windows Presentation Foundation (WPF) App in Blend

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;

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

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

  3. Select the Rectangle tool from the Toolbox and draw out a

    rectangle on the window. Set the rectangle’s Vertical Alignment to

    top.

  1. Rename the rectangle as ‘Header‘ and give it a

    blue gradient Fill. Set its Stroke to No brush.

  1. Select the Window element and in the Brushes section of the

    properties panel set its Background to a gradient brush.

 

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

  1. Click on the Resources tab to open the Resources panel and click

    on the ‘Create new resource dictionary‘ button.

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

  2. Select the Window element in Objects and Timeline and open the

    Properties panel.

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

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

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

  2. Name the new resource as ‘HeaderFill’ and select the ‘Resource

    dictionary’ option button. Click on Ok.

  3. Select the Resources tab to open the Resources panel. Create a

    new Resource Dictionary and name it as

    RedSkin.xaml‘.

  4. Select the Window element and change the gradient brush of its

    Background to a reddish gradient.

  1. Click on the ‘Advanced options’ button of the Background property

    and select Convert to new Resource from the context menu.

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

  1. Select Header in Objects and Timeline and give its Fill a Red

    gradient.

  1. Click on the ‘Advanced options’ button of the Fill property and

    select Convert to New Resource from the context menu.

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

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read