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

编辑：我对我的第一次拍摄不太满意，所以这里有一个更好的方法。