Как нарисовать соединительные линии между двумя элементами управления на сетке WPF

Я создаю элементы управления (например, кнопки) на сетке. Я хочу создать соединительную линию между элементами управления. Скажите, что вы делаете mousedown на одной кнопке и отпустите мышь над другой кнопкой. Это должно сделать линию между этими двумя кнопками.

Может кто-нибудь помочь мне или дать мне несколько идей о том, как это сделать?

Спасибо заранее!

Ответ 1

Я делаю что-то подобное; здесь краткое изложение того, что я сделал:

Перетаскивание

Для обработки перетаскивания между элементами управления существует довольно много литературы в Интернете (просто искать перетаскивание WPF). Реализация перетаскивания по умолчанию чрезмерно сложна, IMO, и мы закончили использование некоторых подключенных DP, чтобы упростить (аналогично этим), В принципе, вам нужен метод перетаскивания, который выглядит примерно так:

        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 поднимается (т.е. Когда элемент управления перемещается/изменяется/etc), управление пересчитывает его AnchorPoint. Когда добавляется соединительная строка, она привязывается к DependencyProperties как исходных, так и целевых AnchorPoints. [ РЕДАКТИРОВАТЬ. Как заметил Рэй Бернс в комментариях, холст и сетка просто должны находиться в одном месте; им не нужно быть одной и той же иерархией (хотя они могут быть)]

Для обновления позиции 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. Вот пример из GraphSharp. Используя этот метод, вы можете добавить стрелки в конец строки, использовать кривые Безье, чтобы сделать его более естественным, проложите линию вокруг других элементов управления (хотя это может быть сложнее, чем это звучит) и т.д. и т.д.

Ответ 1

Перетаскивание

Рисование линии

См. также