#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.

Advertisement