WPF style triggers: can I apply one style to different properties?

There seems to be a way to do this:

I am using ItemContainerStyle in my Listbox based on two property triggers. As you can see, I use the same set of trigger start / exit actions, just applied to two different properties. Is there something equivalent to <Trigger Property = "prop1" OR Property = "prop2"> ??? (Obviously, it will not look like this, but it probably makes sense.)

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> <Style.Triggers> <Trigger Property="IsKeyboardFocusWithin" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" To="50" Duration="0:0:.3"></DoubleAnimation> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" To="25" Duration="0:0:.3" /> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </Style.Triggers> </Style> <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" To="50" Duration="0:0:.3"></DoubleAnimation> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Height" To="25" Duration="0:0:.3" /> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </Style.Triggers> </Style> 
+1
triggers styles wpf listbox listboxitem
source share
2 answers

Have you tried any of the following (extracted from Adam Nathan's book: Windows Presentation Foundation Unleashed):

  • Multiple triggers apply to the same element (to get a logical OR).
  • Several properties evaluated for the same trigger (to obtain a logical AND).

Logical OR

Since Style.Triggers can contain multiple triggers, you can create more than one with the same Setters to express the logical relation OR.

For example:

 <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> ... </Trigger> <Trigger Property="IsKeyboardFocusWithin" Value="True"> .... </Trigger> </Style.Triggers> 

This means that "if IsMouseOver is true, or if the value of IsKeyboardFocusWithin is true, apply the action.

Logical and

To express the logical AND relation, you can use the Trigger variant called MultiTrigger , or the DataTrigger variant called MultiDataTrigger . Both triggers have a set of Conditions that contain information that you usually put directly in a trigger or DataTrigger.

For example:

 <Style.Triggers> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True"/> <Condition Property="IsKeyboardFocusWithin" Value="True"/> </MultiTrigger.Conditions> </MultiTrigger> <Setter ...> <Setter ...> </Style.Triggers> 
0
source share

You can put storyboards in resources and just reference them in triggers. This is not exactly what you want, but it allows you to define your animations in one central place (instead of copying and pasting them).

 <Style TargetType="..."> <Style.Resources> <Storyboard x:Key="MyGetFocusAnimation"> <DoubleAnimation Storyboard.TargetProperty="Height" To="50" Duration="0:0:.3" /> </Storyboard> <Storyboard x:Key="MyLoseFocusAnimation"> <DoubleAnimation Storyboard.TargetProperty="Height" To="25" Duration="0:0:.3" /> </Storyboard> </Style.Resources> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource MyGetFocusAnimation}" /> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource MyLoseFocusAnimation}" /> </Trigger.ExitActions> </Trigger> <Trigger Property="IsKeyboardFocusWithin" Value="True"> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource MyGetFocusAnimation}" /> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource MyLoseFocusAnimation}" /> </Trigger.ExitActions> </Trigger> </Style.Triggers> </Style> 
0
source share

All Articles