Property Trigger in WPF

This blog is demonstrates how to use WPF property trigger.

Property trigger is executes when the property is changed (Bind with) of owner control, Please refer the site before reading this article for about property trigger. In this article i am going to explain how to work with property trigger in WPF.

Here I have used a Border control, where I have used two property triggers for demonstration. I am highlighting border of Border control with help of property trigger when mouse if hovering over the control and changing background when it enabling or disablig. Again i have taken one more control name check box for enable and disable the Border control.

Getting Started

Open your Microsoft Visual Studio, click on the create project new project window will be opened. Select WPF project and rename the project name to ‘Property Trigger example’.

Take a Border control in Main Window again take a check box control and set the name to ‘ckbenable’ and text property to ‘Check to Enable’.

<Grid>
        <Border Margin="166,82,200,88"/>
        <CheckBox Name="ckbenable" Content="check to Enable" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="155,176,0,0">
         </CheckBox>
</Grid>

Now bind the ‘IsChecked’ property of checkbox control to ‘IsEnable’ property of Border control. Bind this in the following way.

<Grid>
        <Border Margin="166,82,200,88" IsEnabled="{Binding ElementName=ckbenable, Path=IsChecked, Mode=Default}">
        <CheckBox Name="ckbenable" Content="check to Enable" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="155,176,0,0"></CheckBox>
</Grid>

Right now I will do the things for what i am writing this article that means, we will now work for implementing trigger. To achieve our goal we will follow following below steps:

 

1. Declare border’s start and end style tag inside border control like following example.
   

   <Border.Style>
   </Border.Style>

2. Declare style start and end tag inside the border’s style tag and set the target of style, here it is optional because we are not declaring it resource.
   

   <Style TargetType="Border">
   </Style>

3. Declare setters inside style tag for border thickness, background colour and border colour. Like below xaml code.
   

   <Setter Property="BorderThickness" Value="2"></Setter>
   <Setter Property="Background" Value="Gray"></Setter>
   <Setter Property="BorderBrush" Value="Black"></Setter>

   Above value is will work as default or when the border is in disable mode.
   
   
4. Now declare style’s triggers for containing triggers inside it
   

   <Style.Triggers>
   </Style.Triggers>

5. Declare a trigger inside triggers tag for respect to mouse hover for changing border thickness and write setters for changing border thickness to five . this trigger will fire when mouse is hovering over border control.
   

   <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="BorderThickness" Value="5"></Setter>
   </Trigger

6. Again declare one more trigger for changing background and border colour when its get enable.
   

   <Trigger Property="IsEnabled" Value="True">
            <Setter Property="Background" Value="Green"></Setter>
           <Setter Property="BorderBrush" Value="Red"></Setter>
   </Trigger>

Summary

Above is the all for working with triggers in WPF, hope you have learned how to use triggers.