CODEWITHSUNDEEP
wpfcanvasdiagram
Ori Frish
Ori Frish

Reputation: 411

Creating a WPF divided diagram

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.

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.

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.

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

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?

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

Upvotes: 0

Views: 530

Answers (1)

MarekB
MarekB

Reputation: 81

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 ;).

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.

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.

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.

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

Upvotes: 1

Related Questions