How to animate Margin property in WPF How to animate Margin property in WPF wpf wpf

How to animate Margin property in WPF


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>


Actually, ya you can do what you want to do, exactly as you want to do using RenderTransform mixed with some DoubleAnimation and even add some extra flair to it, for example;

<Grid x:Name="TheObject" Opacity="0">    <Grid.RenderTransform>        <TranslateTransform x:Name="MoveMeBaby" X="50" />    </Grid.RenderTransform>    <Grid.Triggers>        <EventTrigger RoutedEvent="Grid.Loaded">            <BeginStoryboard>                <Storyboard>                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveMeBaby"                                                    Storyboard.TargetProperty="X">                        <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />                    </DoubleAnimationUsingKeyFrames>                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheObject"                                                   Storyboard.TargetProperty="Opacity">                        <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />                    </DoubleAnimationUsingKeyFrames>                </Storyboard>            </BeginStoryboard>        </EventTrigger>    </Grid.Triggers></Grid>

Will move that object 50px on the X axis and even fade it in while it does so. Give it a shot and play with the values of the X property and the KeyTime to get what you want. Hope this helps, cheers.


You can't animate Margin.Left (because Left is not a dependency property), but you can animate Margin. Use ObjectAnimationUsingKeyFrames:

<Storyboard x:Key="MoveMe">    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"             Storyboard.TargetName="GroupTileSecond"             Storyboard.TargetProperty="Margin">        <DiscreteObjectKeyFrame KeyTime="00:00:00">            <DiscreteObjectKeyFrame.Value>                <Thickness>134,70,0,0</Thickness>            </DiscreteObjectKeyFrame.Value>        </DiscreteObjectKeyFrame>        <DiscreteObjectKeyFrame KeyTime="00:00:03">            <DiscreteObjectKeyFrame.Value>                <Thickness>50,70,0,0</Thickness>            </DiscreteObjectKeyFrame.Value>        </DiscreteObjectKeyFrame>    </ObjectAnimationUsingKeyFrames></Storyboard>

There are some alternatives that allow you to use a DoubleAnimation, rather than key frames:

  1. Place your target inside a Canvas, and animate its x position using Canvas.Left.
  2. Apply a TranslateTransform to your target, and animate its x position using TranslateTransform.X.