Animate Margin values between states in WPF - wpf

Question

I'm trying to familiarize myself with WPF for an upcoming project. I'm having problem animating margins between states. Using Blend I've obtained the following sample XAML. If I trigger the state "Large" from codebehind, the rectangle suddenly expands after 1 second, instead of "easing" into the expansion, which is the desired effect.
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Large">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="rectangle">
<EasingThicknessKeyFrame KeyTime="0" Value="64,135,47,191"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Fill="#FFF4F4F5" Margin="428,135,47,191" Stroke="Black"/>
</Grid>
Thanks in advance!

Answer 1

I think it is because you only have one keyframe set to 0 in your animation.
try this :
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<!--Take one second to transition to the Large state.-->
<VisualTransition To="Large" GeneratedDuration="0:0:1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<!--Change the Margin to "64,135,47,191" when the states gets to "Large"-->
<VisualState x:Name="Large">
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="Margin" To="64,135,47,191" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Margin="428,135,47,191" Fill="#FFF4F4F5" Stroke="Black"/>
</Grid>
edit: I was not very pleased with my first shot, so here is a better way of doing this.