Question

Background: I’m a web developer looking to expand my skill set a bit with some tinkering on desktop application. This is just for fun.

I’m trying to build some minimal Visio like interface.

While in school I did a fair bit of .NET, so I am familiar with Winforms and GDI. I know I can draw on the screen pretty easily and write on it.

What I am looking for now is more of a way to let my user add “shapes” to a canvas. Think of how Visio does it with flowcharts forms, you pick the shape you want and you can drop it and adjust it (width, height, etc.).

I can manage to do this with a simple GDI shape like a rectangle, but am at lost as to what to look for when designing shapes of all sorts.

Again the closest example I can think of that does this would be Visio where you can pick a parallelogram for data-input drop it on a canvas and adjust as required.

What I’ve looked for into so far with minimal success includes:

• Custom shapes;
• Custom controls;
• Enabling the form designer at runtime;
• Vector based shape.

Any pointers as to what I should be looking for?

Answer 1

The best way to approach it would be to have user controls. Create a basic user control called Shape. Then for each shape you want, for example a Line Shape, create a class called LineShape that derives from Shape. In addition you’ll probably also want to create an Interface called IShape. Have each of your shape classes implement this interface. Interfaces should contain methods that all shapes will need. For example, you’ll want to put a method in the interface called EndPoints() which define endpoints the user can drag to resize the shape. Since each shape will be derived from a basic user control, they will already have drag and drop capabilities.

In each shape, you’ll want to draw the shape in the paint method. In the paint method, you can get a handle to the Graphics object and do primitive things such as drawing lines, circles or polygons.

Your “canvas” should also be a user control. You’ll want to define a List<IShape> list to hold each shape control that is dragged and dropped onto the canvas.

For your dragging and dropping, you just need to enable this on the Shape control and it will inherit that from all the other shapes. While dragging onto the canvas, you’ll want to make sure the data being dragged is of type IShape and if it is, you’ll make a call to DoDragDrop() which will allow the user to drop shapes onto the canvas.

If you need help, read up on Interfaces and User Controls.

Always remember to try to program to an interface and if you do it well enough, you could even make your program support plug-ins so that other developers could write custom shapes that seemingly integrate with your application.