创建WPF分割图 [英] Creating a WPF divided diagram

问题描述

所以这里有关于在WPF中创建图表的教程。
http://www.codeproject.com/Articles/24681 / WPF-Diagram-Designer-Part

So there's this tutorial about creating a diagram in WPF. http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part

我已阅读，仍在研究中完全理解。

I've read it, and still studying it to understand it completely.

在本教程结尾处，您可以基本上添加形状，移动/旋转/缩放它们，并且由于它们是以向量形式创建的，因此它们保留其分辨率，还有可以连接的连接器每个形状与另一个。

At the end of this tutorial, you can basically add shapes, move/rotate/scale them, and since they are created in a vector form, they are keeping their resolutions, there are also connectors that can connect each shape with another.

我的目标，因为我需要创建一个模拟器，显示如何交付互联网协议，是创建一个分割图，其中Side A与Side B.它可以读取一个自动机并模拟图中的过渡。

My goal, since I need to create a simulator which shows how internet protocols are delivered, is to create a divided diagram in which Side A communicates with Side B. it could read an automata and simulate the transitions in the diagram.

我在想如何交付这个，因为我没有很多WPF中的知识，我不知道应该以何种方式实现它。

I'm thinking of how to deliever this, and since I don't have a lot of knowledge in WPF, I wonder in which way should I implement it.

我应该创建2个不同的画布吗？或者可以用两边划分1个画布？

Should I create 2 different Canvases? or maybe dividing 1 canvas with two sides?

我处理的主要问题是，当一个形状被拖动到窗口的边缘时，窗口允许我滑动它，所以我可以看到字段的其余部分，这是通过增加Canvas的大小，如教程第1部分所示。
然而，如果我的画布被除以两，并且在中间有一个边框，我如何为每一边创建两个滑块？

The main issue I'm dealing with, is that when a shape is being dragged to the end margin of the window, then the window allow me to slide it so I can see the rest of the field, this is being done by increasing the size of the Canvas, as seen in the Tutorial Part 1. However, if my canvas is divided by two, and there's a border in the middle, how can I create two sliders for each of the sides?

我想知道如果你能给我任何提示如何接近这个因为我在WPF中的知识还很有限。

I was wondering if you can give me any tips about how approaching this idea, since my knowledge in WPF is still very limited.

推荐答案

这里是我的观点，如果你会提供一个更多/更少的最终草图你的应用程序。我建议使用 Telerik AppMock但油漆也足够了）。

Here is my point of view, but it would be very useful if you would provide a more/less final sketch of your app. I recommend using Telerik AppMock but paint will also suffice ;).

根据我的理解，你应该需要3个画布。
1-st是左边的画布。
第二是右边的画布。
3-rd位于两个画布之上。

From what I have understood you should need 3 canvases. 1-st is canvas on the left. 2-nd is canvas on the right. 3-rd is on top of both canvases.

当您要拖动元素时，必须将点击元素的透明度设置为有点透明并将其保留在其位置（第1个画布），将拖动元素的副本添加到第3个画布。当你做leftmousebuttonup（拖动项目），你必须检查它放在哪里，如果它是droppend在第二个画布你添加到这个画布。要在画布上定位元素，您可以使用 Canvas.SetLeft 以及相应的SetRight方法。

When you want to drag an element, you must set opacity of the clicked element to be a bit transparent and leave it on its place(1st canvas), add copy of dragged element in to the 3rd canvas. When you do leftmousebuttonup(drop dragged item), you have to check where was it dropped and if it was droppend on the 2nd canvas you add it to this canvas. To position element on the canvas you can use Canvas.SetLeft and accordingly SetRight method.

您可以将第一和第二个画布放入网格。即使Canvases会更大，如果Grid，视图将只切割到网格的大小。
此外，为了允许画布操作，添加（到网格）一个scrollviewer将翻译转换符合其大小的画布。
稍后，尝试使用MVVM模式用数据填充Canvase。

You can put 1st and 2nd canvases into Grid. Even if Canvases will be bigger if Grid, view will be cut only to the size of the Grid. Moreover, to allow canvases manipulation, add there (to the Grid) a scrollviewer which will Translate Transform the canvases given to their sizes. Later, try to use MVVM pattern to fill your Canvases with data.

我还建议一个可绘制的ObservableColletion（你可以使用FrameworkElement作为基类）和draggable对象。不同的每个画布。
祝你好运！

I would also suggest an ObservableColletion of drawable (you can use FrameworkElement as base class) and draggable objects. Different for every Canvas. Good luck!

这篇关于创建WPF分割图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！