How to create and connect custom user buttons/cont

问题:

I am trying to create some custom buttons or user controls as shown in the proposed GUI. The functionality should be as follows:

The graphs or configurations are created graphically.

The controls can be dragged from a toolbar or inserted by right mouse click/dropdown

By dragging from one control to another, they should be connected by lines

A toggle should shift the view from controls with options to a simple view

GUI view - controls with options:

GUI view - minimized:

Which functionality in Windows forms can I use to create the connecting lines ?

If they are created by using functionality to draw lines, how can I make sure the controls snap to the line? ..

I am programming in C# with Visual Studio 2010 Express.

回答1:

Ok. This is a slight modification of the example I created for A similar requirement

My intention is to show that winforms is no longer an option for anyone who needs a serious UI. The original sample was created in 3 man hours.

You might be surprised to know that the container that holds all these items (both nodes and connectors) is actually a ListBox.

Things worth noting:

• The \"NodeXX\" text is contained within a Thumb control, which enables clicking and dragging.
• The connectors can also be selected and show a nice animation when they are.
• The left panel allows edition of the currently selected object\'s values.
• The functionality of the UI is completely decoupled from the data that comprises it. Therefore all this nodes and connectors are simple classes with simple int and double properties that can be loaded/saved from a DB or whatever other data source.
• If you dislike the way click sequences are done do draw nodes and connectors, that can be perfectly adapted to your needs.
• WPF rules.

Edit:

Second version, this time much more similar to your original screenshot:

• I added the concept of SnapSpot into the equation. These are the little red semi-circles you see around the nodes, which are actually what the Connectors are tied to.

• I also changed the Connector DataTemplate to use a QuadraticBezierSegment based on

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

This allows curved lines to be used as connectors, not just straight lines.

• There\'s a little red-square-shaped Thumb that will appear when you select (click) on a Connector, (visible in the screenshot) that will allow you to move the MidPoint of the curve.
• You can also manipulate that value by rolling the mouse wheel when hovering the TextBoxes under \"Mid Point\" in the left panel.
• The \"Collapse All\" CheckBox allows to toggle between full and small boxes, as shown in the screenshot.
• The SnapSpots have an OffsetX OffsetY between 0 and 1 that corresponds to their position relative to the parent Node. These are not limited to 4 and could actually be any number of them per Node.
• The ComboBoxes and Buttons have no functionality, but it\'s just a matter of creating the relevant properties and Commands in the Node class and bind them to that.

Edit2:

Updated download link with a much nicer version.

Edit 10/16/2014: Since a lot of people seem to be interested in this, I uploaded the source to GitHub.

回答2:

I\'m guessing this is a graph type problem. The nodes are the rooms and the edges are the lines that connect the rooms. You can introduce another class (say Connection class) that describes how nodes are connected to edges. For example, your hall connects to a bedroom, not necessarily using a straight line. The Graphics.DrawBezier allows you to draw curved lines, but requires an array of points. This is where the the Connection class comes in. Some code may help...

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

This is basic approach, maybe not the best but might serve as a starting point.