Question

我正在尝试连接两个椭圆之间的一条线，如果有一条线被拖动，那么线就会随之移动。我有一个画布，里面有两个堆叠面板......每个堆叠面板左边是一个椭圆形......中间有内容控件......右边是另一个椭圆形。我们的想法是将一个堆叠面板中的右椭圆与第二个堆叠面板中的左椭圆之间的直线连接起来。到目前为止，我有这个，但似乎无法进一步，因为用于绑定的属性路径对我来说没有太大的意义......这就是为什么我现在有一个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/

在两个椭圆之间连接一条线

1 个答案: