wpf ObjectAnimationUsingKeyFrames setting the left value

Question

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.

Answer 1

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>