CODEWITHSUNDEEP
c#wpfxaml
tabby
tabby

Reputation: 1918

Is it Possible to animate path.Data

I have code something like this:

<Path x:Name="arrow" StrokeThickness="3" Stroke="Black"  Data="M34,115 C45,106 91,119 105,112 119,105 172,75.004352 188,82.003591" />

what I want is to animate the Data property of the path. I'm searching this from last two days didn't find a solution. what I actually want is to show path bit by bit.

Does anyone have any Idea?

Upvotes: 5

Views: 1078

Answers (1)

Chris W.
Chris W.

Reputation: 23280

"what I actually want is to show path bit by bit"

Do you mean something like this?

<Grid VerticalAlignment="Center" HorizontalAlignment="Center" >
    <Grid.Resources>
        <Storyboard x:Key="CWTrace">
            <!-- To run opposite direction, just swap the 'From' and 'To' values. -->
            <DoubleAnimation BeginTime="00:00:0.5" RepeatBehavior="Forever"
                         Storyboard.TargetName="arrow" 
                         Storyboard.TargetProperty="StrokeDashOffset" 
                         Duration="0:0:5" From="100" To="0"/>
        </Storyboard>
    </Grid.Resources>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource CWTrace}"/>
        </EventTrigger>
    </Grid.Triggers>
    <Path x:Name="arrow" 
          StrokeDashOffset="0" StrokeDashArray="100"
          StrokeThickness="3" Stroke="Black"  
          Data="M34,115 C45,106 91,119 105,112 119,105 172,75.004352 188,82.003591"/>
</Grid>

enter image description here

Obviously remove the RepeatBehavior for a one time anim, and tinker with values to get exactly what you're after. Cheers.

Upvotes: 12

Related Questions