Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • WPF Triggers

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 393
    Comment on it

    Introduction :


    A WPF trigger changes one or more properties of a control in response to an action when a pre-defined condition is met. For example, we can use a Trigger on IsMouseOver event to change the font of the control. Triggers allow you to do things in markup  which are generally done in code behind thus helping in separating style and code.

     

    Types of Triggers :

     

    There are five types of triggers supported by WPF:

    1) Property Trigger
    2) Data Trigger
    3) Event Trigger
    4) MultiTrigger
    5) MultiDataTrigger

     

    1) Property Trigger

     

    A property trigger gets executed when the value for a property matches a pre-set value following which style setters are invoked to change the visual elements associated with the control.There are three conditions that should be met to create a property trigger within a style.
    a)  The property whose change in value will trigger the functionality should have a name.
    b)  We need to set the triggering condition i.e define two values in the property and value properties of a trigger object, available within the style's triggers collection.
    c)  Define list of style setters which will be  applied when the trigger is activated.

     

    <Window.Resources>
    <Style TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="FontSize" Value="300" />
                <Setter Property="FontWeight" Value="Bold" />
                <Setter Property="Foreground" Value="Blue" />
            </Trigger>
        </Style.Triggers>
    </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Click" Height="60" Width="120" Margin="4" />
    </StackPanel>

     

    As per above code snippet the moment the  IsMouseOver property value becomes true the defined setter action inside trigger will get executed.

     

    2) Data Trigger
     
    Data triggers are similar to property trigger in the sense that they update user interface when a trigger is fired. However the key difference is that the target value is found using data binding making these type of triggers much more powerful.

     

    <Window.Resources>
    <Style TargetType="Button">
        <Style.Triggers>
            <DataTrigger  Binding="{Binding
                          RelativeSource={RelativeSource Self},
                          Path=Content}" Value="Click">
                <DataTrigger.Setters>
                    <Setter  Property="FontSize" Value="30" />
                </DataTrigger.Setters>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Click"
                Height="60" Width="180" Margin="6" />
    </StackPanel>

     

    As per above code, Data trigger checks value of Content property of Button ("Click") and if value matches then it will execute setter block of data trigger. Data triggers is a perfect choice when  data binding is being used in scenarios  such as  the MVVM design pattern.


    3) Event Trigger
     
     Event trigger is typically used for acting in response to events being raised . With the use of these triggers any routed event can be responded with an action or group of actions. Event Trigger are generally used for animation purpose.

     

    <Window.Resources>
    <Style TargetType="Button">
    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Duration="0:0:0.6"
                            Storyboard.TargetProperty="Width"
                            To="250"  />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Duration="0:0:0.6"
                            Storyboard.TargetProperty="Width"
                            To="200" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
    </Style>
    </Window.Resources>
    <StackPanel>
    <Button Content="Click"Height="40" Width="150" Margin="5" />
    </StackPanel>

     

    In the above code snippet we define MouseEnter and MouseLeave event trigger. Hence on the occurrence of these events the EventTriggerAction will get executed changing the width of the button. So on  MouseEnter the width of button will set to 250 and on MouseLeave it will revert  back to 200.

     


    4) MultiTrigger
     
       A standard property trigger works by monitoring a single property hence limiting its usage. MultiTrigger overcome this limitation by providing a collection of property values to be matched and the control only gets updated if all conditions are satisfied.

     

      <Style x:Key="MulitTriggerButtonStyle" TargetType="Button">
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsPressed" Value="True" />
                    <Condition Property="Background" Value="Red" />
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter Property="Foreground" Value="Blue" />
                    <Setter Property="BorderThickness" Value="4" />
                    <Setter Property="BorderBrush" Value="Blue" />
                </MultiTrigger.Setters>
            </MultiTrigger>
        </Style.Triggers>
       </Style>  

     

    In the above code snippet we have applied two conditions i.e IsPressed and Background on Button which should be met before setters get applied.


    5) MultiDataTrigger

     

      MultiDataTrigger is similar to a  Data Trigger however the key difference is that we can use it for triggering changes when two or more bindings return the correct value.

     

    Style TargetType="{x:Type Button}">
     <Style.Triggers>
      <MultiDataTrigger>
       <MultiDataTrigger.Conditions>
        <!-- This binding refers to the actual WPF element. -->
        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True"/>
        <Condition Binding="{Binding Path=Role}" Value="Admin"/>
       </MultiDataTrigger.Conditions>
       <Setter Property="Button.Background" Value="Orange" />
      </MultiDataTrigger>
     </Style.Triggers>
    </Style>

     


    In above code, the collection of setters  applies property value when following two conditions are satisfied ( MouseOver and Admin Role)

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: