Animation Field Values ​​Between States in WPF

Question

I am trying to get acquainted with WPF for an upcoming project. I have problems animating fields between states. Using Blend, I got the following XAML sample. If I call the "Big" state from the code, the rectangle suddenly expands after 1 second instead of "loosening" in the extension, 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 this is because in the animation you only have one keyframe equal to 0.

try the following:

 <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 happy with my first shot, so here is the best way to do this.