Search code examples
c#wpfxamldatatrigger

Animation triggers overriding each other in WPF


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>

Solution

  • The solution was to combine all three conditions into one single multibinding, which handles the logic OR for them.