Databases
StackOverflow2013
Postsdbo
POHow to Animate a line connected to an object on Dragcompleted?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Animate a line connected to an object on Dragcompleted?
    primarykey
    data
    text
    <p>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. </p> <p>Here's my code:XAML</p> <pre><code>&lt;my:MyThumb x:Name="myThumb1" LayoutUpdated="myThumb1_LayoutUpdated" DragCompleted="OnDragCompleted" DragDelta="OnDragDelta" Canvas.Left="250" Canvas.Top="70" Template="{StaticResource template1}"&gt; &lt;/my:MyThumb&gt; &lt;my:MyThumb x:Name="myThumb2" DragCompleted="OnDragCompleted" DragDelta="OnDragDelta" Canvas.Left="50" Canvas.Top="70" Template="{StaticResource template1}"/&gt; </code></pre> <p>In code Behind:</p> <pre><code> 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) =&gt; da_Completed(sender, e, x1, y1, thumb)); myDoubleAnimation2.Completed += new EventHandler((sender, e) =&gt; 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); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USepistemex
    1. USBan_Midou
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload