WPF animation only moves in one direction

495 views Asked by At

I have a series of triggers for controlling a bar that is supposed to move up and down. Each time it is given one of these randomly selected values, it slides into the appropriate position:

<Trigger Property="Content" Value="B000">
    <Trigger.EnterActions>
        <BeginStoryboard Name="B000" HandoffBehavior="SnapshotAndReplace">
            <Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
                <DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To="0" Duration="0:0:1" BeginTime="0:0:0" />
                <DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To="0" Duration="0:0:1" BeginTime="0:0:0" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B125">
    <Trigger.EnterActions>
        <BeginStoryboard Name="B125" HandoffBehavior="SnapshotAndReplace">
            <Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
                <DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".125" Duration="0:0:1" BeginTime="0:0:0" />
                <DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".125" Duration="0:0:1" BeginTime="0:0:0" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B250">
    <Trigger.EnterActions>
        <BeginStoryboard Name="B250" HandoffBehavior="SnapshotAndReplace">
            <Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
                <DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".25" Duration="0:0:1" BeginTime="0:0:0" />
                <DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".25" Duration="0:0:1" BeginTime="0:0:0" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B500">
    <Trigger.EnterActions>
        <BeginStoryboard Name="B500" HandoffBehavior="SnapshotAndReplace">
            <Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
                <DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".5" Duration="0:0:1" BeginTime="0:0:0" />
                <DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".5" Duration="0:0:1" BeginTime="0:0:0" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B750">
    <Trigger.EnterActions>
        <BeginStoryboard Name="B750" HandoffBehavior="SnapshotAndReplace">
            <Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
                <DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To=".75" Duration="0:0:1" BeginTime="0:0:0" />
                <DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To=".75" Duration="0:0:1" BeginTime="0:0:0" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>
<Trigger Property="Content" Value="B1k0">
    <Trigger.EnterActions>
        <BeginStoryboard Name="B1k0" HandoffBehavior="SnapshotAndReplace">
            <Storyboard FillBehavior="HoldEnd" Duration="0:0:1">
                <DoubleAnimation Storyboard.TargetName="bar1" Storyboard.TargetProperty="Offset" To="1" Duration="0:0:1" BeginTime="0:0:0" />
                <DoubleAnimation Storyboard.TargetName="bar2" Storyboard.TargetProperty="Offset" To="1" Duration="0:0:1" BeginTime="0:0:0" />
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

But for some reason, it only ever moves up. The parts where it's supposed to move down again, it just sits there. Stopping the animation between changes only causes it to begin again from the bottom, and that's not what I want.

1

There are 1 answers

3
dev hedgehog On BEST ANSWER

I am not sure what you mean with going down lol but every animation/trigger has EnterAction and ExitAction.

To me it sounds like you are seeking for ExitAction which will allow you to move that thingy back to its start position. :)

Take a look at this link:

http://msdn.microsoft.com/en-us/library/system.windows.triggerbase.exitactions%28v=vs.110%29.aspx

Here is an example :

<Style x:Key="PropertyTriggerExampleButtonStyle" TargetType="{x:Type Button}">

  <Setter Property="Opacity" Value="0.25" />

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

      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
              To="1" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
              To="0.25" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.ExitActions>          
    </Trigger>               
  </Style.Triggers>    
</Style>

Edit:

Then you need to have multiple DoubleAnimations like this:

        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation .... />
            <DoubleAnimation ... />
            <DoubleAnimation ... />
            <DoubleAnimation ... />
          </Storyboard>
        </BeginStoryboard>