How to Animate a line connected to an object on Dragcompleted? - wpf

Question

My problem is that i have 2 nodes connected with a line. When one node is dragged to any position on the canvas, it needs to come back to its original position. Also, while coming back to its original position needs to be animated (oscillate function or bounce/elastic ease effect). the problem here is while i have managed to animate the node, the line joining the nodes doesnt stick to it.
Also the nodes are not on the xaml. They are in code behind generated dynamically. Hence i couldn't use LayoutUpdated event as well.
Here's my code:XAML
<my:MyThumb x:Name="myThumb1" LayoutUpdated="myThumb1_LayoutUpdated" DragCompleted="OnDragCompleted" DragDelta="OnDragDelta" Canvas.Left="250" Canvas.Top="70" Template="{StaticResource template1}">
</my:MyThumb>
<my:MyThumb x:Name="myThumb2" DragCompleted="OnDragCompleted" DragDelta="OnDragDelta" Canvas.Left="50" Canvas.Top="70" Template="{StaticResource template1}"/>
In code Behind:
private void OnDragDelta(object sender, DragDeltaEventArgs e)
{
var thumb = e.Source as MyThumb;
var left = Canvas.GetLeft(thumb) + e.HorizontalChange;
var top = Canvas.GetTop(thumb) + e.VerticalChange;
Canvas.SetLeft(thumb, left);
Canvas.SetTop(thumb, top);
double x1 = Canvas.GetLeft(thumb) - e.HorizontalChange; //previous
double y1 = Canvas.GetTop(thumb) - e.VerticalChange; //previous
double x2 = Canvas.GetLeft(thumb); //current
double y2 = Canvas.GetTop(thumb); //current
this.Lable1.Content = "Old x=" + x1 + "|old y=" + y1 + "|new x=" + x2 + "|new y=" + y2;
}
private void OnDragCompleted(object sender, DragCompletedEventArgs e)
{
var thumb = e.Source as MyThumb;
double x1 = Canvas.GetLeft(thumb) - e.HorizontalChange;
double y1 = Canvas.GetTop(thumb) - e.VerticalChange;
double x2 = Canvas.GetLeft(thumb);
double y2 = Canvas.GetTop(thumb);
AnimateThis4(x1, x2, y1, y2, thumb);
}
private void AnimateThis4(double x1, double x2, double y1, double y2, MyThumb thumb)
{
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation2.Duration = duration;
myDoubleAnimation1.FillBehavior = FillBehavior.Stop;
myDoubleAnimation2.FillBehavior = FillBehavior.Stop;
ElasticEase ea = new ElasticEase();
ea.EasingMode = EasingMode.EaseOut;
ea.Springiness = 2;
ea.Oscillations = 5;
myDoubleAnimation1.EasingFunction = ea;
myDoubleAnimation2.EasingFunction = ea;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
sb.Children.Add(myDoubleAnimation2);
Storyboard.SetTarget(myDoubleAnimation1, thumb);
Storyboard.SetTarget(myDoubleAnimation2, thumb);
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));
//Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath(TranslateTransform.XProperty));
//Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath(TranslateTransform.YProperty));
myDoubleAnimation1.From = x2;
myDoubleAnimation2.From = y2;
myDoubleAnimation1.To = x1;
myDoubleAnimation2.To = y1;
myDoubleAnimation1.Completed += new EventHandler((sender, e) => da_Completed(sender, e, x1, y1, thumb));
myDoubleAnimation2.Completed += new EventHandler((sender, e) => da_Completed(sender, e, x1, y1, thumb));
// Begin the animation.
sb.Begin();
this.Lable1.Content = "Old x=" + x1 + "|old y=" + y1 + "|new x=" + x2 + "|new y=" + y2;
}
// AFTER ANIMATION IS OVER, SET THE THUMB POSITION TO ORIGINAL
void da_Completed(object sender, EventArgs e, double X, double Y, MyThumb thumb)
{
Canvas.SetLeft(thumb, X);
Canvas.SetTop(thumb, Y);
}
// LINE IS CREATED HERE. I CANT SEEM TO BIND THE THUMB TO THE LINE
private void btnJoinLineClick(object sender, RoutedEventArgs e)
{
line = new Line();
myCanvas.Children.Add(line);
line.Stroke = Brushes.Red;
line.StrokeThickness = 2;
line.X1 = Canvas.GetLeft(myThumb2) + myThumb2.ActualWidth / 2;
line.Y1 = Canvas.GetTop(myThumb2) + myThumb2.ActualHeight / 2;
line.X2 = Canvas.GetLeft(myThumb1) + myThumb1.ActualWidth / 2;
line.Y2 = Canvas.GetTop(myThumb1) + myThumb1.ActualHeight / 2;
//DependencyProperty dpX1 = Line.X1Property;
//Binding b1 = new Binding();
//b1.Path = new PropertyPath("Canvas.Left");
//b1.ElementName = this.myThumb2.Name;
////b.Source = itemsControl.ItemContainerGenerator.ContainerFromIndex(0);
//BindingOperations.SetBinding(line, dpX1, b1);
//DependencyProperty dpY1 = Line.Y1Property;
//Binding b2 = new Binding();
//b2.Path = new PropertyPath("Canvas.Top");
//b2.ElementName = this.myThumb2.Name;
////b.Source = itemsControl.ItemContainerGenerator.ContainerFromIndex(0);
//BindingOperations.SetBinding(line, dpY1, b2);
DependencyProperty dpX2 = Line.X2Property;
Binding b3 = new Binding();
b3.Path = new PropertyPath("Canvas.Left");
//b3.ElementName = this.myThumb1.Name;
b3.Source = Canvas.GetLeft(myThumb1) + myThumb1.ActualWidth / 2;
//b.Source = itemsControl.ItemContainerGenerator.ContainerFromIndex(0);
BindingOperations.SetBinding(line, dpX2, b3);
DependencyProperty dpY2 = Line.Y2Property;
Binding b4 = new Binding();
b4.Path = new PropertyPath("Canvas.Top");
b4.ElementName = this.myThumb1.Name;
//b4.Source = Canvas.GetTop(myThumb1) + myThumb1.ActualHeight / 2;
BindingOperations.SetBinding(line, dpY2, b4);
}

Answer 1

Code may be a little ugly...but it works, wish this will help you, any problem just leave a comment.
There are two point you need take care.
1, WPF do not support string propertyPath when you try to binding attached DP to an element, you can use new PropertyPath(Canvas.TopProperty) instead of "Canvas.Top", but in your scenario, we need center position of thumb, so you cann't binding this property directly.
2, since we use our custom DP, we need update this property when animation start(AddValueChanged statement).
namespace WpfApplicationThumbDrag
{
public class MyThumb : Thumb
{
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
this.DragDelta += thumb_DragDelta;
this.DragCompleted += new DragCompletedEventHandler(MyThumb_DragCompleted);
this.Loaded += (s, e) => { UpdateCenter(); };
var left = DependencyPropertyDescriptor.FromProperty(Canvas.LeftProperty, typeof(Canvas));
var right = DependencyPropertyDescriptor.FromProperty(Canvas.RightProperty, typeof(Canvas));
left.AddValueChanged(this, OnCanvasLeftRightChanged);
right.AddValueChanged(this, OnCanvasLeftRightChanged);
}
private void OnCanvasLeftRightChanged(object sender, EventArgs e)
{
UpdateCenter();
}
private void MyThumb_DragCompleted(object sender, DragCompletedEventArgs e)
{
var thumb = e.Source as MyThumb;
double x1 = Canvas.GetLeft(thumb) - e.HorizontalChange;
double y1 = Canvas.GetTop(thumb) - e.VerticalChange;
double x2 = Canvas.GetLeft(thumb);
double y2 = Canvas.GetTop(thumb);
AnimateThis4(x1, x2, y1, y2, thumb);
}
private void AnimateThis4(double x1, double x2, double y1, double y2, MyThumb thumb)
{
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation2.Duration = duration;
myDoubleAnimation1.FillBehavior = FillBehavior.Stop;
myDoubleAnimation2.FillBehavior = FillBehavior.Stop;
ElasticEase ea = new ElasticEase();
ea.EasingMode = EasingMode.EaseOut;
ea.Springiness = 2;
ea.Oscillations = 5;
myDoubleAnimation1.EasingFunction = ea;
myDoubleAnimation2.EasingFunction = ea;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
sb.Children.Add(myDoubleAnimation2);
Storyboard.SetTarget(myDoubleAnimation1, thumb);
Storyboard.SetTarget(myDoubleAnimation2, thumb);
Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));
//Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath(TranslateTransform.XProperty));
//Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath(TranslateTransform.YProperty));
myDoubleAnimation1.From = x2;
myDoubleAnimation2.From = y2;
myDoubleAnimation1.To = x1;
myDoubleAnimation2.To = y1;
myDoubleAnimation1.Completed += new EventHandler((sender, e) => da_Completed(sender, e, x1, y1, thumb));
myDoubleAnimation2.Completed += new EventHandler((sender, e) => da_Completed(sender, e, x1, y1, thumb));
// Begin the animation.
sb.Begin();
}
// AFTER ANIMATION IS OVER, SET THE THUMB POSITION TO ORIGINAL
void da_Completed(object sender, EventArgs e, double X, double Y, MyThumb thumb)
{
Canvas.SetLeft(thumb, X);
Canvas.SetTop(thumb, Y);
}
public Point Center
{
get { return (Point)GetValue(CenterProperty); }
set { SetValue(CenterProperty, value); }
}
public static readonly DependencyProperty CenterProperty =
DependencyProperty.Register("Center", typeof(Point), typeof(MyThumb), new UIPropertyMetadata(new Point()));
private void thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
var left = Canvas.GetLeft(this) + e.HorizontalChange;
var top = Canvas.GetTop(this) + e.VerticalChange;
Canvas.SetLeft(this, left);
Canvas.SetTop(this, top);
}
private void UpdateCenter()
{
var p = new Point();
p.X = Canvas.GetLeft(this) + this.ActualWidth / 2;
p.Y = Canvas.GetTop(this) + this.ActualHeight / 2;
this.Center = p;
}
}
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btnJoinLine_Click(object sender, RoutedEventArgs e)
{
var line = new Line();
myCanvas.Children.Add(line);
line.Stroke = Brushes.Red;
line.StrokeThickness = 2;
line.X1 = Canvas.GetLeft(myThumb2) + myThumb2.ActualWidth / 2;
line.Y1 = Canvas.GetTop(myThumb2) + myThumb2.ActualHeight / 2;
line.X2 = Canvas.GetLeft(myThumb1) + myThumb1.ActualWidth / 2;
line.Y2 = Canvas.GetTop(myThumb1) + myThumb1.ActualHeight / 2;
//Binding Line start X
var binding1 = new Binding();
binding1.ElementName = "myThumb1";
binding1.Path = new PropertyPath("Center.X");
BindingOperations.SetBinding(line, Line.X1Property, binding1);
//Binding Line start Y
var binding11 = new Binding();
binding11.ElementName = "myThumb1";
binding11.Path = new PropertyPath("Center.Y");
BindingOperations.SetBinding(line, Line.Y1Property, binding11);
//Binding Line end X
var binding2 = new Binding();
binding2.ElementName = "myThumb2";
binding2.Path = new PropertyPath("Center.X");
BindingOperations.SetBinding(line, Line.X2Property, binding2);
//Binding Line end Y
var binding22 = new Binding();
binding22.ElementName = "myThumb2";
binding22.Path = new PropertyPath("Center.Y");
BindingOperations.SetBinding(line, Line.Y2Property, binding22);
}
}
}
<Window x:Class="WpfApplicationThumbDrag.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplicationThumbDrag"
Title="MainWindow"
Width="525"
Height="350">
<Canvas x:Name="myCanvas">
<local:MyThumb x:Name="myThumb1"
Canvas.Left="250"
Canvas.Top="70"
Width="100"
Height="30" />
<local:MyThumb x:Name="myThumb2"
Canvas.Left="50"
Canvas.Top="70"
Width="100"
Height="30" />
<Button x:Name="btnJoinLine"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="btnJoinLine_Click"
Content="join" />
</Canvas>
</Window>