Come creare e connettere pulsanti/controlli utente personalizzati con linee usando i moduli di Windows

Question

Sto provando a creare alcuni pulsanti personalizzati o controlli utente come mostrato nella GUI proposta. La funzionalità dovrebbe essere la seguente:

I grafici o le configurazioni vengono creati graficamente.

I comandi possono essere trascinati da una barra o inserito dal destro del mouse/discesa

mediante trascinamento da un controllo a un altro, essi dovrebbero essere collegati da linee

Un commutatore deve spostare la vista da controlli con opzioni per una semplice visione

vista

GUI - controlli con opzioni: vista

GUI - minimizzate:

Quale funzionalità nei moduli di Windows posso utilizzare per creare le linee di collegamento?

Se vengono creati utilizzando la funzionalità per disegnare linee, come posso assicurarmi che i controlli scattino sulla linea? ..

Sto programmando in C# con Visual Studio 2010 Express.

Answer 1

Ok. Questa è una leggera modifica dell'esempio che ho creato per A similar requirement

La mia intenzione è di mostrare che Winforms non è più un'opzione per chiunque abbia bisogno di un'interfaccia utente seria. Il campione originale è stato creato in 3 ore uomo.

Potresti essere sorpreso di sapere che il contenitore che contiene tutti questi elementi (sia nodi che connettori) è in realtà un ListBox.

cose degne di nota:

• Il testo "NodeXX" è contenuto all'interno di un controllo Thumb, che consente cliccando e trascinando.
• I connettori possono anche essere selezionati e mostrare una bella animazione quando sono.
• Il pannello di sinistra consente di modificare i valori dell'oggetto selezionato.
• La funzionalità dell'interfaccia utente è completamente disaccoppiata dai dati che la compongono. Pertanto tutti questi nodi e connettori sono classi semplici con semplici proprietà int e double che possono essere caricate/salvate da un DB o da qualsiasi altra origine dati.
• Se non ti piace il modo in cui le sequenze di clic sono fatte, disegna nodi e connettori, che possono essere adattati perfettamente alle tue esigenze.
• Regole WPF.

Edit:

Seconda versione, questa volta molto più simile al vostro screenshot originale:

• ho aggiunto il concetto di SnapSpot in l'equazione. Questi sono i piccoli semicerchi rossi che vedete intorno ai nodi, che sono in realtà i legami con lo Connector s.

• Ho anche cambiato il Connector DataTemplate utilizzare una base QuadraticBezierSegment su

  Connector.Start.Location, 
  Connector.MidPoint, and 
  Connector.End.Location 
  

Questo permette linee curve da utilizzare come connettori, non solo linee rette.

• C'è un po 'di rosso-quadrato a forma di Thumb che apparirà quando si seleziona (click) su un Connector, (visibile nello screenshot) che vi permetterà di spostare la MidPoint della curva.
• È inoltre possibile modificare tale valore ruotando la rotellina del mouse quando si posiziona il cursore su "Punto medio" nel pannello sinistro del TextBoxes.
• Il "Comprimi tutto" CheckBox consente di alternare tra caselle complete e piccole, come mostrato nello screenshot.
• I SnapSpot s hanno un OffsetXOffsetY tra 0 e 1 che corrisponde alla loro posizione rispetto al genitore Node. Questi non sono limitati a 4 e potrebbero effettivamente essere qualsiasi numero di essi per Node.
• I ComboBoxes e Buttons non hanno funzionalità, ma si tratta solo di creare le proprietà pertinenti e Commands nella classe Node e collegarli a tale.

Edit2:

Aggiornato link di download con una versione molto più bello.

Modifica 16/10/2014: Poiché un sacco di persone sembrano essere interessate a questo, ho caricato il codice sorgente su GitHub.

Answer 2

Suppongo che si tratti di un problema di tipo grafico. I nodi sono le stanze e i bordi sono le linee che collegano le stanze. È possibile introdurre un'altra classe (ad esempio la classe Connection) che descrive come i nodi sono collegati ai bordi. Ad esempio, la tua sala si connette a una camera da letto, non necessariamente utilizzando una linea retta. Graphics.DrawBezier consente di disegnare linee curve, ma richiede una serie di punti. Questo è dove la classe Connection entra. Alcuni codice può aiutare ...

class Room 
    { 
    public Room(String name, Point location); 
    public void Draw(Graphics g); 
    } 

    class Connection 
    { 
    public void Add(Point ptConnection); 
    public void Add(Point[] ptConnection); 

    // Draw will draw a straight line if only two points or will draw a bezier curve 
    public void Draw(Graphics g); 
    } 

    class House // basically a graph 
    { 
    public void Add(Room room); 
    public void AddRoomConnection(Room r1, Room r2, Connection connector); 

    // draw, draw each room, then draw connections. 
    public void Draw(Graphics g); 
    } 

    void Main() 
    { 
     House myHouse = new House(); 
     Room hall = new Room("Hall", new Point(120,10); 
     Room bedroom1 = new Room("Bedroom1", Point(0, 80)); 
     Connection cnHallBedroom = new Connection(); 
     cn.Add(new Point()); // add two points to draw a line, 3 or more points to draw a curve. 
     myHouse.AddRoomConnection(hall, bedroom1, cnHallBedroom); 
    } 

Questo è l'approccio di base, forse non è la migliore, ma potrebbe servire come punto di partenza.