Trigger Property to restart storyboard to first state

Question

I have 2 Trigger events, both with an <Trigger.EnterActions> and a <Trigger.ExitActions> and these are IsPressed and also IsMouseOver.

When I click on a button it will play <Trigger Property="IsPressed" Value="True"> storyboard:

<Trigger Property="IsPressed" Value="True">
   <Trigger.EnterActions>
       <BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/>
   </Trigger.EnterActions>
   <Trigger.ExitActions>
        <BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/>
   </Trigger.ExitActions>
 </Trigger>

and this is linked to this storyboard:

<Storyboard x:Key="MouseDownTimeLine" >
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity" >
        <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1" />
     </DoubleAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Key="MouseUpTimeLine">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity" >
        <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
</Storyboard>

A different button is also linked to the same Storyboard. When the second button is clicked I want it to play the storyboard as it does, but then for the first button to go back to the normal state. Which is this part of the Storyboard.

<Storyboard x:Key="MouseExitTimeLine">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity" >
          <SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="1"/>
     </DoubleAnimationUsingKeyFrames>

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity" >
           <SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
</Storyboard>

When the second button is clicked how do I trigger the first button to reset to Normal

Answer 1

Maybe I'm wrong here, but it seems like you have radio button functionality baked into button template. When you click a button it stays "clicked" (or checked) and when you click another button it "releases" the click from first button.

I'd change the target type of the template to RadioButton and the trigger to:

<Trigger Property="IsChecked" Value="True">
   <Trigger.EnterActions>
       <BeginStoryboard x:Name="ButtonCheckedStoryboardBegin"
                        Storyboard="{StaticResource MouseDownTimeLine}"/>
   </Trigger.EnterActions>
   <Trigger.ExitActions>
       <StopStoryboard BeginStoryboardName="ButtonCheckedStoryboardBegin"/>
   </Trigger.ExitActions>
</Trigger>

Using StopStoryboard because duratios in MouseExitTimeLine are zero. If you actually need duration for exit animation, use:

<Trigger Property="IsChecked" Value="True">
   <Trigger.EnterActions>
       <BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/>
   </Trigger.EnterActions>
   <Trigger.ExitActions>
       <BeginStoryboard Storyboard="{StaticResource MouseExitTimeLine}"/>
   </Trigger.ExitActions>
</Trigger>

[second option can be used as is - with zero duration, but it's less elegant, IMO]

Also, the animation for "Hover" in MouseExitTimeLine is redundant and can be removed since MouseDownTimeLine is not setting anything on "Hover".

Now, on each instance of RadioButton in layout, add GroupName="<Some string here>". Only one radio button in a group can be checked at any given point in time.