Comment créer et connecter des boutons / contrôles utilisateur personnalisés avec des lignes à l'aide de formulaires Windows

Je suis en train de créer des boutons personnalisés ou des contrôles utilisateur, comme indiqué dans le projet de GUI. La fonctionnalité devrait être comme suit:

Les graphiques ou les configurations sont créés graphiquement.

Les contrôles peuvent être déplacées d'une barre d'outils ou inséré par le bouton droit de la souris/déroulante

En les faisant glisser à partir d'un contrôle à l'autre, ils doivent être reliés par des lignes

Une bascule devrait décaler la vue des contrôles avec des options à un simple point de vue

GUI vue - des contrôles de avec les options:
Comment créer et connecter des boutons /contrôles utilisateur personnalisés avec des lignes à l'aide de formulaires Windows

GUI vue réduite:
Comment créer et connecter des boutons /contrôles utilisateur personnalisés avec des lignes à l'aide de formulaires Windows

Fonctionnalités dans Windows forms puis-je utiliser pour créer les lignes de connexion ?

Si ils sont créés à l'aide de la fonctionnalité de tracer des lignes, comment puis-je faire en sorte que les contrôles composant logiciel enfichable à la ligne? ..

Je suis à la programmation en C# avec Visual Studio 2010 Express.

source d'informationauteur Eirik

c#custom-controls winforms

28

Ok. C'est une légère modification de l'exemple que j'ai créé pour Une exigence similaire

Mon intention est de montrer que winforms n'est plus une option pour quelqu'un qui a besoin d'un sérieux de l'INTERFACE utilisateur.
L'échantillon initial a été créé dans les 3 heures-homme.

Vous pourriez être surpris de savoir que le conteneur qui contient tous ces éléments (les deux nœuds et les connecteurs) est en fait une ListBox.

Choses à signaler:
- La "NodeXX" le texte est contenu dans un Thumb de contrôle, qui permet en cliquant et en faisant glisser.
- Les connecteurs peuvent également être sélectionnés et montrer une belle animation quand ils sont.
- Le panneau de gauche permet l'édition de l'objet actuellement sélectionné.
- La fonctionnalité de l'INTERFACE utilisateur est complètement découplé de données qui la constitue. Donc tout ceci nœuds et les connecteurs sont de simples classes avec de simples int et double propriétés qui peuvent être chargés/enregistré à partir d'une base ou d'une autre source de données.
- Si vous n'aimez pas la façon dont les séquences de clics sont fait dessiner des nœuds et des connecteurs, qui peut être parfaitement adapté à vos besoins.
- WPF règles.
Edit:

Deuxième version, cette fois beaucoup plus semblable à l'original de votre capture d'écran:
- J'ai ajouté le concept de SnapSpot dans l'équation. Ce sont les petits rouge demi-cercles que vous voyez autour de nœuds, qui sont en fait de ce que l' Connectors sont liés à l'.
- J'ai aussi changé la Connector DataTemplate pour l'utilisation d'un QuadraticBezierSegment basé sur
```
Connector.Start.Location,
Connector.MidPoint, and 
Connector.End.Location 
```
Cela permet de lignes courbes, à être utilisés comme connecteurs, et pas seulement les lignes droites.
- Il y a un peu de rouge en forme de carré Thumb qui apparaît lorsque vous sélectionnez (cliquez) sur un Connector(visible dans la capture d'écran) qui vous permettra de déplacer le MidPoint de la courbe.
- Vous pouvez également manipuler cette valeur en faisant rouler la molette de la souris lorsque le curseur de la TextBoxes sous "Milieu" dans le panneau de gauche.
- "L'Effondrement de Toutes les" CheckBox permet de basculer entre le plein et de petites boîtes, comme illustré dans la capture d'écran.
- La SnapSpots ont un OffsetX OffsetY entre 0 et 1 qui correspond à leur position par rapport au parent Node. Ce ne sont pas limités à 4 et pourrait en fait être n'importe quel nombre d'entre eux par Node.
- La ComboBoxes et Buttons ont pas de fonctionnalité, mais c'est juste une question de la création de l'propriétés pertinentes et Les commandes dans le Node classe et les lier à qui.
Edit2:

Mis à jour le lien de téléchargement avec une bien belle version.

Modifier 10/16/2014: comme beaucoup de gens semblent intéressés par ce sujet, j'ai téléchargé la source de GitHub.

Je devine que ce est un graphique type de problème. Les nœuds sont les chambres et les arêtes sont les lignes qui relient les chambres. Vous pouvez introduire une autre classe (disons de la classe de Connexion) qui décrit la manière dont les nœuds sont connectés vers les bords. Par exemple, votre salle se connecte à une chambre à coucher, pas nécessairement à l'aide d'une ligne droite. Les Graphismes.DrawBezier vous permet de dessiner des lignes courbes, mais nécessite un tableau de points. C'est là que la classe de Connexion. Du code peut aider...

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

C'est l'approche de base, peut-être pas le meilleur, mais pourrait servir de point de départ.

Vous devez vous connecter pour publier un commentaire.