Cómo crear y conectar botones / controles de usuario personalizados con líneas usando formularios de Windows

Estoy intentando crear algunos botones personalizados o controles de usuario como se muestra en la GUI propuesta. La funcionalidad debería ser la siguiente:

Los gráficos o configuraciones se crean gráficamente.

Los controles pueden arrastrarse desde una barra de herramientas o insertarse haciendo clic con el botón derecho del mouse / desplegable

Al arrastrar de un control a otro, deben estar conectados por líneas

Un alternar debería cambiar la vista de los controles con opciones a una vista simple

Vista de GUI: controles con opciones: Controles de vista GUI con opciones

Vista de GUI – minimizada: enter image description here

¿Qué funcionalidad en los formularios de Windows puedo usar para crear las líneas de conexión?

Si se crean utilizando la funcionalidad para dibujar líneas, ¿cómo puedo asegurarme de que los controles se ajustan a la línea? ..

Estoy progtwigndo en C # con Visual Studio 2010 Express.

De acuerdo. Esta es una ligera modificación del ejemplo que creé para Un requisito similar

Mi intención es mostrar que las formas de ganar ya no son una opción para cualquiera que necesite una IU seria. La muestra original fue creada en 3 horas hombre.

Es posible que se sorprenda al saber que el contenedor que contiene todos estos elementos (nodos y conectores) es en realidad un ListBox .

Cosas que vale la pena notar:

  • El texto “NodeXX” está contenido dentro de un control Thumb , que permite hacer clic y arrastrar.
  • Los conectores también se pueden seleccionar y mostrar una buena animación cuando lo son.
  • El panel izquierdo permite la edición de los valores del objeto seleccionado actualmente.
  • La funcionalidad de la interfaz de usuario está completamente desacoplada de los datos que la componen. Por lo tanto, todos estos nodos y conectores son clases simples con propiedades int simples y double que se pueden cargar / guardar desde un DB o cualquier otra fuente de datos.
  • Si no le gusta la forma en que se hacen las secuencias de clics, dibuje nodos y conectores que se puedan adaptar perfectamente a sus necesidades.
  • Reglas de WPF

Editar:

Segunda versión, esta vez mucho más similar a la captura de pantalla original:

enter image description here

enter image description here

  • SnapSpot el concepto de SnapSpot en la ecuación. Estos son los pequeños semicírculos rojos que ves alrededor de los nodos, que son a lo que están vinculados los Connector .
  • También cambié Connector DataTemplate para usar un QuadraticBezierSegment basado en

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

Esto permite que las líneas curvas se usen como conectores, no solo como líneas rectas.

  • Hay un pequeño Thumb forma de cuadrado rojo que aparecerá al seleccionar (hacer clic) en un Connector , (visible en la captura de pantalla) que le permitirá mover el punto medio de la curva.
  • También puede manipular ese valor girando la rueda del mouse al pasar los TextBoxes en “Punto medio” en el panel izquierdo.
  • El CheckBox “Contraer todo” permite alternar entre cuadros completos y pequeños, como se muestra en la captura de pantalla.
  • Los SnapSpot s tienen OffsetX OffsetY entre 0 y 1 que corresponde a su posición relativa al Node primario. Estos no están limitados a 4 y podrían ser cualquier cantidad de ellos por Node .
  • Los ComboBoxes y los Buttons no tienen ninguna funcionalidad, pero solo se trata de crear las propiedades y Comandos relevantes en la clase Node y vincularlos a eso.

Edit2:

Enlace de descarga actualizado con una versión mucho más agradable.

Edit 16/10/2014 : Dado que muchas personas parecen estar interesadas en esto, subí la fuente a GitHub .

Supongo que este es un problema de tipo gráfico. Los nodos son las habitaciones y los bordes son las líneas que conectan las habitaciones. Puede introducir otra clase (por ejemplo, Clase de conexión) que describa cómo los nodos están conectados a los bordes. Por ejemplo, su sala se conecta a un dormitorio, no necesariamente utilizando una línea recta. Graphics.DrawBezier le permite dibujar líneas curvas, pero requiere una matriz de puntos. Aquí es donde entra la clase Connection. Algún código puede ayudar …

  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); } 

Este es un enfoque básico, tal vez no el mejor, pero podría servir como punto de partida.