如何使用Windows窗体创build和连接自定义用户button/控件

我正在尝试创build一些自定义button或用户控件，如所示的GUI中所示。 function应该如下：

graphics或configuration是以graphics方式创build的。

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

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

切换应该将视图从具有选项的控件转换为简单的视图

GUI视图 – 带有选项的控件：

GUI视图 – 最小化：

Windows窗体中的哪些function可以用来创build连接线？

如果通过使用function绘制线条来创build它们，我怎样才能确保控件捕捉线条？ ..

我使用Visual Studio 2010 Express在C＃中进行编程。

Answer 1

好。 这是我为类似要求创build的示例的轻微修改

我的目的是要表明，Winforms不再是任何需要认真UI的人的select。 原始样本是在3个工作小时内创build的。

您可能会惊讶地发现容纳所有这些项目（包括节点和连接器）的容器实际上是一个ListBox 。

值得注意的事情：

• “NodeXX”文本包含在一个Thumb控件中，可以进行点击和拖动。
• 连接器也可以被select，并且当它们出现时显示出很好的animation。
• 左面板允许编辑当前选定的对象的值。
• UI的function与构成它的数据完全分离。 因此，所有这些节点和连接器都是简单的类，具有简单的int和double属性，可以从DB或任何其他数据源加载/保存。
• 如果您不喜欢点击序列的方式，请绘制节点和连接器，这可以完全适应您的需求。
• WPF规则。

编辑：

第二个版本，这个时候更像您的原始屏幕截图：

• 我将SnapSpot的概念添加到方程中。 这些是你在节点周围看到的红色的半圆形，这实际上是Connector的连接。

• 我也改变了Connector DataTemplate使用QuadraticBezierSegment基于

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

这使得曲线可以用作连接器，而不仅仅是直线。

• 当您select（单击） Connector时（会显示在屏幕截图中），将会出现一个红色方块的Thumb ，这将允许您移动曲线的MidPoint 。
• 将鼠标hover在左侧面板中的“中点”下方的TextBoxes框时，也可以通过滚动鼠标滚轮来操作该值。
• “全部折叠” CheckBox允许在全部和小框之间切换，如截图所示。
• SnapSpot有一个0到1之间的OffsetX OffsetY ，对应于它们相对于父Node的位置。 这些不限于4个，实际上可以是每个Node任意数量。
• ComboBoxes和Buttons没有function，但是只需要在Node类中创build相关的属性和命令 ，然后将其绑定到该组件。

EDIT2：

更新的下载链接更好的版本。

编辑10/16/2014 ：由于很多人似乎对此感兴趣，我上传了源代码到GitHub 。

Answer 2

我猜这是一个graphicstypes的问题。 节点是房间，边是连接房间的线。 您可以引入另一个类（说连接类），描述节点如何连接到边缘。 例如，你的大厅连接到一间卧室，不一定使用直线。 Graphics.DrawBezier允许您绘制曲线，但需要一些点。 这是Connection类的用途。有些代码可能有帮助…

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

这是基本的方法，也许不是最好的，但可以作为一个起点。