在WPF中的状态之间设置边距值

Question

我正在努力让自己熟悉WPF即将开展的项目.我在状态之间设置动画边距问题.使用Blend我已经获得了以下示例XAML.如果我从代码隐藏中触发状态"大",则矩形在1秒后突然膨胀,而不是"缓和"到扩展中,这是期望的效果.

<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>

提前致谢!

Answer 1

我认为这是因为你的动画中只有一个关键帧设置为0.

试试这个 :

<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>

编辑:我对我的第一次拍摄并不是很满意,所以这是一个更好的方法.