如何使用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曲线等，这就是连接类的位置。两点是一条单线，多于两个点是一条曲线。就像我说的，这是一个基本的方法。