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

Question

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

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

可以从工具栏拖动控件或通过鼠标右键单击/下拉列表插入控件

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

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

GUI视图 - 带选项的控件：

GUI视图 - 最小化：

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

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

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

Answer 1

确定。这是我为A similar requirement

创建的示例的略微修改

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

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

值得注意的事情：

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

修改

第二个版本，这次与原始屏幕截图更相似：

• 我将SnapSpot的概念添加到等式中。这些是您在节点周围看到的小红色半圆，实际上是Connector所绑定的。

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

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

这允许曲线用作连接器，而不仅仅是直线。

• 当您选择（点击）Thumb时（在屏幕截图中显示）可以移动Connector时，会出现一个小方形的MidPoint TextBoxes曲线。
• 您还可以在左侧面板中的“中点”下方悬停CheckBox时滚动鼠标滚轮来操纵该值。
• “全部折叠”SnapSpot允许在完整框和小框之间切换，如屏幕截图所示。
• OffsetX的{​​{1}} OffsetY介于0和1之间，与他们相对于父Node的位置相对应。这些不限于4，实际上每Node可以是任意数量。
• ComboBoxes和Buttons没有任何功能，但只需在Node类中创建相关属性和Commands并将其绑定到该位置即可。< / LI>

<强> EDIT2：

使用更好的版本更新了下载链接。

修改2014年10月16日：由于很多人似乎对此感兴趣，因此我将来源上传到GitHub。

Answer 2

我猜这是一个图形类型的问题。节点是房间，边缘是连接房间的线。您可以引入另一个类（比如Connection类）来描述节点如何连接到边。例如，您的大厅连接到卧室，不一定使用直线。 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);
   }

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