WPF animation only moves in one direction

StackOverflow https://stackoverflow.com/questions/20354241

  •  28-08-2022
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top