#666 – Using a Trigger to React to the Mouse Being Over a Control

You can perform some action when the user moves the mouse over a user interface element by defining event handlers for the MouseEnter and MouseLeave events for the element.

If the action that you’re performing is something that can be expressed in XAML (like setting a property value), it’s more elegant to use a trigger to react to the mouse movement.

You can define a property trigger for the IsMouseOver property, setting new values for one or more of the Button’s properties when the mouse is over the Button.

    <StackPanel Margin="20" >
        <Button HorizontalAlignment="Center" Padding="10,5">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Content" Value="Click Me"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Button.Content" Value="!! CLICK Me !!"/>
                            <Setter Property="FontWeight" Value="Bold"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
    </StackPanel>



Note that when you move the mouse off of the Button, the Content and FontWeight properties both revert back to their original values.

#362 – Changing the Text on a ToggleButton When a User Clicks On It

It’s reasonable to want to change the text on a ToggleButton when a user clicks on it, so it shows the current state.  You can do this by using a property trigger, which fires when the IsChecked property of the ToggleButton changes.

    <StackPanel HorizontalAlignment="Center" Margin="15">
        <Label Content="Click to arm the electric fence that surrounds your cube:"/>
        <StackPanel>
            <ToggleButton HorizontalAlignment="Center" Margin="5" Padding="5" Width="80">
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="Content" Value="Disarmed"/>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content" Value="ARMED"/>
                                <Setter Property="Foreground" Value="Red"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
        </StackPanel>
    </StackPanel>


#129 – Properties Changed by Triggers Are Automatically Reset

When you change a property value using a property trigger, the original value of the property will be restored once the conditions of the trigger are no longer true.

For example, you could create a style that applies a drop shadow to a button whenever the user hovers over it, then apply the style to several buttons, as follows:

    <Window.Resources>
        <Style x:Key="hoverStyle" TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Button.Effect">
                        <Setter.Value>
                            <DropShadowEffect/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Button Content="Run" Height="23" Width="75" Style="{StaticResource hoverStyle}"/>
        <Button Content="Skip" Height="23" Width="75" Style="{StaticResource hoverStyle}"/>
        <Button Content="Jump" Height="23" Width="75" Style="{StaticResource hoverStyle}"/>
    </StackPanel>

As you hover over a button, it gets a drop shadow.

Notice, however, that as you move on to the next button, the value of IsMouseOver for the first button becomes false and the original value of the Button.Effect property is restored–i.e. the drop shadow is automatically removed.

#127 – Reacting to a Dependency Property Change Using Triggers

You can react to a dependency property’s value changing by using property triggers.  A property trigger allows you to set up a trigger that fires when a property has a specific value and when the trigger fires, set the value of a different property on the same object.

Because you can only fire the trigger based on discrete values, you often use property triggers that are associated with simple boolean properties.

Here’s an example where we change the Foreground color of a CheckBox control whenever the CheckBox is checked.

        <CheckBox Content="Check Me" HorizontalAlignment="Center">
            <CheckBox.Style>
                <Style TargetType="CheckBox">
                    <Style.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Foreground" Value="BlueViolet"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </CheckBox.Style>
        </CheckBox>

Notice that we can achieve the desired behavior without having to write any code, specifying the behavior entirely in XAML.