WPF trigger triggers

This article summarizes triggers.

Frameworkelement, style, controltemplate, and datatemplate all have a triggers attribute of the triggercollection type. triggercollection inherits from: collection <triggerbase>, so they all have a set of triggers.

Triggers can automatically change the style in XAML, use data binding, or generate an animation when triggering certain events. Therefore, triggers can be divided into trigger, multitrigger, datatrigger, multidatatrigger, and eventtrigger.

1. Trigger: Use setter to change certain styles based on changes in a dependency attribute,

ExampleCode:

<Style targettype = "  Button  " > <Style. triggers> <trigger property = "  Ispressed " Value = "  True  " > <Setter property = "  Fontsize  " Value = "  28  " > </Setter> <setter property = "  Borderbrush  " Value = " Red  " > </Setter> <setter property = "  Borderthickness  " Value = "  2  " > </Setter> </trigger> </style. triggers> </style>

When the ispressed value of the button is true, setter is used to set fontsize, borderbrush, and borderthickness.

2. multitrigger: the trigger takes effect only when the changes of multiple dependency attributes are met.

Sample Code:

View code

<Style targettype = "  Button  " > <Style. triggers> <multitrigger. Conditions> <Condition Property = "  Background  " Value = "  Black  " > </Condition> <Condition Property = " Ispressed  " Value = "  True  " > </Condition> </multitrigger. Conditions> <multitrigger. setters> <setter property = "  Fontsize  " Value = "  28  " > </Setter> </multitrigger. setters> </multitrigger> </style. triggers> </style>

The fontsize of the content of the button is changed to 28 only when the background of the button is black and the ispressed is true.

3. datatrigger: You can complete all the functions of a trigger or listen on non-dependent attributes. Datatrigger introduces three parameters: binding, value, and setters. When you need to set the data source for which the data trigger listens, bind the binding attribute to assign values.

Sample Code:

 Public   Class  Testbutton: button {  Public   Int Index { Set ; Get ;}} <Style targettype = "  Local: testbutton  " > <Style. triggers> <datatrigger binding = "  {Binding relativesource = {relativesource self}, Path = index}  " Value = "  2  " > <Setter property = "  Foreground  " Value ="  Red  " /> </Datatrigger> </style. triggers> </style>

The index attribute of testbutton is non-dependent. When a trigger is used to listen, an error is returned. You must use the ririgger.

4. multidatatrigger: the trigger takes effect only when multiple attributes are changed at the same time.

Sample Code

 Public   Class  Testbutton: button {  Public   Int Index { Set ; Get ;}  Public   String Text { Set ; Get  ;}} <Style targettype = "  Local: testbutton  " > <Style. triggers> <multidatatrigger. Conditions> <condition binding = "  {Binding relativesource = {relativesource self}, Path = index}  " Value = "  2  " /> <Condition binding = "  {Binding relativesource = {relativesource self}, Path = text}  " Value = "  Hi  " /> </Multidatatrigger. Conditions> <setter property = "  Background  " Value = " Red  " /> </Multidatatrigger> </style. triggers> </style>

When Index = 2, text = "hi" is set at the same time, set background to red.

5. eventtrigger: complete an animation when the event is triggered.

Sample Code

<Style targettype = "  Button  " > <Style. triggers> <eventtrigger routedevent = "  Mouse. mouseenter  " > <Eventtrigger. Actions> <beginstoryboard> <storyboard> <doubleanimation duration = "  0: 0. 5  " Storyboard. targetproperty = "  (Button. width)  " To = "  200  " > </Doubleanimation> </storyboard> </beginstoryboard> </eventtrigger. Actions> </eventtrigger> <eventtrigger routedevent = "  Mouse. mouseleave  " > <Eventtrigger. Actions> <beginstoryboard> <storyboard> <doubleanimation duration = "  0: 0. 5  " Storyboard. targetproperty = "  (Button. width) " > </Doubleanimation> </storyboard> </beginstoryboard> </eventtrigger. Actions> </eventtrigger> </style. triggers> </style>

When the mouseenter event is triggered, the width of the button is slowly changed to 200. When the mouseleave event is triggered, the width of the button is slowly restored to the original size.