Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WPF Path Stroke Animation
<Window x:Class="PathDemo.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="PathDemo" Height="400" Width="800" Name="UI">
<Grid DataContext="{Binding ElementName=UI}">
<Path x:Name="lo" Data="M 50,100 S 100,132 150,86 200,173 250,76 300,81 350,136 400,87 450,166 500,87 550,96"
Stroke="White" StrokeThickness="13" StrokeDashArray="{Binding StrokeArray}" />
<Path Name="core" Data="M 50,100 S 100,132 150,86 200,173 250,76 300,81 350,136 400,87 450,166 500,87 550,96"
Stroke="Blue" StrokeThickness="2">
<Path.OpacityMask>
<VisualBrush Visual="{Binding ElementName=lo}" />
</Path.OpacityMask>
</Path>
<Button Content="Start" Height="49" Width="150" Click="Button_Click_1"
Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="97,167,0,0" />
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace PathDemo
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
public double StrokeValue
{
get { return (double)GetValue(StrokeValueProperty); }
set { SetValue(StrokeValueProperty, value); }
}
public static readonly DependencyProperty StrokeValueProperty =
DependencyProperty.Register("StrokeValue", typeof(double), typeof(Window1)
, new PropertyMetadata(0.0, new PropertyChangedCallback(OnStrokeValueChanged)));
private static void OnStrokeValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
(d as Window1).StrokeArray = new DoubleCollection { (double)e.NewValue, 100 };
}
public DoubleCollection StrokeArray
{
get { return (DoubleCollection)GetValue(StrokeArrayProperty); }
set { SetValue(StrokeArrayProperty, value); }
}
public static readonly DependencyProperty StrokeArrayProperty =
DependencyProperty.Register("StrokeArray", typeof(DoubleCollection), typeof(Window1)
, new PropertyMetadata(new DoubleCollection { 0, 100 }));
private void Button_Click_1(object sender, RoutedEventArgs e)
{
var storyboard = new Storyboard();
var animation = new DoubleAnimation(0,50,new Duration(TimeSpan.FromSeconds(5)));
storyboard.Children.Add(animation);
Storyboard.SetTarget(animation, this);
Storyboard.SetTargetProperty(animation,new PropertyPath( Window1.StrokeValueProperty));
storyboard.Begin();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.