More on Triggers and Styles and Control Templates
(Page 1 of 5 )
Completing this four-part series, we continue our discussion of triggers and deepen our knowledge of templates. 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). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
Multi-Condition Data Triggers
Just as property triggers can be combined into “and” conditions using the MultiTrigger element, data triggers can be combined using the MultiDataTrigger element. For example, if we wanted to watch for the 10th move of the game, make sure it’s player “O,” and do something special, we can do so as shown in Example 5-29.
Example 5-29. A multi-data trigger
<?Mapping XmlNamespace="sys" ClrNamespace="System" Assembly="mscorlib" ?>
...
<Window ... xmlns:sys="sys">
<Style x:Key="MoveNumberStyle" TargetType="{x:Type TextBlock}">
...
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=PlayerName}" Value="O" />
<Condition Binding="{Binding Path=MoveNumber}">
<Condition.Value>
<sys:Int32>10</sys:Int32>
</Condition.Value>
</Condition>
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="Yellow" / >
</MultiDataTrigger>
</Style.Triggers>
</Style>
...
</Window>
The only thing about Example 5-29 that may seem a little strange is the use of the mapping syntax to bring in theSystem namespace from the mscorlib .NET assembly. We do this so that we can pass10as anInt32instead of as a string; otherwise, the multi-condition data trigger won’t match ourMoveNumber property correctly. The multi-condition data trigger in Example 5-29 sets the background of the move
number to yellow to connote a cause for celebration for this special move that regular tic-tac-toe doesn’t have, but you can use multi-condition data triggers for celebrations of your own kinds.
Event Triggers
While property triggers check for values on dependency properties and data triggers check for values on CLR properties, event triggers watch for events. When an event happens, such as a Click event, an event trigger responds by raising an animation-related action. While animation is challenging enough to deserve its own chapter (Chapter 8), Example 5-30 illustrates a simple animation that will transition a cell from solid yellow to white over five seconds when an empty cell is clicked.
Example 5-30. An event trigger
<Style TargetType="{x:Type Button}">
...
<Setter Property="Background" Value="White" />
<Style.Storyboards>
<ParallelTimeline Name="CellClickedTimeline" BeginTime="{x:Null}">
<SetterTimeline Path="(Button.Background).(SolidColorBrush.Color)">
<ColorAnimation From="Yellow" To="White" Duration="0:0:5" />
</SetterTimeline>
</ParallelTimeline>
</Style.Storyboards>
<Style.Triggers>
<EventTrigger RoutedEvent="Click">
<EventTrigger.Actions>
<BeginAction TargetName="CellClickedTimeline" />
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Adding an animation to a style requires two things. The first is a storyboard with a named timeline that describes what you want to happen. In our case, we’re animating the button’s background brush color from yellow to white over five seconds.
For any property being animated with a nested path, there needs to be an explicit property setting that creates the top level of the nesting. In Example 5-30, this means that we need aSetterelement for theBackgroundproperty. If the top level of the nesting isn’t created, there won’t be anything to animate at runtime.
The second thing you need is an event trigger to start the timeline. In our case, when the user clicks on a button with theCellButtonStyle style applied (all of them, in our case), we begin the action described by the named timeline in the storyboard.
As of this writing, if you have an event trigger and a multi-condition property trigger animating the same property—e.g., theBackgroundof aButton, make sure you put the multi-data trigger in the XAML file before the event trigger; otherwise, you’ll get a nonsensical error at runtime.
The results of the animation, showing various shades of yellow, through past clicks can be seen in Figure 5-13.
Figure 5-13. The event trigger and our fading yellow animation (Color Plate 10)
Property and data triggers let you set properties when properties change. Event triggers let you trigger events when events happen. While both are pretty different—e.g., you can’t set a property with an event trigger or raise an event with a property or data trigger—both let you add a degree of interactivity to your applications in a wonderfully declarative way with little or no code.
For the full scoop on event triggers, you’ll want to read Chapter 8.
Next: Control Templates >>
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.
|
|
