WPF: Property Trigger

Modern applications make intensive use of interactive UI elements: highlighting buttons when the mouse hovers over them, rollover images

Modern applications make intensive use of interactive UI elements: highlighting buttons when the mouse hovers over them, rollover images. Most of the time, these effects are achieved through the use of some scripting code, like Javascript in the case of web applications.

PROPERTY TRIGGER: In WPF, it's not necessary to write scripting code. Instead, property triggers can help us create the same compelling effects. Property triggers are used to monitor a DependencyProperty's value. In other words, Property triggers are, like all triggers defined inside a style, but when applied to a certain object, they fire when a certain property of that object itself changes. This way, one or more properties of the object can be changed. The following example applies a glow effect to a button when the mouse pointer is over the button (IsMouseOver=true). The WPF framework automatically handles resetting the style back when the mouse pointer is moved off the button.

Code Example:

<Canvas>

    <Canvas.Resources>

        <Style TargetType="{x:Type Button}">

            <Style.Triggers>

                <Trigger Property="IsMouseOver" Value="true">

                    <Setter Property="BitmapEffect">

                        <Setter.Value>

                            <OuterGlowBitmapEffect GlowColor="Gold" GlowSize="10" />

                        </Setter.Value>

                    </Setter>

                </Trigger>

            </Style.Triggers>

        </Style>

    </Canvas.Resources>

    <Button Canvas.Left="19" Canvas.Top="19" Width="75" Height="22">Button 1</Button>

</Canvas>