WPF - Trigger in WPF

Triggers are implemented as part of styles, and indicate a trigger condition and a new set of setters to apply when the trigger condition is met. Mouseover effects are a very common application of triggers. Triggers can fully be expressed using XAML, eliminating the need to write code for many simple effects.

Let see how to create a style with trigger

Step 1
Create a WPF Application and specify the project name as SolStyleWithTrigger

Step 2
Add a button on window, it is look like this

<Window x:Class="SolStyleWithTrigger.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Trigger" Height="300" Width="300" Background="Black">
    
    <Grid>
        <Button Name="BtnOk" Height="50" Width="100">OK</Button>
    </Grid>
</Window>

Step 3
Inside the window tag add <Window.Resource> property,it is look like this

<Window.Resources>
        
</Window.Resources>

Step 4

Inside the Window.Resources the property add the style element.it is look like this

<Window.Resources>
        
        <Style x:Key="BtnStyle" TargetType="Button">
            
        </Style>
        
</Window.Resources> 

Step 5

Inside the Style Element add the Setter element,it is look like this

<Window.Resources>

        <Style x:Key="BtnStyle" TargetType="Button">

            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                        <GradientStop Color="AliceBlue" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        
            
            <!--Apply a trigger-->
            
            
        </Style>

    </Window.Resources> 

This style is defined in the Window's Resources collection. The style is given a key, so it can be uniquely referenced. A setters can be defined in order to specify which properties will be changed. In the above code snippet, only one setters are defined, but you could have continued on with many more entries. you can see my previous WPF artical See Step 5. The style changes the background property to a gradient brush.

Step 6
To apply a trigger for button.Trigger property can write inside the style element,it is look like this

<Style.Triggers>

                <!--When user moves the mouse over the button then apply trigger-->
                <Trigger Property="IsMouseOver" Value="true">
                    
                    <Setter Property="Foreground" Value="Red"></Setter>
                    <Setter Property="FontSize" Value="15"></Setter>
                    <Setter Property="FontWeight" Value="Bold"></Setter>
                    
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                                <GradientStop Color="Orange" Offset="0"></GradientStop>
                                <GradientStop Color="Yellow" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value> 
                    </Setter>
                    
                </Trigger>
                
            </Style.Triggers>  

Finally style element look like this

  <Window.Resources>

        <Style x:Key="BtnStyle" TargetType="Button">

            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                        <GradientStop Color="AliceBlue" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            
            <!--Apply a trigger-->

            <Style.Triggers>

                <!--When user moves the mouse over the button then apply trigger-->
                <Trigger Property="IsMouseOver" Value="true">

                    <Setter Property="Foreground" Value="Red"></Setter>
                    <Setter Property="FontSize" Value="15"></Setter>
                    <Setter Property="FontWeight" Value="Bold"></Setter>

                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                                <GradientStop Color="Orange" Offset="0"></GradientStop>
                                <GradientStop Color="Yellow" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>

                </Trigger>

            </Style.Triggers>

        </Style>

    </Window.Resources> 

Triggers can be used for styles as well. For instance, a button has several properties it can use to determine what state it is in. It has an IsMouseOver property that is used to

when user move the mouse pointer to the button.

Whenever user move the mouse pointer to the button then it applies foreground color,fontsize,fontweight and background color using LinearGradientBrush.

Step 7
To apply style in button control,it is look like this

 <Grid>
        <Button Name="BtnOk" Height="50" Width="100" Style="{StaticResource BtnStyle}">OK</Button>
 </Grid>

Full code

<Window x:Class="SolStyleWithTrigger.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Trigger" Height="300" Width="300" Background="Black">
    
    <Window.Resources>

        <Style x:Key="BtnStyle" TargetType="Button">

            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                        <GradientStop Color="AliceBlue" Offset="0" />
                        <GradientStop Color="Blue" Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            
            <!--Apply a trigger-->

            <Style.Triggers>

                <!--When user moves the mouse over the button then apply trigger-->
                <Trigger Property="IsMouseOver" Value="true">

                    <Setter Property="Foreground" Value="Red"></Setter>
                    <Setter Property="FontSize" Value="15"></Setter>
                    <Setter Property="FontWeight" Value="Bold"></Setter>

                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                                <GradientStop Color="Orange" Offset="0"></GradientStop>
                                <GradientStop Color="Yellow" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>

                </Trigger>

            </Style.Triggers>

        </Style>

    </Window.Resources> 
    
    <Grid>
        <Button Name="BtnOk" Height="50" Width="100" Style="{StaticResource BtnStyle}">OK</Button>
    </Grid>
</Window>

Run the project.

Download
Download Source Code