在WPF中的路徑動畫點

Question

我想在我的路徑中使用C＃代碼和WPF動畫3點。

我很親密，雖然我覺得代碼很混亂。

現在的一個問題是，當我爲三點中的第一點設置動畫時，它看起來像是畫出了一條行進線。

下面是它是什麼做的兩種狀態的鏈接：http://imgur.com/a/mlYPs

當動畫的箭頭左方向指向，你看到在頂部的額外線。

public class SlideOutButton : ContentControl 
{ 
    Path _arrowPath; 
    PathSegmentCollection _pathSegments; 

    public SlideOutButton(double strokeThickness = 1.0d) 
    { 
     _arrowPath = new Path(); 

     PathGeometry pathGeo = new PathGeometry(); 
     PathFigure figure = new PathFigure(); 
     _pathSegments = new PathSegmentCollection(); 
     _pathSegments.Add(new LineSegment(new Point(0, 0), true)); 
     _pathSegments.Add(new LineSegment(new Point(2, 3), true)); 
     _pathSegments.Add(new LineSegment(new Point(0, 6), true)); 
     figure.Segments = _pathSegments; 
     pathGeo.Figures.Add(figure); 

     _arrowPath.Data = pathGeo; 
     _arrowPath.Stroke = Brushes.Black; 
     _arrowPath.StrokeThickness = strokeThickness; 
     _arrowPath.Stretch = Stretch.Uniform; 

     this.Content = _arrowPath; 

     this.PreviewMouseLeftButtonUp += SlideOutButton_MouseLeftButtonUp; 
    } 

    private void SlideOutButton_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) 
    { 
     PointAnimation pointAnim = new PointAnimation(); 
     pointAnim.From = new Point(0, 0); 
     pointAnim.To = new Point(2, 0); 
     Point point = (_pathSegments.ElementAt(0) as LineSegment).Point; 
     LineSegment segment = (_pathSegments.ElementAt(0) as LineSegment); 
     segment.BeginAnimation(LineSegment.PointProperty, pointAnim); 

     PointAnimation pointAnim2 = new PointAnimation(); 
     pointAnim2.From = new Point(2, 3); 
     pointAnim2.To = new Point(0, 3); 
     Point point2 = (_pathSegments.ElementAt(1) as LineSegment).Point; 
     LineSegment segment2 = (_pathSegments.ElementAt(1) as LineSegment); 
     segment2.BeginAnimation(LineSegment.PointProperty, pointAnim2); 

     PointAnimation pointAnim3 = new PointAnimation(); 
     pointAnim3.From = new Point(0, 6); 
     pointAnim3.To = new Point(2, 6); 
     Point point3 = (_pathSegments.ElementAt(2) as LineSegment).Point; 
     LineSegment segment3 = (_pathSegments.ElementAt(2) as LineSegment); 
     segment3.BeginAnimation(LineSegment.PointProperty, pointAnim3); 
    } 

    private PathGeometry _CreatePathGeo(bool left = false) 
    { 
     PathGeometry pathGeo = new PathGeometry(); 
     PathFigure figure = new PathFigure(); 
     PathSegmentCollection pathSegments = new PathSegmentCollection(); 

     pathSegments.Clear(); 

     if (!left) 
     { 
      pathSegments.Add(new LineSegment(new Point(0, 0), true)); 
      pathSegments.Add(new LineSegment(new Point(2, 3), true)); 
      pathSegments.Add(new LineSegment(new Point(0, 6), true)); 
     } 
     else 
     { 
      pathSegments.Add(new LineSegment(new Point(2, 0), true)); 
      pathSegments.Add(new LineSegment(new Point(0, 3), true)); 
      pathSegments.Add(new LineSegment(new Point(2, 6), true)); 
     } 

     figure.Segments = pathSegments; 
     pathGeo.Figures.Add(figure); 
     return pathGeo; 
    } 
} 

也請讓我知道如果你能想到的一個更簡單的方法來創建此動畫。 （僅使用C＃）。

謝謝！

Answer 1

經過一番調試，我發現問題是我的路徑中有一個額外的點。

PathFigure類在其上有一個名爲StartPoint的屬性。當我創建自己的路徑時，總共有4個點，包括StartPoint。

爲了解決這個問題，我必須使用PathFigures StartPoint可以作爲我的第一點：

Point starPoint = (_arrowPath.Data as PathGeometry).Figures[0].StartPoint; 

然後，我只添加兩條線段是下兩點：

_pathSegments.Add(new LineSegment(new Point(2, 3), true)); 
_pathSegments.Add(new LineSegment(new Point(0, 6), true)); 

然後我使用這三點來製作動畫。