Wie zeichne Verbindungslinien zwischen zwei Kontrollen auf einem Raster WPF

Bin ich erzeugen von controls (z.B. Taste), die auf einem raster. Ich möchte zum erstellen einer Verbindungslinie zwischen den Kontrollen.
Sagen Sie Sie tun mousedown auf eine Schaltfläche, und lassen Sie die Maustaste über eine andere Schaltfläche. Dies sollte ziehen Sie eine Linie zwischen diesen beiden Tasten.

Kann jemand helfen mir oder geben Sie mir einige Ideen, wie dies zu tun?

Vielen Dank im Voraus!

InformationsquelleAutor der Frage Scooby | 2010-05-12

  1. 42

    Mache ich etwas ähnliches; hier ist eine kurze Zusammenfassung was ich gemacht habe:

    Drag & Drop

    Für den Umgang mit der drag-und-drop zwischen Steuerelementen gibt es einiges an Literatur auf dem web (suchen Sie einfach WPF-drag-und-drop). Die Standard-drag-and-drop-Umsetzung ist zu Komplex, IMO, und wir landeten mit einigen anhängenden DPs um es einfacher zu machen (ähnlich wie diese). Im Grunde wollen Sie eine drag-Methode, die wie folgt aussieht:

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

    Auf das Ziel AllowDrop auf true, dann fügen Sie ein Ereignis 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 -----
    }

    Zeichnen Sie die Linie,

    Nun der knifflige Teil! Jedes Steuerelement stellt eine AnchorPoint DependencyProperty. Wenn die LayoutUpdated Ereignis ausgelöst wird (d.h., wenn das Steuerelement bewegt/ändert/etc), die Steuerung berechnet den AnchorPoint. Wenn Sie eine Verbindungslinie Hinzugefügt wird, bindet Sie an die DependencyProperties der Quell-und Ziel-durch Ankerpunkte. [BEARBEITEN: Als Ray Brennt darauf hingewiesen, in den Kommentaren die Leinwand und das Netz muss nur im selben Ort; Sie brauchen nicht zu int der gleichen Hierarchie (obwohl Sie auch sein mögen)]

    Für die Aktualisierung der position 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);
    }

    Für die Erstellung der Linie Klasse (in 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
        };
    }
}

    Wenn Sie wollen zu bekommen eine Menge Liebhaber, die Sie verwenden können, eine MultiValueBinding auf Quelle und Ziel, und fügen Sie einen Konverter erstellt, der PathGeometry. Hier ist ein Beispiel aus GraphSharp. Mit dieser Methode fügen Sie Pfeile, um das Ende der Zeile, verwenden Sie Bezier-Kurven, um es natürlicher Aussehen, route der Linie um andere Steuerelemente (obwohl dies könnte schwieriger werden als es klingt), etc., etc.

    Siehe auch

    InformationsquelleAutor der Antwort

Schreibe einen Kommentar