How to animate Margin property in WPF

Gaja Kannan picture Gaja Kannan · Feb 4, 2014 · Viewed 28k times · Source

I want to move animate an rectangle object to move it in x-axis. I am new to WPF animation, started out with the following:

<Storyboard x:Key="MoveMe">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                   Storyboard.TargetName="GroupTileSecond"
                                   Storyboard.TargetProperty="(**Margin.Left**)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="**134, 70,0,0**" />
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="**50, 70,0,0**" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Obviously found out that I cant use Margin.Left as Storyboard.TargetProperty or use 134,70,0,0 in Value property.

So, how do I move an object in XAML WPF.

Answer

Mat J picture Mat J · Feb 4, 2014

Margin property can be animated using ThicknessAnimation

<Storyboard >
     <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
        <SplineThicknessKeyFrame KeyTime="00:00:00" Value="134, 70,0,0" />
        <SplineThicknessKeyFrame KeyTime="00:00:03" Value="50, 70,0,0" />
     </ThicknessAnimationUsingKeyFrames>
</Storyboard>