WPF

Learn About Triggers In WPF

What are Triggers?

Triggers are a medium by which we can trigger a behavior of the targeted control when it fulfills the specified conditions. 

There are three types of Triggers.

  • Property Trigger
  • Data Trigger
  • Event Trigger

Let us look at a scenario where we use all the triggers.

The View has three buttons, each of which uses all the above-mentioned types of Triggers.

  • The first button triggers the property trigger, which changes the cursor to a hand when hovered upon.
  • The second button when pressed triggers the data trigger which sets the text property of the TextBlock.
  • The third button triggers the event trigger which does an animation to increase the width property of the Button.

WPF

We define the triggers in the XAML code, which looks as below.

  1. <Window x:Class="TriggersInWpf.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.         mc:Ignorable="d"  
  7.         Title="Using Triggers in Wpf" Height="450" Width="800">  
  8.     <Window.Resources>  
  9.         <!--Define the property trigger-->  
  10.         <Style x:Key="PropertyTriggered" TargetType="Button">  
  11.             <Setter Property="Background" Value="Gainsboro"/>  
  12.             <Style.Triggers>  
  13.                 <Trigger Property="IsMouseOver" Value="True">  
  14.                     <Setter Property="Cursor" Value="Hand"/>  
  15.                 </Trigger>  
  16.             </Style.Triggers>  
  17.         </Style>  
  18.         <!--Define the data trigger-->  
  19.         <Style x:Key="DataTriggered" TargetType="TextBlock">  
  20.             <Style.Triggers>  
  21.                 <DataTrigger   
  22. Binding="{Binding ElementName=BtnDataTrigger, Path=IsPressed}" Value="True">  
  23.                     <Setter Property="Text" Value="DataTrigger has been triggered!"/>  
  24.                     <Setter Property="FontWeight" Value="Bold"/>  
  25.                     <Setter Property="VerticalAlignment" Value="Center"/>  
  26.                     <Setter Property="HorizontalAlignment" Value="Center"/>  
  27.                     <Setter Property="FontSize" Value="18"/>  
  28.                 </DataTrigger>  
  29.             </Style.Triggers>  
  30.         </Style>  
  31.     </Window.Resources>  
  32.     <Grid>  
  33.         <Grid.RowDefinitions>  
  34.             <RowDefinition Height="50"/>  
  35.             <RowDefinition Height="50"/>  
  36.             <RowDefinition Height="50"/>  
  37.             <RowDefinition Height="50"/>  
  38.             <RowDefinition Height="50"/>  
  39.             <RowDefinition Height="Auto"/>  
  40.         </Grid.RowDefinitions>  
  41.         <Grid.ColumnDefinitions>  
  42.             <ColumnDefinition Width="300"/>  
  43.             <ColumnDefinition Width="100"/>  
  44.             <ColumnDefinition Width="Auto"/>  
  45.         </Grid.ColumnDefinitions>  
  46.         <Button x:Name="BtnKey"    
  47.                 Content="HoverOverMeToCheckPropertyTrigger"   
  48.                 Style="{StaticResource PropertyTriggered}"  
  49.                 Grid.Row="0"   
  50.                 Grid.Column="0" Width="300"/>  
  51.         <Button x:Name="BtnDataTrigger"    
  52.                 Content="HowDataTriggerWorks? Press Me!"   
  53.                 Style="{StaticResource PropertyTriggered}"  
  54.                 Grid.Row="2"   
  55.                 Grid.Column="0" Width="300"/>  
  56.         <TextBlock x:Name="TxtBlock"  
  57.                    Style="{StaticResource DataTriggered}"  
  58.                    Grid.Row="2"   
  59.                    Grid.Column="2"/>  
  60.   
  61.         <Button x:Name="BtnEventTrigger"    
  62.                 Content="HowEventTriggerWorks? Press Me!"   
  63.                 Style="{StaticResource PropertyTriggered}"  
  64.                 Grid.Row="4"   
  65.                 Grid.Column="0">  
  66.             <!--Define the event trigger-->  
  67.             <Button.Triggers>  
  68.                 <EventTrigger RoutedEvent="Button.Click">  
  69.                     <EventTrigger.Actions>  
  70.                         <BeginStoryboard>  
  71.                             <Storyboard>  
  72.                                 <DoubleAnimation   
  73.                                     Storyboard.TargetName="BtnEventTrigger"  
  74.                                     Storyboard.TargetProperty="Width"   
  75.                                     From="0" To="300"   
  76.                                     Duration="0:0:5">  
  77.                                 </DoubleAnimation>  
  78.                             </Storyboard>  
  79.                         </BeginStoryboard>  
  80.                     </EventTrigger.Actions>  
  81.                 </EventTrigger>  
  82.             </Button.Triggers>  
  83.         </Button>  
  84.     </Grid>  
  85. </Window>  

This is just a simple use of Triggers I have demonstrated. Triggers are very useful in our everyday coding but it must be STRESSED that the unnecessary/excessive use of triggers/converters in our code can lead to performance issues. So, just make sure that you really need it in your application.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found