Tuesday, September 11, 2007

Combining DataTriggers and Property Triggers in WPF

How to combine property-triggers and data-triggers in WPF is not quite clear from the documentation.

Property-trigger that changes the color of a buttons background

A property-trigger is a trigger that works with the visisble element properties of WPF. Button has among others an IsMouseOver-property.

<Style TargetType="{x:Type Button}">
 <Setter Property="Button.Background" Value="AliceBlue" />
 <Style.Triggers>
  <Trigger Property="IsMouseOver" Value="True">
   <Setter Property="Button.Background" Value="Yellow" />
  </Trigger>
 </Style.Triggers>
</Style>

Data-trigger that changes the color of a buttons background

A data-trigger is a trigger that works with the properties of my own objects. My user object below has a Name and a Role property.

public class User {
    private string name;
    private string role;

    public string Name {
        get { return name; }
        set { name = value; }
 }

    public string Role {
        get { return role; }
        set { role = value; }
    }
}

<Style TargetType="{x:Type Button}">
 <Style.Triggers>
  <DataTrigger Binding="{Binding Path=Role}" Value="Admin">
   <Setter Property="Button.Background" Value="Red" />
  </DataTrigger>
 </Style.Triggers>
</Style>

A combined property-trigger and a data-trigger that changes the color of a buttons background

If I want to combine the two triggers above to check if the role is admin and the mouse is over there is no straightforward way to do this, so I have to resort to this.

<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>


33 comments:

  1. Absolute Gold.

    ReplyDelete
  2. Thanks!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete
  3. I didn't understand a good use for a multitrigger until i saw your post here. I was able to take your sample source and translate it into something that I can use.

    Thanks for taking the time to share some info for MultiTriggers!

    ReplyDelete
  4. Thanks mate...this is really helpful. This saved me lot of time.

    ReplyDelete
  5. @Pali, I'm glad it is still helping people.

    ReplyDelete
  6. Still helping people!
    Cheers for this example!
    Edgar

    ReplyDelete
  7. Very helpful post, and also nice implementation - easy to use and very straightforward

    Thanks a lot!

    ReplyDelete
  8. Many thanks Anders

    ReplyDelete
  9. Thanks man!!
    This helped me.

    ReplyDelete
  10. Tackar tackar! :)

    ReplyDelete
  11. @David, kul att det hjälpte dig!

    ReplyDelete
  12. Thanks bro, this was just what I needed!

    ReplyDelete
  13. Seriously brilliant. Thank you.

    ReplyDelete
  14. Thanks!!! Really Helpful.. I was stuck into this.

    ReplyDelete
  15. Nice thanks I woulda been scratching my head for a while!

    ReplyDelete
  16. @feral, You are welcome, I'm glad it helped you.

    ReplyDelete
  17. Yeeeeeeeees a solution for my current problem! Searched for about two hours to find this article but now everything works. Thanks a lot! :)

    ReplyDelete
  18. One more trigger type from Dr WPF - EventTrigger - http://drwpf.com/blog/2009/05/12/itemscontrol-l-is-for-lookless/#IntroToTriggers
























    False












    ReplyDelete
  19. Thanks it worked

    ReplyDelete
  20. Short and clear, straight to the point. Thanks!

    ReplyDelete
  21. Brilliantly simple!
    Thanks/Tackar!

    ReplyDelete
  22. Thanks! This really helped me out.
    Simple and straightforward explanation!

    ReplyDelete
  23. @Rene, @CuteD34th. You are welcome, I'm glad it helped you.

    ReplyDelete
  24. Just wanted to say, this post helped me after 6 hours of searching on the internet. Thanks!

    ReplyDelete
  25. @David, I'm glad it helped you. You're welcome!

    ReplyDelete