Animate Margin values between states in 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!

David · Accepted Answer · 2010-12-16T08:50:13.420

5

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.

edited Dec 16 '10 at 08:50

answered Dec 16 '10 at 07:53

David

6,014
4
39
55

Hm, well the good news is that it kinda works. The bad news is that it kinda doesn't. See, what happens is the following. The rectangle wait for 1 second, then expands to full, then contracts. Fine, if I reverse the keyframes - I and up in the state that I want to be, but there's still a 1 second delay from GeneratedDuration. I am confused.... – Gleno Dec 16 '10 at 08:30
ah yes sorry I put the values backward, I edited the answer with the right order/values – David Dec 16 '10 at 08:37
Well, thank you for your solution. That 1 second delay thing is annoying, but it's not important for my solution, so I'll mark you as accepted answer. Thanks again. – Gleno Dec 16 '10 at 08:44
thanks, I tried an other (better) way to do this, following the guidelines for the management of visualStateGroups. Hope it works better for you – David Dec 16 '10 at 08:51
Aha! I'll make sure to check it out! Thanks again! – Gleno Dec 16 '10 at 21:18

Animate Margin values between states in WPF

1 Answers1