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.
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
Things worth noting:
Thumbcontrol, which enables clicking and dragging.
doubleproperties that can be loaded/saved from a DB or whatever other data source.
Second version, this time much more similar to your original screenshot:
SnapSpotinto 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.
Thumbthat will appear when you select (click) on a
Connector, (visible in the screenshot) that will allow you to move the
MidPointof the curve.
TextBoxesunder "Mid Point" in the left panel.
CheckBoxallows to toggle between full and small boxes, as shown in the screenshot.
SnapSpots have an
OffsetYbetween 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
Buttonshave no functionality, but it's just a matter of creating the relevant properties and Commands in the
Nodeclass and bind them to that.
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.