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

时间:2010-12-16 02:22:25

标签: wpf xaml blend

我正在尝试熟悉即将开展项目的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>

提前致谢!

1 个答案:

答案 0 :(得分:5)

我认为这是因为你的动画中只有一个关键帧设置为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>

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