如何使用 Windows 窗体使用线条创建和连接自定义用户按钮/控件 [英] How to create and connect custom user buttons/controls with lines using windows forms
问题描述
我正在尝试创建一些自定义按钮或用户控件,如建议的 GUI 中所示.功能应该如下:
图形或配置以图形方式创建.
控件可以从工具栏拖动或通过鼠标右键单击/下拉插入
从一个控件拖到另一个控件,它们应该用线连接
切换应该将视图从带有选项的控件切换到简单视图
GUI 视图 - 带选项的控件:
GUI 视图 - 最小化:
我可以使用 Windows 窗体中的哪些功能来创建连接线?
如果它们是使用绘制线条的功能创建的,我如何确保控件与线条对齐?..
我正在使用 Visual Studio 2010 Express 使用 C# 进行编程.
好的.这是我为 基于
Connector.Start.Location,Connector.MidPoint 和连接器.终点.位置
这允许将曲线用作连接器,而不仅仅是直线.
- 当您选择(单击)
Connector
(在屏幕截图中可见)时,会出现一个红色方形的Thumb
,允许您移动曲线的MidPoint
. - 您还可以在将
TextBoxes
悬停在左侧面板的中点"下时,通过滚动鼠标滚轮来操作该值. - 全部折叠"
CheckBox
允许在完整框和小框之间切换,如屏幕截图所示. SnapSpot
s 有一个OffsetX
OffsetY
介于 0 和 1 之间,对应于它们相对于父Node 的位置代码>.这些不限于 4 个,实际上每个
Node
可以是任意数量的.ComboBoxes
和Buttons
没有任何功能,但只需创建相关属性和 Commands 在Node
类中并将它们绑定到那个.
编辑 2:
用更好的版本更新了下载链接.
Edit 10/16/2014:由于很多人似乎对此感兴趣,我将源上传到 GitHub.
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 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
anddouble
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 theConnector
s are tied to. I also changed the
Connector
DataTemplate to use aQuadraticBezierSegment
based onConnector.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 aConnector
, (visible in the screenshot) that will allow you to move theMidPoint
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
SnapSpot
s have anOffsetX
OffsetY
between 0 and 1 that corresponds to their position relative to the parentNode
. These are not limited to 4 and could actually be any number of them perNode
. - The
ComboBoxes
andButtons
have no functionality, but it's just a matter of creating the relevant properties and Commands in theNode
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.
这篇关于如何使用 Windows 窗体使用线条创建和连接自定义用户按钮/控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!