如何使用Windows窗体创建和连接自定义用户按钮/控件

Question

我正在尝试创建一些自定义按钮或用户控件,如建议的GUI中所示.功能应如下:

图形或配置以图形方式创建.

可以从工具栏拖动控件,也可以通过鼠标右键单击/下拉菜单插入控件

通过从一个控件拖动到另一个控件,它们应该通过线连接

切换应该将视图从带有选项的控件移动到简单视图

GUI视图 - 带选项的控件:

GUI视图 - 最小化:

我可以使用Windows窗体中的哪些功能来创建连接线？

如果它们是通过使用绘制线条的功能创建的,那么如何确保控件对齐线？..

我使用Visual Studio 2010 Express在C#中编程.

Answer 1

好.这是我为类似要求创建的示例的略微修改

我的目的是表明winforms不再是需要严肃用户界面的人的选择.原始样本在3个工时内创建.

您可能会惊讶地知道容纳所有这些项目(包括节点和连接器)的容器实际上是一个ListBox.

值得注意的事情:

• "NodeXX"文本包含在Thumb控件中,该控件允许单击和拖动.
• 也可以选择连接器并在它们显示时显示漂亮的动画.
• 左侧面板允许编辑当前所选对象的值.
• UI的功能与包含它的数据完全分离.因此,所有这些节点和连接器都是简单的类,具有可以从DB或任何其他数据源加载/保存的简单int和double属性.
• 如果您不喜欢点击序列完成的方式,请绘制节点和连接器,这可以完全适应您的需求.
• WPF规则.

编辑:

第二个版本,这次与原始截图更相似:

• 我SnapSpot在等式中添加了概念.这些是您在节点周围看到的小红色半圆,这实际上Connector是与之相关的.

• 我还将ConnectorDataTemplate 更改为使用QuadraticBezierSegment基于

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

这允许曲线用作连接器,而不仅仅是直线.

• Thumb当你选择(点击)a Connector(在屏幕截图中可见)时,会出现一个小的红色方形,可以让你移动MidPoint曲线.
• 当您将鼠标悬停TextBoxes在左侧面板中的"中点"下方时,也可以通过滚动鼠标滚轮来操纵该值.
• "全部折叠" CheckBox允许在完整框和小框之间切换,如屏幕截图所示.
• 所述SnapSpot■找一个OffsetX OffsetY和对应于相对于父它们的位置之间0 1 Node.这些不限于4,实际上可以是任何数量Node.
• 在ComboBoxes和Buttons没有的功能,但它只是创造了相关的性能和问题命令在Node类并将其绑定到.

EDIT2:

更新了更好的版本的下载链接.

编辑2014年10月16日:由于很多人似乎对此感兴趣,我将源代码上传到GitHub.