20

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

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

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

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

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

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

GUI 视图 - 最小化： 在此处输入图像描述

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

如果它们是通过使用绘制线条的功能创建的，我如何确保控件捕捉到线条？..

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

4

2 回答 2

33

行。这是我为类似需求创建的示例的轻微修改

我的目的是表明对于任何需要认真 UI 的人来说，winforms 不再是一种选择。原始样品是在 3 个工时创建的。

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

值得注意的事情：

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

编辑：

第二个版本，这次更类似于您的原始屏幕截图：

在此处输入图像描述

在此处输入图像描述

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

  • 我还更改了ConnectorDataTemplate 以使用QuadraticBezierSegment基于

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

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

  • Thumb当您选择（单击） a Connector（在屏幕截图中可见）时，会出现一个小红方块，这将允许您移动MidPoint曲线的 。
  • 您还可以在将鼠标悬停TextBoxes在左侧面板中的“中点”下方时滚动鼠标滚轮来操纵该值。
  • “全部折叠”CheckBox允许在完整框和小框之间切换，如屏幕截图所示。
  • SnapSpots 有一个介于 0 和 1 之间的OffsetX OffsetY值，对应于它们相对于 parent 的位置Node。这些不限于 4 个，实际上可以是每个Node.
  • ComboBoxesandButtons没有任何功能，但这只是在类中创建相关属性和命令并将它们Node绑定到的问题。

编辑2：

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

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

于 2013-04-04T20:57:55.240 回答
0

我猜这是一个图形类型的问题。节点是房间，边是连接房间的线。您可以引入另一个类（例如 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);
   }

这是基本方法，可能不是最好的，但可以作为起点。

于 2013-04-04T19:24:51.820 回答