Home/ Questions/Q 6931169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:32:33+00:00

How does one animate path data in wpf? We have a series of templated

  • 0

How does one animate path data in wpf? We have a series of templated silverlight-5 controls which change this property; these controls need to be adapted to work in wpf. In wpf, when the VSM tries to change the state, it crashes with the following exception:

Cannot animate the ‘Data’ property on a ‘System.Windows.Shapes.Path’ using a ‘System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames’

Inner exception:
The animation(s) applied to the ‘Data’ property calculate a current value of [XXX-The path data-] , which is not a valid value for the property.

There is an example below for a button-control: a path which goes from a circle to a star- how can this be implimented in 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    No point in using element syntax if you do not create an object instance, it’s still a string and the Data is Geometry, just wrap it in said tag and it should work.

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