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

问题描述

我试图创造一些自定义的按钮或用户控件，如图所提出的GUI。的功能应该如下：

I am trying to create some custom buttons or user controls as shown in the proposed GUI. The functionality should be as follows:

的图表或配置图形创建。

The graphs or configurations are created graphically.

该控件可以从工具栏拖动或点击鼠标右键/下拉插入

The controls can be dragged from a toolbar or inserted by right mouse click/dropdown

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

By dragging from one control to another, they should be connected by lines

一个切换应该控制与选项的视图切换到简单视图

A toggle should shift the view from controls with options to a simple view

GUI视图 - 带有选项控制：

GUI view - controls with options:

GUI视图 - 最小化：

GUI view - minimized:

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

Which functionality in Windows forms can I use to create the connecting lines ?

如果他们是通过使用功能来画线创建的，我怎么能确保控制捕捉到线？ ..

If they are created by using functionality to draw lines, how can I make sure the controls snap to the line? ..

我编程在C＃中使用Visual Studio 2010的前preSS。

I am programming in C# with Visual Studio 2010 Express.

推荐答案

确定。这是我的类似的要求

我的目的是要表明的WinForms不再是任何一个选择谁需要一个严重的UI。
原始样品在3个工时创建

My intention is to show that winforms is no longer an option for anyone who needs a serious UI.The original sample was created in 3 man hours.

您可能会惊讶地知道，持有这些物品（包括节点和连接器）的容器实际上是一个的ListBox 。

You might be surprised to know that the container that holds all these items (both nodes and connectors) is actually a ListBox.

事情值得注意：

• 在NodeXX文本包含在拇指控制，这使得点击和拖动内。


• 连接器也可以选择，并显示出漂亮的动画，当他们。


• 左侧面板允许当前选择的对象的值的版本。​​


• 用户界面的功能是完全从包含它的数据分离开来。因此，所有的这种节点和连接器是简单的类简单的 INT 和可加载/从数据库保存的双属性或任何其它数据源。


• 如果你不喜欢的方式点击序列完成后不绘制节点和连接器，可以完美地适应您的需求。


• WPF规则。

• The "NodeXX" text is contained within a Thumb control, which enables clicking and dragging.
• The connectors can also be selected and show a nice animation when they are.
• The left panel allows edition of the currently selected object's values.
• The functionality of the UI is completely decoupled from the data that comprises it. Therefore all this nodes and connectors are simple classes with simple int and double properties that can be loaded/saved from a DB or whatever other data source.
• If you dislike the way click sequences are done do draw nodes and connectors, that can be perfectly adapted to your needs.
• WPF rules.

编辑：

第二个版本，这一次更类似于原来的截图：

Second version, this time much more similar to your original screenshot:

• 我加入 SnapSpot 的概念引入方程。这些红色的小半圆您的节点，这实际上是什么连接 s的连接到周围看看。



• 我也改变了连接 DataTemplate中使用的基于

• I added the concept of SnapSpot into the equation. These are the little red semi-circles you see around the nodes, which are actually what the Connectors are tied to.

• I also changed the Connector DataTemplate to use a QuadraticBezierSegment based on

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

此允许弯曲线被用作连接器，不只是直线

This allows curved lines to be used as connectors, not just straight lines.

• 有一个有点红色方形拇指当您选择（点击），将出现连接 （截图中可见），让您移动中点的曲线。


• 您还可以通过滚动鼠标滚轮徘徊在文本框下的中间点，在左侧面板中。
在当前维护该值

• 在全部折叠复选框允许充分和小箱子之间进行切换，如屏幕截图所示。


• 的 SnapSpot 活动的 OffsetX OffsetY 之间0和1，对应于相对于父节点自己的位置。这些不仅限于4，实际上可以是按节点。
其中任意数量的

• 的组合框和按钮没有的功能，但它只是一个创建相关属性的物质和在节点类命令并将其绑定到这一点。

• There's a little red-square-shaped Thumb that will appear when you select (click) on a Connector, (visible in the screenshot) that will allow you to move the MidPoint of the curve.
• You can also manipulate that value by rolling the mouse wheel when hovering the TextBoxes under "Mid Point" in the left panel.
• The "Collapse All" CheckBox allows to toggle between full and small boxes, as shown in the screenshot.
• The SnapSpots have an OffsetX OffsetY between 0 and 1 that corresponds to their position relative to the parent Node. These are not limited to 4 and could actually be any number of them per Node.
• The ComboBoxes and Buttons have no functionality, but it's just a matter of creating the relevant properties and Commands in the Node class and bind them to that.

EDIT2：

有好得多的版本更新下载链接。

Updated download link with a much nicer version.

修改2014年10月16日：既然很多人似乎兴趣在此，我上传源头上的。

Edit 10/16/2014: Since a lot of people seem to be interested in this, I uploaded the source to GitHub.

这篇关于如何创建和使用Windows窗体连接线自定义用户的按钮/控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！