monstercho
Topic Author
Posts: 20
Joined: 26 Jan 2016, 19:54

Animate path StrokeDashOffset

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!
 
kemarofangs
Posts: 32
Joined: 13 Jun 2014, 21:30

Re: Animate path StrokeDashOffset

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
Topic Author
Posts: 20
Joined: 26 Jan 2016, 19:54

Re: Animate path StrokeDashOffset

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>
 
User avatar
sfernandez
Site Admin
Posts: 1912
Joined: 22 Dec 2011, 19:20

Re: Animate path StrokeDashOffset

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.

Who is online

Users browsing this forum: No registered users and 0 guests