wpf - 如何在网格 WPF 上的两个控件之间绘制连接线

Question

我正在网格上创建控件(比如按钮)。我想在控件之间创建一条连接线。
假设您在一个按钮上执行 mousedown 并在另一个按钮上释放鼠标。这应该在这两个按钮之间画一条线。

有人可以帮助我或给我一些关于如何做到这一点的想法吗？

提前致谢!

Answer 1

我正在做类似的事情；这是我所做的快速总结:

拖放

对于处理控件之间的拖放，网络上有相当多的文献(just search WPF drag-and-drop)。默认的拖放实现过于复杂，IMO，我们最终使用了一些附加的 DP 以使其更容易(similar to these)。基本上，您需要一个看起来像这样的拖动方法:

private void onMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    UIElement element = sender as UIElement;
    if (element == null)
        return;
    DragDrop.DoDragDrop(element, new DataObject(this), DragDropEffects.Move);
}

在目标上，将 AllowDrop 设置为 true，然后将事件添加到 Drop:

private void onDrop(object sender, DragEventArgs args)
{
    FrameworkElement elem = sender as FrameworkElement;
    if (null == elem)
        return;
    IDataObject data = args.Data;
    if (!data.GetDataPresent(typeof(GraphNode))
        return;
    GraphNode node = data.GetData(typeof(GraphNode)) as GraphNode;
    if(null == node)
        return;

            // ----- Actually do your stuff here -----
}

画线

现在是棘手的部分!每个控件都公开一个 AnchorPoint DependencyProperty .当 LayoutUpdated 事件引发时(即当控件移动/调整大小/等时)，控件会重新计算其 AnchorPoint。添加连接线时，它会绑定(bind)到源和目标的 AnchorPoints 的 DependencyProperties。 [ 编辑 :正如 Ray Burns 在评论中指出的那样， Canvas 和网格只需要在同一个地方；它们不需要在同一层次结构中(尽管它们可能是)]

用于更新位置 DP:

private void onLayoutUpdated(object sender, EventArgs e)
{
    Size size = RenderSize;
    Point ofs = new Point(size.Width / 2, isInput ? 0 : size.Height);
    AnchorPoint = TransformToVisual(node.canvas).Transform(ofs);
}

用于创建线类(也可以在 XAML 中完成):

public sealed class GraphEdge : UserControl
{
    public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(Point), typeof(GraphEdge), new FrameworkPropertyMetadata(default(Point)));
    public Point Source { get { return (Point) this.GetValue(SourceProperty); } set { this.SetValue(SourceProperty, value); } }

    public static readonly DependencyProperty DestinationProperty = DependencyProperty.Register("Destination", typeof(Point), typeof(GraphEdge), new FrameworkPropertyMetadata(default(Point)));
    public Point Destination { get { return (Point) this.GetValue(DestinationProperty); } set { this.SetValue(DestinationProperty, value); } }

    public GraphEdge()
    {
        LineSegment segment = new LineSegment(default(Point), true);
        PathFigure figure = new PathFigure(default(Point), new[] { segment }, false);
        PathGeometry geometry = new PathGeometry(new[] { figure });
        BindingBase sourceBinding = new Binding {Source = this, Path = new PropertyPath(SourceProperty)};
        BindingBase destinationBinding = new Binding { Source = this, Path = new PropertyPath(DestinationProperty) };
        BindingOperations.SetBinding(figure, PathFigure.StartPointProperty, sourceBinding);
        BindingOperations.SetBinding(segment, LineSegment.PointProperty, destinationBinding);
        Content = new Path 
        {
            Data = geometry,
            StrokeThickness = 5,
            Stroke = Brushes.White,
            MinWidth = 1,
            MinHeight = 1
        };
    }
}

如果您想变得更漂亮，可以在源和目标上使用 MultiValueBinding，并添加一个创建 PathGeometry 的转换器。 Here's an example from GraphSharp.使用这种方法，您可以在线条的末端添加箭头，使用贝塞尔曲线使其看起来更自然，将线条围绕其他控件( though this could be harder than it sounds)等，等等。

也可以看看

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/dd246675-bc4e-4d1f-8c04-0571ea51267b

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part2.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part3.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part4.aspx

http://www.syncfusion.com/products/user-interface-edition/wpf/diagram

http://www.mindscape.co.nz/products/wpfflowdiagrams/