连接不同的控件 [英] Connect different controls

问题描述

非常感谢大家到目前为止对我的帮助.如果您不介意，我还有另一个问题.

我要达到的目标是有一个矩形的自定义控件，我想向其添加连接器作为单独的控件，以便它可以与第一个矩形控件的边缘重叠.

整体所需的效果类似于Visio或Powerpoint，它们的对象具有与对象角重叠的连接器，您可以从中创建线以连接对象.

所以这就是我所做的.

1.我创建了一个自控件类继承的自定义控件.我覆盖了油漆的肉类，并在其中放置了一些构造函数和其他一些东西.这部分工作正常

2.我创建了一个连接器控件，它是一个10、10的小正方形，代表一个连接器.到目前为止一切正常.

3.现在这是我遇到麻烦的地方.当我创建第一个控件时，我希望它创建4个连接器控件，并使它们与顶部，左侧，右侧和底部的中心重叠.我只是不知道该如何实现.关于此的任何建议，我都会很高兴听到.

非常感谢您的帮助和时间，

Thechazm

Thank you all so much for helping me so far. I have another question if you wouldn''t mind.

The goal I am trying to achive is have one custom control that is a rectangle shape and I would like to add connectors to it as a seperate control so it can overlap the edge of the first rectangle control.

The overall desired effect is like is Visio or Powerpoint where their objects have connectors that overlap the corners of their objects that you can create lines from to connect objects.

So here is what I have done.

1. I have created a custom control that inherits from the control class. I overrode the paint meathod and put some contructors in there and some other stuff. This part of it works fine

2. I created a connector control that is a small 10, 10 square that represents a connector. This all works fine so far.

3. Now this is where I am having trouble. When I create the first control I want it to create 4 of the connector controls and have them just overlapping the center''s of the top, left, right, and bottom. I just don''t know how to achive this. Any recommendation on this I would gladly hear.

Thank you very much for your help and time,

Thechazm

推荐答案

我的建议是:不要这样.原则上这是可能的；我知道很少有尝试，但都失败了.这很清楚.

我解释了过去的解决方案的处理方法:在mdi子窗体之间画线 [ ^ ].

问题与您的问题不完全相同，但是正确的解决方案将是相同的.

以防万一，请参阅其他过去的解决方案:
Paint是一种哪种好玩的方法? (DataGridViewImageCell.Paint(...)) [在面板上捕获图形 [如何从旧图纸中清除面板 [ ^ ]，
在C#中绘制矩形 [

My advice is: don''t do it this way. This is possible in principle; I knew few attempts, all pretty much unsuccessful; and it''s clear why.

I explained what to do in my past solution: Drawing Lines between mdi child forms[^].

The question is not exactly the same as yours, but the right solution would be the same.

Just in case, see also some other past solutions:
What kind of playful method is Paint? (DataGridViewImageCell.Paint(...))[^],
capture the drawing on a panel[^],
How do I clear a panel from old drawing[^],
draw a rectangle in C#[^].

Please pardon some redundancy in my advice — the post were the answers to different questions, they refer to each other, etc.

—SA

我认为您正在寻找这样的东西:
WPF图表设计器-第1部分 [ WPF图表设计器-第2部分 [ WPF图表设计器-第3部分 [ WPF图设计器-第4部分 [ Diagram.NET [ NShape [
最好的问候
Espen Harlinn

I think you are looking for something like this:
WPF Diagram Designer - Part 1[^]
WPF Diagram Designer - Part 2[^]
WPF Diagram Designer - Part 3[^]
WPF Diagram Designer - Part 4[^]

The articles are well written and the concepts fundamental to WPF designer integration, but if you are new to WPF you''re in for one heck of a learning experience :)

Moving to WPF will vastly simplify your development, as the platform provides just about everything required to create a Visio like application.

If you want to stick to Windows Forms then Diagram.NET[^] is a free open source diagramming component for Windows Forms.

Another open source (GPL v3) Windows Forms alternative is NShape[^]. NShape is very powerful, but the GPL v3 might be too restrictive - unless you are developing an "inhouse" application that will not be distributed commercially.

Best regards
Espen Harlinn

现在，让我们转向WPF，在结束本讨论之前，让我给您一些进一步的想法，您将自己继续.我希望您也选择正式接受这一要求. (您可以单击一个以上的绿色接受"按钮.)

使用WPF，您可以将所有图表元素放在Canvas的表面上，请参阅 http://msdn.microsoft.com/en-us/library/system. windows.uielement.aspx [ ^ ].

与控件不同，WPF元素可以自由重叠，半透明等等.连接器也将是Canvas的子级，与连接的元素对等. (没有这种安排实际上是您在原始帖子中表达的主要问题.)

关于它的一种特殊的高级建议:您甚至可以允许用户将其自定义元素添加到图中.这是一个想法:用户可以创建自己的任何复杂程度的矢量图形元素，并将其保存为XAML格式.您的应用程序可以在运行时轻松加载它们并将其添加到画布.您可以在运行时动态地将任何属性附加到它们.

开发此类矢量图像的一种好方法是出色的开放源代码矢量编辑器Inkscape.请参阅:
http://en.wikipedia.org/wiki/Inkscape [ http://inkscape.org/ [ ^ ].

您可以以其原始SVG格式绘制矢量图形( http://en.wikipedia.org/wiki/Scalable_Vector_Graphics [ ^ ])并导出为XAML.您应该记住，SVG比XAML更丰富，因此您不能使用某些高级SVG属性，例如模糊性.同时，可以导出到XAML的属性相当广泛，包括渐变，透明度等.可用样本库真的很棒.

您可以通过将整个Canvas放在Viewbox中来解决图的缩放和平移问题，请参见 http://msdn.microsoft.com/en-us/library/ms733127.aspx [ ^ ]

另请参阅我过去提倡使用此方法的答案:
如何在我的表单应用程序? [ ^ ]，
创建属性文件... [反序列化json字符串数组 [ http://en.wikipedia .org/wiki/Architectural_pattern_(computer_science) [^ ]):

MVVM —模型视图视图模型，
http://en.wikipedia.org/wiki/Model_View_ViewModel [> http://en.wikipedia.org/wiki/Model-view-controller [ ^ ]))，

MVA —模型视图适配器，
http://en.wikipedia.org/wiki/Model–view–adapter [ ^ ]，

MVP —模型视图呈现器，
> http://en.wikipedia.org/wiki/Model-view-presenter [ ^ ].

请注意这些架构的动机.如果您了解它，便可以为该应用程序创建健壮的体系结构.

—SA

Now, lets turn to WPF and let me give you some further ideas before we close this discussion and you continue on your own. I hope you will choose to accept this one formally, too. (You can click green "Accept" button on more than one.)

With WPF, you can put all your diagram elements on the surface of Canvas, please see http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.aspx[^].

The children of the Canvas are of the compile-time of UIElement, and the Canvas.Childen collection is polymorphous. This base class UIElement is quite enough to add all kinds of input events to its real-time instances, to implement all manipulations you need for editing. Please see http://msdn.microsoft.com/en-us/library/system.windows.uielement.aspx[^].

Unlike controls, the WPF elements can freely overlap, be semi-transparent and a lot more. The connectors will also be the children of your Canvas, peer-to-peer with the connected elements. (Not having this arrangement was actually the major problem you expressed in your original post.)

One special advanced advice about it: you can even allow the users to add their custom elements to the diagram. Here is the idea: the user can create their own vector graphics elements of any degree of complexity and save them in XAML format. Your application can easily load them during run-time and add to the canvas. You can dynamically attach any properties to them during run time.

One great way of developing of such vector images the the brilliant Open Source vector editor Inkscape. Please see:
http://en.wikipedia.org/wiki/Inkscape[^],
http://inkscape.org/[^].

You can draw vector graphics in its native SVG format (http://en.wikipedia.org/wiki/Scalable_Vector_Graphics[^]) and export as XAML. You should remember that SVG is richer then XAML, so you could not use some advanced SVG properties such as fuzziness. At the same time, the properties you can export to XAML are quite reach, including gradients, transparency and a lot more. The gallery of available samples is really amazing.

You can solve the problem of zooming and panning of your diagram by putting your whole Canvas in the Viewbox, see http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx[^].

Now, you need to create a sound architecture of the system which should define the layers and interaction between them: database, other persistence, exports, loading and edition, all properly synchronized.

First of all, you need to develop a data model of a diagram. Try to segregate the model in two parts: semantic and graphical. At least semantic part of the model should be agnostic to the graphical. Semantic part of the model should model the semantic aspects of the diagram, the application field modeled by the diagram and agnostic to the diagram itself, such aspects as shapes and colors. It should only be concerned with the semantic properties of objects modeled by a diagram and semantic relationships.

This data model should present a separate layer of the architecture. Other layers should communicate only through this model. For example, input events should not deal with database or even with the canvas children properties, but only with the data model. You should poll database and update data model first, and only the graphics can be updated only from the data model. It will provide adequate level of abstraction. For example, later on you will be able to replace your database and mapping code, and it will be relatively easy because only two layers are involved.

You may need to export all the diagram in a local file or sent over the network stream. To do that, use only one thing: Data Contract. This is the most reliable, flexible and non-intrusive way. You have to make your data model a set of pure data classes. To make it a data contract, you only need to add some attributes to types and members. What is very important: you object graph can be an arbitrary graph, not a tree. Data Contract serializers will handle it. You also can organize perfect backup compatibility needed to upgrade the data model. You file type can be made world unique, as you can (and you should) specify your unique (say, company-based) namespace to the meta-data.

See:
http://msdn.microsoft.com/en-us/library/ms733127.aspx[^]

See also my past answers where I advocate this approach:
How can I utilize XML File streamwriter and reader in my form application?[^],
Creating property files...[^],
deseralize a json string array[^].

Now, let''s get back to the layered architecture. I suggest you learn and analyze applicability of the following architectural patterns (http://en.wikipedia.org/wiki/Architectural_pattern_(computer_science)[^]):

MVVM — Model View View Model,
http://en.wikipedia.org/wiki/Model_View_ViewModel[^],

MVC — Model-View-Controller,
http://en.wikipedia.org/wiki/Model-view-controller[^]),

MVA — Model-View-Adapter,
http://en.wikipedia.org/wiki/Model–view–adapter[^],

MVP — Model-View-Presenter,
http://en.wikipedia.org/wiki/Model-view-presenter[^].

Pay attention for the motivation of those architectures. If you understand it, you would be able to create robust architecture for this application.

—SA

这篇关于连接不同的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！