Triggers allow you to change attributes of an element when a specific action occurs. For example, you can change the font color of text when the mouse hovers over it, or change the width of a button once it has been clicked. Triggers can act on single instances of an element, or affect an entire class of elements.
Triggers are conditional. They are essentially a way to implement standard if...then logic without writing external code. In other words, a trigger evaluates an attribute and if the current value of that attribute matches the value specified by the trigger, then the style is applied. If the cursor moves over a Button, then change the background to green.
Example 5-7 defines a style that targets all elements of type Button. The code adds a TRigger that will fire when the property Button.IsMouseOver is TRue. Two Setter elements define the attributes we wish to change when the condition of the trigger is met. In this case, it changes the foreground of the Button to green and the background to red.
Example 5-7. Using a Trigger to modify the appearance of Button elements
Example 5-7 will modify the appearance of all Button elements declared in the page. To target only a specific Button, you must reference the style from the Button element. To do this, you must add a key name to the trigger and declare it as the Style attribute of the Button. The resulting code is shown in Example 5-8.
Example 5-8. Using a Trigger to modify the appearance of a single Button
Example 5-9 demonstrates how to declare TRiggers local to an element by defining the TRiggers within the local element's Resources attribute. As mentioned previously, local resources override global resources, so these resources will be applied to the element in which they are defined, but not to any others.
Example 5-9. Declaring a local Trigger
Triggers can be used to modify the styles of specific elements, or they can be more generalized. By defining the TRigger's Property attribute as Control.IsMouseOver, the trigger can target any element that derives from Control. Assigning the Style attribute of controls as ButtonTriggers will then apply the conditional styling to any control. Example 5-10 shows how this use of trigger can be applied to multiple control elements. All three elements (Button, ComboBox, and TextBox) assign the value of their Style attribute to the global Style Triggers. As these elements are ultimately derived from Control, the style is appropriately applied to all of them.
Example 5-10. Using a Trigger to modify the appearance of any Control
Thus far, the examples have concentrated on modifying color attributes for elements, but you can change other attributes as well, such as Width, Height, or even Content. Changing the content of an element might be useful if it is image-based, or if you want to provide more detailed information to the user when the mouse hovers over the element.
Example 5-11 modifies the background color, width, and content of a Button when the mouse hovers over the element. When the mouse is not over the element, a trigger again modifies the content of the Button.
Example 5-11. Using a Trigger to modify multiple attributes of a Button
This example includes a direct reference to the Content attribute as Button.Content, not one through Control as is done with Width and Background. This is because the base class Control does not have a Content attribute. As discussed in Chapter 3, only specific types of controls have a Content attribute. We could have made this example even more generic by specifying the property of the Setter as ContentControl.Content instead, because Button derives from ContentControl. This would allow this style to be applied to other classes derived from ContentControl (such as Label) as well as to all controls derived from HeaderedContentControl, which is a subclass of ContentControl. We would also need to change the trigger property to ContentControl.IsMouseOver in order to apply the trigger style to elements other than Button.
This flexibility allows you to define conditional styling in a variety of ways, either by targeting a specific class of elements or individual elements. When used in conjunction with templated styles, triggers provide a powerful mechanism for designing rich, interactive user interfaces.