在兩個橢圓之間連接一條線

Question

我試圖在兩個橢圓之間連接一條線，如果拖動了一條線，線就會隨之移動。我有一個畫布，裏面有兩個堆疊面板......每個堆疊面板左邊是一個橢圓......中間是內容控制......右邊是另一個橢圓。這個想法是將一個堆疊面板中的右橢圓與第二個堆疊面板中的左橢圓連接起來。到目前爲止，我有這個，但似乎沒有得到更遠，因爲用於綁定的propertypath對我沒有太大的意義......這就是爲什麼我現在有一個Canvas。

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/