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

时间:2010-05-12 22:40:09

标签: wpf wpf-controls grid lines connector

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

有人可以帮助我或者就如何做到这一点给我一些想法吗?

提前致谢!

1 个答案:

答案 0 :(得分:44)

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

拖动&降

为了处理控件之间的拖放,网上有很多文献(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。添加连接线时,它会绑定源和目标的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)等等。 / p>


另见