Подключить линию между двумя эллипсами

Question

Я пытаюсь подключить линию между двумя эллипсами, где, если бы ее перетащили, она перемещалась бы с ней. У меня есть холст и внутри, это две стековые панели ... в каждой панели стека находится эллипс слева ... управление содержимым в середине ... и еще один эллипс справа. Идея состоит в том, чтобы связать линию между правым эллипсом от одной панели стека до левого эллипса во второй панели стека. До сих пор у меня это есть, но, похоже, не намного лучше, поскольку путь свойства, используемый для выполнения привязки, не имеет для меня слишком большого смысла ... вот почему у меня сейчас есть Холст.

Line line = new Line(); 
line.Stroke = connectedEllipse.Fill; 
line.StrokeThickness = 2; 

Binding x1 = new Binding(); 
Binding x2 = new Binding(); 
Binding y1 = new Binding(); 
Binding y2 = new Binding(); 

x1.Path = new PropertyPath(Canvas.LeftProperty); 
x2.Path = new PropertyPath(Canvas.LeftProperty); 
y1.Path = new PropertyPath(Canvas.TopProperty); 
y2.Path = new PropertyPath(Canvas.TopProperty); 

x1.Source = y1.Source = connectedEllipse; 
x2.Source = y2.Source = (sender as Ellipse); 

line.SetBinding(Line.X1Property, x1); 
line.SetBinding(Line.X2Property, x2); 
line.SetBinding(Line.Y1Property, y1); 
line.SetBinding(Line.Y2Property, y2); 

Answer 1

Хорошо, я взломал код, который не использует метод прикрепленных свойств. Вероятно, это не «хороший» код, так как я написал его через 20 минут, но он вас запустит.

MainWindow.xaml

<Window x:Class="EllipseTest.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:my="clr-namespace:EllipseTest" 
     Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded" > 
    <Window.Resources> 
     <ControlTemplate x:Key="template1"> 
      <Ellipse Width="60" Height="30" Fill="Blue" /> 
     </ControlTemplate> 
    </Window.Resources> 
    <Canvas Name="canvas"> 
     <my:ExtendedThumb x:Name="thumb1" Canvas.Left ="0" Canvas.Top="0" DragDelta="myThumb_DragDelta" Template="{StaticResource template1}" /> 
     <my:ExtendedThumb x:Name="thumb2" Canvas.Left ="50" Canvas.Top="20" DragDelta="myThumb_DragDelta" Template="{StaticResource template1}" /> 
    </Canvas> 
</Window> 

MainWindow.xaml.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
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.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes; 

namespace EllipseTest 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     Path path; 

     public MainWindow() 
     { 
     InitializeComponent(); 
     } 

     private void myThumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e) 
     { 
     ExtendedThumb thumb = e.Source as ExtendedThumb; 
     Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange); 
     Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange); 
     if (thumb == thumb1) 
      UpdateLine(thumb, thumb2); 
     else 
      UpdateLine(thumb1, thumb); 
     } 

     private void UpdateLine(ExtendedThumb firstThumb, ExtendedThumb secondThumb) 
     { 
     double left1 = Canvas.GetLeft(firstThumb); 
     double top1 = Canvas.GetTop(firstThumb); 

     double left2 = Canvas.GetLeft(secondThumb); 
     double top2 = Canvas.GetTop(secondThumb); 

     thumb1.ConnectingLine.StartPoint = new Point(left1 +firstThumb.ActualWidth/2, top1 + firstThumb.ActualHeight/2); 
     thumb1.ConnectingLine.EndPoint = new Point(left2 + secondThumb.ActualWidth/2, top2 + secondThumb.ActualHeight/2); 

     thumb2.ConnectingLine.StartPoint = new Point(left2 + secondThumb.ActualWidth/2, top2 + secondThumb.ActualHeight/2); 
     thumb2.ConnectingLine.EndPoint = new Point(left1 + firstThumb.ActualWidth/2, top1 + firstThumb.ActualHeight/2); 

     } 

     private void Window_Loaded(object sender, RoutedEventArgs e) 
     { 
     path = new Path(); 
     path.Stroke = Brushes.Black; 
     path.StrokeThickness = 2; 

     canvas.Children.Add(path); 

     LineGeometry line = new LineGeometry(); 
     path.Data = line; 

     thumb1.ConnectingLine = line; 
     thumb2.ConnectingLine = line; 

     UpdateLine(thumb1, thumb2); 

     } 
    } 
} 

ExtendedThumb.cs

using System; 
using System.Collections.Generic; 
using System.Windows.Controls.Primitives; 
using System.Windows.Media; 
using System.Linq; 
using System.Text; 

namespace EllipseTest 
{ 
    public class ExtendedThumb : Thumb 
    { 
     public LineGeometry ConnectingLine { get; set; } 

     public ExtendedThumb() : base() { ConnectingLine = new LineGeometry(); } 
    } 
} 

Кроме того, я получил представление от содержания этой ссылке: http://denisvuyka.wordpress.com/2007/10/13/wpf-draggable-objects-and-simple-shape-connectors/