How to Create a Custom Shape using Inheritance?

[jbrumbaugh]

Hello,

I am trying to create a WPF application that will have a custom rectangle shape. Since Rectangle is a sealed class I have to inherit from Shape class. Basically my rectangle will consist of four corners (triangles) and 4 edges (trapezoids) that the user can interact with by selecting and dragging the edge or corner to resize the rectangle. Each side/corner will highlight when the mouse is over it (opacity on or off). The body can also be clicked on to move the rectangle. I envision having 8 different RenderedGeometry functions for the 4 corners and 4 sides.

However, my question is mainly about how I begin my definition of a custom Shape object? This is what I can think of for a start based on the Rectangle class:

    public sealed class dsgnShape : Shape
    {
        public dsgnShape();
 
        protected override Geometry DefiningGeometry { get; }
        public override Transform GeometryTransform { get; }
        public override Geometry RenderedGeometry { get; }
 
        protected override Size ArrangeOverride(Size finalSize);
        protected override Size MeasureOverride(Size constraint);
        protected override void OnRender(DrawingContext drawingContext);
    }
 

However I have had a hard time finding examples on what code goes inside these functions.

For quick reference here is the Shape class:

        public abstract class Shape : FrameworkElement
        {
            public static readonly DependencyProperty FillProperty;
            public static readonly DependencyProperty StretchProperty;
            public static readonly DependencyProperty StrokeDashArrayProperty;
            public static readonly DependencyProperty StrokeDashCapProperty;
            public static readonly DependencyProperty StrokeDashOffsetProperty;
            public static readonly DependencyProperty StrokeEndLineCapProperty;
            public static readonly DependencyProperty StrokeLineJoinProperty;
            public static readonly DependencyProperty StrokeMiterLimitProperty;
            public static readonly DependencyProperty StrokeProperty;
            public static readonly DependencyProperty StrokeStartLineCapProperty;
            public static readonly DependencyProperty StrokeThicknessProperty;
 
            protected Shape();
 
            protected abstract Geometry DefiningGeometry { get; }
            public Brush Fill { get; set; }
            public virtual Transform GeometryTransform { get; }
            public virtual Geometry RenderedGeometry { get; }
            public Stretch Stretch { get; set; }
            public Brush Stroke { get; set; }
            public DoubleCollection StrokeDashArray { get; set; }
            public PenLineCap StrokeDashCap { get; set; }
            public double StrokeDashOffset { get; set; }
            public PenLineCap StrokeEndLineCap { get; set; }
            public PenLineJoin StrokeLineJoin { get; set; }
            public double StrokeMiterLimit { get; set; }
            public PenLineCap StrokeStartLineCap { get; set; }
 
            [TypeConverter(typeof(LengthConverter))]
            public double StrokeThickness { get; set; }
 
            protected override Size ArrangeOverride(Size finalSize);
            protected override Size MeasureOverride(Size constraint);
            protected override void OnRender(DrawingContext drawingContext);
        }
 

Thanks in advance for the help!

[arie]

Here

http://msdn.microsoft.com/en-us/library/ms747393.aspx
http://www.c-sharpcorner.com/UploadFile/mahesh/278/

are some useful materials.

Can't you just use paths and bind to their properties or modify them from code?

[Frinavale]

Honestly, it sounds like what you want to do is create a control template....

I just implemented something similar to what you're talking about. I created various classes that inherited from the Thumb Class (a class that lets you manipulate an object). I created a MoveThumb, a ResizeThumb, and a RotateThumb class. Each class manages their assigned task for manipulating the object on the screen.

Once I implemented these classes I was able to define a ControlTemplate that has 4 corner ResizeThumbs, 4 edge Resize thumbs, a MoveThumb, and a rotate thumb.

You don't have to use a ControlTemplate to do this, you could us Adoners, but I wanted to keep things simple and I haven't researched the topic of Adoners enough to know how to use them properly.

The best resource that I could find on the topic was this codeplex article: WPF Diagram Designer.

Please note that the code posted in this article isn't 100% working.

When you rotate a Thumb, the mouse coordinates that you retrieve from in DragDelta event are messed up (they aren't rotated). To fix this, you need retrieve the appropriate mouse coordinates according to the rotation angle of the thumb.

-Frinny

[jbrumbaugh]

@Frinavale
Perfect that is exactly what I was looking for! It is nice to know there is already a Thumb class that I can inherit from and then fill in the blanks, and the example looks great. Really helpful, thanks a lot :)

[Frinavale]

It's a pretty sweet solution actually :)
If you have to implement rotation and need some help I'll give you a hand.