Animate path StrokeDashOffset

monstercho · 14 Oct 2016, 15:43

Hi,

I fail to animate StrokeDashOffset of a path - nothing happens when I start the storyboard below (no errors).
If I change the target propery:

Storyboard.TargetProperty="(Shape.StrokeDashOffset)"
to
Storyboard.TargetProperty="(Shape.StrokeThickness)"

then the thickness is animated, but I cannot animate StrokeDashOffset.

Is there something wrong with the example below:

<Storyboard RepeatBehavior="Forever" x:Name="animRotate">
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeDashOffset)"   Storyboard.TargetName="pathCursor">
		<LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="-6" />
	</DoubleAnimationUsingKeyFrames>
</Storyboard>
....
<Canvas x:Name="panelCursor" >
	<Path x:Name="pathCursor" StrokeThickness="3" Stroke="Gray" StrokeDashArray="4,3">
		<Path.Data>
			<GeometryGroup>
				<EllipseGeometry Center="100, 100" RadiusX="40" RadiusY="40" />
			</GeometryGroup>
		</Path.Data>
	</Path>
</Canvas>

Thanks in advance!

17 Oct 2016, 22:42

Try this. I don't think EllipseGeometry is supported so you must convert it entirely to a data string.

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="Darren._Test" Width="500" Height="500">
	<UserControl.Resources>
		<Storyboard x:Key="animRotate" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeDashOffset)" Storyboard.TargetName="pathCursor">
      			<LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="-6" />
   			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
	<UserControl.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource animRotate}"/>
		</EventTrigger>
	</UserControl.Triggers>
	<Canvas>
		<Path x:Name="pathCursor" StrokeThickness="3" Stroke="Gray" StrokeDashArray="4,3"
			Data="M140,100 C140,122.09139 122.09139,140 100,140 C77.90861,140 60,122.09139 60,100 C60,77.90861 77.90861,60 100,60 C122.09139,60 140,77.90861 140,100 z" />
	</Canvas>
</UserControl>

monstercho · 18 Oct 2016, 15:52

Thanks, EllipseGeometry works, only something about the offset animation. I tried the above, but it also doesn't rotate here. By looking at the trigger I expected it to auto rotate on page load (not very experienced with xaml).

Anyway visually the effect is same if I simply rotate the path and it works:

<Storyboard RepeatBehavior="Forever" x:Name="animRotate">
    <DoubleAnimation By="360" Duration="0:0:10" Storyboard.TargetProperty="Angle" Storyboard.TargetName="pathCursorRotateTransform" />
</Storyboard>
....
<Canvas x:Name="panelCursor" >
   <Path x:Name="pathCursor" StrokeThickness="3" Stroke="Gray" StrokeDashArray="4,3">
      <Path.Data>
         <GeometryGroup>
            <EllipseGeometry Center="100, 100" RadiusX="40" RadiusY="40" />
         </GeometryGroup>
      </Path.Data>
      <Path.RenderTransform>
         <TransformGroup>
            <RotateTransform x:Name="pathCursorRotateTransform" CenterX="100" CenterY="100" /> 
         </TransformGroup>
      </Path.RenderTransform>
   </Path>
</Canvas>

19 Oct 2016, 01:34

Hi monstercho,

We found the source of the problem, the property StrokeDashOffset was not notifying about changes, so render was not updated. We will fix it for the next release.

Meanwhile you can rotate the whole Path as you did in your last post.

Sorry for the inconvenience.

Animate path StrokeDashOffset

Animate path StrokeDashOffset

Re: Animate path StrokeDashOffset

Re: Animate path StrokeDashOffset

Re: Animate path StrokeDashOffset

Who is online