How to Animate a Line Drawing Across a WPF Canvas Using C#?

How to Animate a Line on a Canvas in C

Question: How can I make a line slowly draw across the screen? I want to use C# code in a WPF project.

Answer:

To animate a line on a canvas in C#, follow these steps:

1. Create a canvas control on your WPF form.
2. Create a LineViewModel class that represents the line you want to animate.
3. Bind the LineViewModel to the canvas control.
4. In the LineViewModel class, define a Timer that will be used to animate the line.
5. In the Timer_Tick event handler, update the coordinates of the line to create the animation effect.
6. Set the Animate property to true to start the animation.

Here is an example code snippet that demonstrates how to create and animate a line on a canvas using the provided steps:

XAML:

<canvas x:name="MyCanvas" height="500" width="500">
  <line x:name="MyLine" x1="0" y1="0" x2="100" y2="100" stroke="Black" strokethickness="2"></line>
</canvas>

C# Code:

public partial class MainWindow : Window
{
    private LineViewModel _lineViewModel;

    public MainWindow()
    {
        InitializeComponent();

        // Create the LineViewModel.
        _lineViewModel = new LineViewModel();

        // Bind the LineViewModel to the Line control.
        MyLine.SetBinding(Line.X1Property, new Binding("X1") { Source = _lineViewModel });
        MyLine.SetBinding(Line.Y1Property, new Binding("Y1") { Source = _lineViewModel });
        MyLine.SetBinding(Line.X2Property, new Binding("X2") { Source = _lineViewModel });
        MyLine.SetBinding(Line.Y2Property, new Binding("Y2") { Source = _lineViewModel });

        // Start the animation.
        _lineViewModel.Animate = true;
    }
}

public class LineViewModel : INotifyPropertyChanged
{
    #region Timer-based Animation

    private System.Threading.Timer Timer;
    private static Random Rnd = new Random();

    private bool _animate;
    public bool Animate
    {
        get { return _animate; }
        set
        {
            _animate = value;
            NotifyPropertyChanged("Animate");
            if (value)
                StartTimer();
            else
                StopTimer();
        }
    }

    private int _animationSpeed = 1;
    public int AnimationSpeed
    {
        get { return _animationSpeed; }
        set
        {
            _animationSpeed = value;
            NotifyPropertyChanged("AnimationSpeed");
            if (Timer != null)
                Timer.Change(0, 100 / value);
        }
    }

    private static readonly List<int> _animationSpeeds = new List<int> { 1, 2, 3, 4, 5 };
    public List<int> AnimationSpeeds
    {
        get { return _animationSpeeds; }
    }

    public void StartTimer()
    {
        StopTimer();
        Timer = new Timer(x => Timer_Tick(), null, 0, 100 / AnimationSpeed);
    }

    public void StopTimer()
    {
        if (Timer != null)
        {
            Timer.Dispose();
            Timer = null;
        }
    }

    private void Timer_Tick()
    {
        X1 = X1 + Rnd.Next(-2, 3);
        Y1 = Y1 + Rnd.Next(-2, 3);
        X2 = X2 + Rnd.Next(-2, 3);
        Y2 = Y2 + Rnd.Next(-2, 3);
    }

    #endregion

    #region Coordinates

    private double _x1;
    public double X1
    {
        get { return _x1; }
        set
        {
            _x1 = value;
            NotifyPropertyChanged("X1");
        }
    }

    private double _y1;
    public double Y1
    {
        get { return _y1; }
        set
        {
            _y1 = value;
            NotifyPropertyChanged("Y1");
        }
    }

    private double _x2;
    public double X2
    {
        get { return _x2; }
        set
        {
            _x2 = value;
            NotifyPropertyChanged("X2");
        }
    }

    private double _y2;
    public double Y2
    {
        get { return _y2; }
        set
        {
            _y2 = value;
            NotifyPropertyChanged("Y2");
        }
    }

    #endregion

    #region Other Properties

    private string _name;
    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            NotifyPropertyChanged("Name");
        }
    }

    private double _thickness;
    public double Thickness
    {
        get { return _thickness; }
        set
        {
            _thickness = value;
            NotifyPropertyChanged("Thickness");
        }
    }

    public Color Color1 { get; set; }
    public Color Color2 { get; set; }

    private double _opacity = 1;
    public double Opacity
    {
        get { return _opacity; }
        set
        {
            _opacity = value;
            NotifyPropertyChanged("Opacity");
        }
    }

    #endregion

    #region INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        Application.Current.Dispatcher.BeginInvoke((Action)(() =>
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }));
    }

    #endregion
}</int></int></int>

Using this approach, you can create a line that slowly redraws across the canvas at a customizable speed.

The above is the detailed content of How to Animate a Line Drawing Across a WPF Canvas Using C#?. For more information, please follow other related articles on the PHP Chinese website!