Carry object properties through to the template

You can use a template to create a unique look for a control. For example, every RadioButton control that uses the same template will look identical. However, what if you want each RadioButton control that uses a template to be a different color? Template binding makes it possible to design a customized control, but still enable some changes when you include the controls in your application.

For example, in the Zune3D sample that comes with Microsoft Expression Blend, the radio buttons at the bottom of the application have the same shape and highlights, but they are different colors. You can achieve this by binding the color of one of the objects in the template to the background color of the RadioButton control that uses the template.

Styled RadioButton objects in the Zune3D sample

The following properties are the ones most commonly template-bound:

Property name	Type
Background	Brush
Fill	Brush
Stroke	Brush
BorderBrush	Brush
Foreground	Brush
BorderThickness	Number
Width	Number
Height	Number

Some properties, such as OpacityMask, Font, FontSize, LayoutTransform, or RenderTransform, do not have to be template-bound. These properties will affect the elements in the template automatically. Also, Content and Text properties do not have to be template-bound if there is a ContentPresenter object in the template.

To carry object properties through to the template

1. Create or open the template of a control.

   For more information, see Create a reusable template to style a system control.

2. While editing the template of a control, in the Objects and Timeline panel, select the object that contains the property that you want to template-bind.

3. In the Properties panel, locate the property that you want to template-bind, click Advanced options , point to Template Binding, and then click the property that you want to bind to the template.

   For example, in the RadioButton template in the Zune3D sample that comes with Expression Blend, the Fill property of the inner shape is bound to the Background property of the RadioButton control that uses the template.

   

   In the Properties panel, a yellow bounding box appears around the property value to indicate that it is template-bound.

   

4. Now, when you draw another object that uses the sample template, you can change the property that you bound to the template (the Background property in the previous example) to affect the Fill property in the template.

   

To delete a template-binding

1. While editing the template of a control, in the Objects and Timeline panel, select the object that contains the property that is template-bound.

2. In the Properties panel, locate the property that is template-bound, click Advanced options , and then click Reset.

   You can now set the property to another value.

See also

Concepts

Styling a control that supports templates
Styling tips for common Silverlight controls
Styling tips for WPF Simple Styles

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.