在 wpf 故事板中更改 Path.Data答案

【问题标题】：Change Path.Data in a wpf storyboard在 wpf 故事板中更改 Path.Data
【发布时间】：2011-12-11 13:02:28
【问题描述】：

如何在 wpf 中为路径数据设置动画？我们有一系列更改此属性的模板silverlight-5 控件；这些控件需要适应在 wpf 中工作。在 wpf 中，当 VSM 尝试更改状态时，它会崩溃并出现以下异常：

无法使用“System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames”为“System.Windows.Shapes.Path”上的“Data”属性设置动画

内部异常：应用于“数据”属性的动画计算出 [XXX-The path data-] 的当前值，该值不是该属性的有效值。

下面有一个按钮控件的示例：从圆形到星形的路径 - 这如何在 wpf 中实现？

    <Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data)" Storyboard.TargetName="path">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>M 291.42858 512.36218 216.73569 387.62221 74.321018 416.8994 169.87441 307.31546 98.0216 180.91821 l 133.74814 57.01338 98.00719 -107.39498 -12.89251 144.82014 132.42459 60.0235 -141.71614 32.49039 z</DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Viewbox>
                        <Path x:Name="path" Stroke="Black" Fill="Black" UseLayoutRounding="False" Data="m 357.14285 425.21933 c 0 71.79702 -58.20298 130 -130 130 -71.79701 0 -129.999997 -58.20298 -129.999997 -130 0 -71.79702 58.202987 -130 129.999997 -130 71.79702 0 130 58.20298 130 130 z"/>
                        </Viewbox>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【问题讨论】：

标签： wpf silverlight xaml animation wpf-controls

【解决方案1】：

如果您不创建对象实例，则使用元素语法毫无意义，它仍然是一个字符串并且Data 是Geometry，只需将其包装在所述标记中即可。

<DiscreteObjectKeyFrame.Value>
    <Geometry>
        M 291.42858 512.36218 216.73569 387.62221 74.321018 416.8994 169.87441 307.31546 98.0216 180.91821 l 133.74814 57.01338 98.00719 -107.39498 -12.89251 144.82014 132.42459 60.0235 -141.71614 32.49039 z
    </Geometry>
</DiscreteObjectKeyFrame.Value>

【讨论】：