More on Triggers and Styles and Control Templates - Control Templates and Styles
(Page 3 of 5 )
Now that we’re making some progress on the control template, let’s replicate it to the other buttons. We can do so by setting each button’s Template property by hand or, as is most common, we can bundle the control template with the button’s style, as in Example 5-32.
Example 5-32. Putting a control template into a style
<Window.Resources>
<Style TargetType="{x:Type Button}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Fill="Orange" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
</Window.Resources>
...
<!-- No need to set the Template property for each button -->
<Button ... x:Name="cell00" />
...
As Example 5-32 shows, theTemplateproperty is the same as any other and can be set with a style. Figure 5-17 shows the results.
Figure 5-17. Spreading the orange (Color Plate 12)
Still, the orange is kind of jarring, especially since the settings on the style call for a white background. We can solve this problem with template bindings.
Template Binding
To get back to our white buttons, we could hardcode the rectangle’s fill to be white, but what happens when a style wants to change it (such as in the animation we’ve now broken)? Instead of hardcoding the fill of the rectangle, we can reach out of the template into the properties of the control using template binding, as in Example 5-33.
Example 5-33. Template binding to the Background property
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="White" />
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Key="ButtonTemplate">
<Rectangle Fill="{TemplateBinding Property=Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
...
</Style>
A template binding is like a data binding, except that the properties to bind come from the control whose template you’re replacing (called the templated parent). In our case, things likeBackground,HorizontalContentAlignment, and so on, are fair game for template binding from the parent. And, like data binding, template bindings are smart enough to keep the properties of the items inside the template up to date with changing properties on the outside, as set by styles, animations, etc. For example, Figure 5-18 shows the effect of aliasing the rectangle’sFillproperty to the button’sBackgroundproperty with our click animation and mouse-over behavior still in place.
Figure 5-18. Setting the rectangle’s fill using property aliasing (Color Plate 13)
We’re not quite through yet, however. If we’re going to change the paint swatch that Figure 5-18 has become into a playable game, we have to show the moves. To do so, we’ll need a content presenter.
Next: Content Presenters >>
More XML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter five of the book Programming Windows Presentation Foundation, written by Chris Sells and Ian Griffiths (O'Reilly; ISBN: 0596101139). Check it out today at your favorite bookstore. Buy this book now.
|
|
