如何使用windows窗体创建和连接带有行的自定义用户按钮/控件

Question

如何使用windows窗体创建和连接带有行的自定义用户按钮/控件

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

图形或配置是以图形方式创建的。

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

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

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

gui视图-带有选项的控件：

Gui视图-最小化：

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

如果它们是通过使用功能绘制线条创建的，那么如何确保控件与行相一致？

我正在用VisualStudio 2010 Express用C#编程。

Answer 1

好的。这是对我创建的示例的轻微修改。类似的要求我的意图是表明WinForms不再是任何需要严肃UI的人的选择。最初的样本是在3个人小时内完成的。您可能会惊讶地知道，包含所有这些项(节点和连接器)的容器实际上是一个ListBox.值得注意的事情：“NodeXX”文本包含在Thumb控件，该控件支持单击和拖动。连接器也可以选择，并显示一个很好的动画，当他们是。左面板允许当前选定对象的值的版本。UI的功能与包含它的数据完全解耦。因此，所有这些节点和连接器都是简单的类。int和double可以从DB或其他数据源加载/保存的属性。如果您不喜欢单击序列的完成方式，请绘制节点和连接器，这可以完全适应您的需要。WPF规则。编辑：第二个版本，这一次更像你原来的截图我加入了SnapSpot进入等式。这些是你在节点周围看到的红色半圆，实际上是Connector我们被绑在一起。我还更改了ConnectorDataTemplate使用QuadraticBezierSegment基于Connector.Start.Location,Connector.MidPoint, and  Connector.End.Location这使得曲线可以用作连接器，而不仅仅是直线。有一个小红方形Thumb当您选择(单击)在Connector，(在屏幕截图中可见)，它将允许您移动MidPoint曲线。您还可以通过滚动鼠标轮来操作该值。TextBoxes在左侧面板的“中间点”下。“崩塌一切”CheckBox允许在大小框之间切换，如屏幕截图所示。这个SnapSpot我们有一个OffsetX OffsetY在0到1之间，对应于它们相对于父级的位置。Node..这些不限于4个，实际上可能是每个Node.这个ComboBoxes和Buttons没有功能，但这只是创建相关属性和命令在Node类并将它们绑定到该类。编辑2：更新的下载链接与一个更好的版本。因为很多人似乎对此很感兴趣，所以我把消息来源上传到GitHub.

Answer 2

我猜这是一个图型问题。节点是房间，边缘是连接房间的线。您可以引入另一个类(例如连接类)来描述节点如何连接到边缘。例如，你的大厅与卧室相连，不一定使用直线。DrawBezier允许您绘制曲线，但需要一个点数组。这就是连接类出现的地方。一些密码可能会有帮助.。   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);    }这是基本的方法，也许不是最好的，但可能是一个起点。

Answer 3

我擅长猜测规则：-)是的，我会让房间成为一个单一的用户控件，您可以在其中指定一个名称。当然，您可以对不同房间的用户控件进行子类化。我认为这里的秘诀是创建新的房间，并将它们添加到“家庭类”中。用户如何连接它们是完全开放的。单线，Bezier曲线等，这就是连接类的位置。两点是一条单线，多于两个点是一条曲线。就像我说的，这是一个基本的方法。