Section 5.3. Triggers

5.3. Triggers

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

 <Page     xmlns=""     xmlns:x="">     <Page.Resources>         <Style             TargetType="{x:Type Button}">             <Style.Triggers>                 <Trigger                     Property="Button.IsMouseOver"                     Value="true">                     <Setter                         Property = "Foreground"                         Value="Green"/>                     <Setter                         Property = "Background"                         Value="Red"/>                 </Trigger>             </Style.Triggers>         </Style>     </Page.Resources>     <StackPanel>         <Button             Content="My Button" />     </StackPanel> </Page> 

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

 <Page     xmlns=""     xmlns:x="">     <Page.Resources>         <Style             x:Key="ButtonTriggers"             TargetType="{x:Type Button}">             <Style.Triggers>                 <Trigger                     Property="Button.IsMouseOver"                     Value="true">                     <Setter                         Property = "Control.Foreground"                         Value="Green"/>                     <Setter                         Property = "Control.Background"                         Value="Red"/>                 </Trigger>             </Style.Triggers>         </Style>     </Page.Resources>     <StackPanel>         <Button             Style="{StaticResource ButtonTriggers}"             Content="My Button" />     </StackPanel> </Page> 

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

 <Page     xmlns=""     xmlns:x="">     <Page.Resources>         <Style             TargetType="{x:Type Button}">             <Style.Triggers>                 <Trigger                     Property="Button.IsPressed"                     Value="true">                     <Setter                         Property = "Width"                         Value="300"/>                 </Trigger>             </Style.Triggers>         </Style>     </Page.Resources>     <StackPanel>         <Button             Content="Button with global style" >             <Button.Resources>                  <Style                      TargetType="{x:Type Button}">                      <Style.Triggers>                      <Trigger                          Property="IsMouseOver"                          Value="true">                          <Setter                              Property="Background"                              Value="Green" />                      </Trigger>                      </Style.Triggers>                  </Style>             </Button.Resources>         </Button>         <Button             Content="Button with no local style" />     </StackPanel> </Page> 

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

 <Page     xmlns=""     xmlns:x="">     <Page.Resources>     <Style         x:Key="Triggers">         <Style.Triggers>             <Trigger                 Property="Control.IsMouseOver"                 Value="true">                 <Setter                     Property = "Control.Foreground"                     Value="Green"/>                 <Setter                     Property = "Control.Background"                     Value="Red"/>             </Trigger>         </Style.Triggers>     </Style>     </Page.Resources>     <StackPanel>         <Button             Style="{StaticResource Triggers}"             Content="My Button" />         <ComboBox             Style="{StaticResource Triggers}">             <ComboBoxItem>Item One</ComboBoxItem>             <ComboBoxItem>Item Two</ComboBoxItem>             <ComboBoxItem>Item Three</ComboBoxItem>         </ComboBox>         <TextBox             Style="{StaticResource Triggers}">My Text         </TextBox>     </StackPanel> </Page> 

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

 <Page     xmlns=""     xmlns:x="">     <Page.Resources>         <Style             x:Key="Triggers" >             <Style.Triggers>                 <Trigger                     Property="Button.IsMouseOver"                     Value="true">                     <Setter                         Property = "Control.Width"                         Value="150"/>                     <Setter                         Property = "Control.Background"                         Value="Red"/>                     <Setter                         Property = "Button.Content"                         Value="Mouse Over" />                 </Trigger>                 <Trigger                     Property="Button.IsMouseOver"                     Value="false">                     <Setter                         Property = "Button.Content"                         Value="Mouse Out" />                 </Trigger>             </Style.Triggers>         </Style>     </Page.Resources>     <StackPanel>         <Button             Style="{StaticResource Triggers}" />     </StackPanel> </Page> 

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.

XAML in a Nutshell
XAML in a Nutshell (In a Nutshell (OReilly))
ISBN: 0596526733
EAN: 2147483647
Year: 2007
Pages: 217 © 2008-2017.
If you may any questions please contact us: