Shape Editor, including many shapes, Resize and more

[NickThissen]

-- Updated, see below! --


Hi there,

This is codebank submission loosely based on jmcilhinney's Manipulate GDI+ Drawings. It mimics a simple "Shape Editor" much like the Windows Forms Editor in Visual Studio.

So, first of all, credits to jmcilhinney for his excellent base sample.



Here's a screenshot:
-- Updated, see below! --

As you can see, this shape editor includes:

• Different shapes, easily extensible with your own shapes,
• Resizing using drag handles,
• Each Shape has properties you can edit, even during run-time using a PropertyGrid.

-- Updated, see below! --

I think a very brief explanation is in order.

The attached example solution contains two projects: the ShapeEditorLibrary, containing the basic shape editor classes, and the ShapeEditorExampleVs2008 project, containing the form you see in the screenshot, including the property grid + selection combobox logic. As you can see, this is separated from the ShapeEditorLibrary so you can implement it completely differently if you want.

The most important classes in the ShapeEditorLibrary are the Shape, Canvas and ShapeCollection classes.

The Shape class is an abstract class and implements most of the basic methods and properties that every Shape will have. In order to create your own Shapes, you can create a class that inherits Shape, and override the Draw method to provide your own drawing. If you want a Triangle shape, you implement the drawing such that it looks like a triangle. There is a RectangleShape and EllipseShape already included in the example so you can take a look how you do that. You usually won't have to do anything else except provide your own drawing. All the moving and resizing and even the drawing of the drag handles is implement automatically.

The Canvas class is the panel the Shapes live in. It is the control you put on your Form. It has the properties you'll most likely need: a collection of Shapes and a SelectedShape property. In addition, it has useful events such as the SelectedShapeChanged and ShapesCollectionChanged events.

The ShapeCollection class represents a collection of Shapes. The Canvas class has an instance of this class to keep track of the Shapes. It behaves exactly like any other strongly typed collection (such as a List(Of Shape)), except that it raises the CollectionChanged event when an item in the collection is changed, added or removed.
Also, the ShapeCollection class has a method that uses a rather complicated (to explain anyway) algorithm to determine the name that a new Shape should have. For example, if you have four RectangleShapes on your form called RectangleShape1, RectangleShape3, Xyz and Hello, then when you add a new RectangleShape (with a blank name), it will be named RectangleShape2, as that is the next available name.

The names are used, in my example, in the 'selection combobox' and the property grid, just like in Visual Studio.


Well, that's it for the explanation for now, on to the facts...

There are a few things that aren't completed yet, but I'm planning to add them as soon as I find some time:

• There is no 'live drawing' to add shapes yet. Shapes are added via code at the moment.
• There is no docking or anchoring or anything like that.

Finally, here's a very short 'tutorial' on how to create your own shapes. Let's suppose you want to create a triangular shape.

1. Create a new class called TriangleShape in the Shapes folder.

2. Edit the class declaration so that it inherits Shape.

public class TriangleShape : Shape

3. Override the Draw method and provide your own drawing. In our case, we want to draw a triangle. We need to draw within the Bounds rectangle, because that defines the location and size of our shape.

public override void Draw(System.Drawing.Graphics g)
        {
            float middle = this.Bounds.X + this.Bounds.Width / 2f;
 
            PointF left = new PointF(this.Bounds.Left, this.Bounds.Bottom);
            PointF right = new PointF(this.Bounds.Right, this.Bounds.Bottom);
            PointF top = new PointF(middle, this.Bounds.Top);
 
            using (var b = new SolidBrush(this.BackColor))
            {
                g.FillPolygon(b, new PointF[] { left, right, top });
            }
        }

4. Finally, we need to add a non-default constructor because each Shape should accept a Point (its location) in the constructor. All you need to do is call the base constructor and pass the point on to let it handle it:

public TriangleShape(Point location)
            : base(location)
        {
        }

Final code:

using System.Drawing;
 
namespace ShapeEditorLibrary.Shapes
{
    public class TriangleShape : Shape
    {
        public TriangleShape(Point location)
            : base(location)
        {
        }
 
        public override void Draw(System.Drawing.Graphics g)
        {
            float middle = this.Bounds.X + this.Bounds.Width / 2f;
 
            PointF left = new PointF(this.Bounds.Left, this.Bounds.Bottom);
            PointF right = new PointF(this.Bounds.Right, this.Bounds.Bottom);
            PointF top = new PointF(middle, this.Bounds.Top);
 
            using (var b = new SolidBrush(this.BackColor))
            {
                g.FillPolygon(b, new PointF[] { left, right, top });
            }
        }
    }
}

5. Finally, we need some way to add the Shape so we can test it. If you are still using my example project, you can very easily edit, for example, the 'addRectangle' toolstrip button. Instead of creating a new RectangleShape, just create a new TriangleShape:

private void addRectangle_Click(object sender, EventArgs e)
        {
            Shape s = new TriangleShape(new Point(rnd.Next(0, canvas1.Width), rnd.Next(0, canvas1.Height)));
            s.ContextMenuStrip = shapeContextMenu;
            canvas1.Shapes.Add(s);
        }

Nevermind the fact that the names don't match up, this is just for testing...

So test it! This is what you should get:

A fully functional triangular shape.

That wasn't very hard was it?


Enjoy!


-- Updated, see below! --