3

In WPF, I'm trying to move an image from left to center, pause for a second, then move the image to the right. I'm trying to achieve it using ObjectAnimationUsingKeyFrames.

<BeginStoryboard>
  <Storyboard Storyboard.TargetName="RoundNumberText" >
    <ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Left">
        <DiscreteObjectKeyFrame  Value="400" KeyTime="0:0:0.5"/>
        <DiscreteObjectKeyFrame  Value="1400" KeyTime="0:0:1.5"/>
    </ObjectAnimationUsingKeyFrames>
  </Storyboard>
</BeginStoryboard>

Somehow i got the error message on the TargetProperty that the object does not supported by this properties. I've tried with margin as well, but still giving error. Appreciate if anyone could help.

Fire
  • 377
  • 1
  • 5
  • 22

1 Answers1

3

To set the value for alignment, you need to do something like this:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyImage" 
                               Storyboard.TargetProperty="HorizontalAlignment">

    <DiscreteObjectKeyFrame KeyTime="0:0:0">
        <DiscreteObjectKeyFrame.Value>
            <HorizontalAlignment>Center</HorizontalAlignment>
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

Below is my example, where the image appears in the role of the Label:

<Grid>
    <Grid.Triggers>
        <EventTrigger SourceName="MoveToCenter" RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Test" 
                                                   Storyboard.TargetProperty="HorizontalAlignment">

                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                            <DiscreteObjectKeyFrame.Value>
                                <HorizontalAlignment>Center</HorizontalAlignment>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames BeginTime="0:0:1"
                                                   Storyboard.TargetName="Test" 
                                                   Storyboard.TargetProperty="HorizontalAlignment">

                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                            <DiscreteObjectKeyFrame.Value>
                                <HorizontalAlignment>Right</HorizontalAlignment>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Label x:Name="Test" Content="Test" Width="300" Height="200" Background="Aqua" HorizontalAlignment="Left" />

    <Button Name="MoveToCenter" Content="MoveToCenter" Width="120" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
Anatoliy Nikolaev
  • 22,370
  • 15
  • 69
  • 68
  • Can I include the AccelerationRatio=".2" or DecelerationRatio=".8" for the coding above? As I would like to animate it. – Fire Aug 24 '13 at 11:24
  • @user2711132: Why did not you say in your question about `AccelerationRatio`? Probably not, the [DiscreteObjectKeyFrame](http://msdn.microsoft.com/en-us/library/system.windows.media.animation.discreteobjectkeyframe.aspx) contains only property `KeyTime`. As far as I know, the animation alignment works is only for `DiscreteObjectKeyFrame`, but you can set different values for `BeginTime`. – Anatoliy Nikolaev Aug 24 '13 at 12:02
  • How about using the `DoubleAnimation`? But the second animation will overwrite the first one, any idea to pause it in the middle? – Fire Aug 24 '13 at 12:14
  • Actually to move an image from left to center, pause for a second, then move the image to the right. – Fire Aug 24 '13 at 14:55
  • 1
    @user2711132: Did you try my code? He does this, in the second `ObjectAnimationUsingKeyFrames` there is a delay in the form of `BeginTime`. In this case you can not use double animation, you can use my example, or alternatively use [ThicknessAnimation](http://msdn.microsoft.com/en-us/library/system.windows.media.animation.thicknessanimation.aspx). It can animate the `Margin`, with the help of this you can move your image. For this animation you will be able to apply `AccelerationRatio`. [Here](http://msdn.microsoft.com/en-us/library/ms746613.aspx) is an example of AccelerationRatio. – Anatoliy Nikolaev Aug 24 '13 at 15:05
  • 1
    Anatoliy, I managed to solve the timing by adding this BeginTime="0:0:5", thanks for the example provided. – Fire Aug 24 '13 at 15:45