Chapter 9

Skinning Controls

After completing this chapter, you will be able to:

  • Create and use styles for controls and visual elements.
  • Modify existing control templates and create custom control templates.
  • Use states to change the behavior of controls.
  • Create a theme for basic controls.
  • Use color, brush, and other types of resources.
  • Use implicit and key-based styles.
  • Optimize resources and styles.
  • Set template binding for object properties within custom templates.
Skinning is a common Microsoft Expression Blend task that enables designers to completely change the look and feel of default Microsoft Silverlight or Windows Presentation Foundation (WPF) controls. The tasks of Skinning range from simple styling, to creating and designing new control templates, which control the visual representation of elements in a unified way. With skinning, you can make controls of the same target type (buttons, sliders, and text boxes, for example) look and behave similarly throughout your application. These unified implicit styles apply to both WPF and Silverlight 4.

Structure of Common Silverlight Controls

Silverlight has several default controls that you can use and style in your applications, including:

  • Button
  • CheckBox and RadioButton
  • Slider
  • ListBox and ComboBox
  • ScrollBar and ScrollViewer
  • TextBox and PasswordBox
In addition, you’ll find more complex controls such as DatePicker, Chart, DataGrid, and DataForm that you can style as well. You can modify controls by changing their default appearance directly in Expression Blend, or you can focus on design by drawing everything first in Microsoft Expression Design and then importing the art or other assets into Expression Blend. By importing your artwork you can then use the Make Into Control command to convert drawing objects into a template for any control.

Creating and Using Styles

Styling is the easiest and most direct method of skinning. You can create styles for visual objects, panels, and controls in your application by using several methods, the most basic of which is to set properties that relate to the appearance of the object. Style properties differ according to element type. For example, a Border layout panel has a different set of style properties than a Button, a TextBox, an Ellipse, or a Path element.

Create Style Resource Dialog


Sometimes, creating styles for objects is insufficient. There are many situations in which you need a specific appearance for your controls. For example: you might want your CheckBox controls to look like creative checks , your Buttons to have round or custom shapes, or your TextBox controls to have inside shadows or torn borders—and all of these together might need a consistent color theme. To make all of these changes, you need something more powerful than styles. Fortunately, you can customize Silverlight and WPF controls by changing their control templates in Expression Blend. With templates, you can modify the structure of the control to which the template is applied. Together, styles and custom templates give you full control over the view.

Make Into Control Dialog Box

Creating Silverlight Themes

Sometimes you need to create a complete custom theme for controls used in your application. In these cases, you need all of the application's elements—buttons, text boxes, sliders, check boxes, and others—to have the same style, the same colors, and the same behavior in similar states. You can begin by creating graphic assets in a graphic editor and then convert your work to XAML files. Then you can add these files to your project and convert art elements that look like controls to real, working controls. You can separate colors, brushes, margins, and font settings, and then use them as resources throughout all of the controls in your application to provide a unified appearance.

Expression Blend Objects and Timeline

Template Binding

Sometimes custom templates require parameters that depend on the property values of the control itself. For example, suppose you need a Border inside a custom template to take on the same color as the Background of the control. That way, when you apply the template to a control with different Background properties, the result is a differently colored template. To do this, Expression Blend supports a feature called template binding, in which a template binds to a control, using the bound control’s properties as values for template objects. By binding parts of the template to a control, you effectively create parameters for the template.

Creating a Template Binding

You can easily make this a point to YOUR company OR hide it all together.