I have a 3x3 grid of buttons in my application. They use their own template shown below. PushDown and PushUp are static storyboards defined earlier in Application.Resources.
I can trigger these animations with three methods, defined in DataTriggers with different conditions inside the template. However, once I trigger a button's animation with IsMouseOver I can't trigger it anymore with IsPressed. If I trigger it with the MultiBinding condition I can't trigger it anymore with either IsMouseOver and IsPressed.
I figure the order of declaration of these (Multi)DataTriggers influences which take precedence over which. What concept am I missing here, and how can I make sure the animation storyboard plays always when any of the conditions are fulfilled?
The Button template is the following:
<!--Pusher Style-->
<Style TargetType="Button"
x:Key='Pusher'>
<Setter Property='Background'
Value='Gray' />
<Setter Property='Foreground'
Value='White' />
<Setter Property='FontFamily'
Value='Calibri' />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name='_bottom'
Fill="#FF353535"
RadiusX="20"
RadiusY="20"
Margin='0,2,0,0' />
<Border x:Name='_top'
Margin='0,0,0,10'>
<Grid>
<Rectangle x:Name='_color'
Fill="{TemplateBinding Background}"
RadiusX="20"
RadiusY="20" />
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!--Press down animation-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding='{Binding RelativeSource={RelativeSource Self}, Path=IsPressed}'
Value='True' />
<Condition Binding='{Binding IsHover}'
Value='False' />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard Storyboard='{StaticResource PushDown}' />
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard Storyboard='{StaticResource PushUp}' />
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<!--Conditional press down animation on hover-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding='{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}'
Value='True' />
<Condition Binding='{Binding IsHover}'
Value='True' />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard Storyboard='{StaticResource PushDown}' />
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard Storyboard='{StaticResource PushUp}' />
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
<!--Keyboard control animation-->
<DataTrigger Value='True'>
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource CompareKey}">
<Binding RelativeSource="{RelativeSource self}"
Path="Name"
Mode="OneWay" />
<Binding Path='ButtonKey'
Mode="OneWay" />
</MultiBinding>
</DataTrigger.Binding>
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard='{StaticResource PushDown}' />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard='{StaticResource PushUp}' />
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Fill"
TargetName="_color"
Value="#FFEBCB31" />
</Trigger>
<Trigger Property='IsPressed'
Value="True">
<Setter Property="Fill"
TargetName="_color"
Value="#FFD9AE2C" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The solution was to combine all three conditions into one single multibinding, which handles the logic OR for them.