Shape Tool

The Shape Tool is one of the tools, which come out-of-the-box with the RadImageEditor and allow you to draw different shapes over an image.

The tool could be added to the UI of RadImageEditor as shown in Example 1.

Example 1: Add Shape Tool

• XAML

<telerik:ImageToolItem ImageKey="Shape" telerik:LocalizationManager.ResourceKey="ImageEditor_Shape" Command="commands:ImageEditorRoutedCommands.ExecuteTool"> 
    <telerik:ImageToolItem.CommandParameter> 
        <tools:ShapeTool> 
            <tools:ShapeTool.Shapes> 
                <shapes:RectangleShape /> 
            </tools:ShapeTool.Shapes> 
        </tools:ShapeTool> 
    </telerik:ImageToolItem.CommandParameter> 
</telerik:ImageToolItem> 

The namespaces that should be registered are as follows:

Example 2: Register namespaces

• XAML

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
xmlns:tools="clr-namespace:Telerik.Windows.Media.Imaging.Tools;assembly=Telerik.Windows.Controls.ImageEditor"   
xmlns:shapes="clr-namespace:Telerik.Windows.Media.Imaging.Shapes;assembly=Telerik.Windows.Controls.ImageEditor" 
xmlns:commands="clr-namespace:Telerik.Windows.Media.Imaging.ImageEditorCommands.RoutedCommands;assembly=Telerik.Windows.Controls.ImageEditor" 

By default, the ShapeTool provides three predefined shapes:

• Line: Allows to draw lines only with dragging.

• Rectangle: Draws rectangles or squares (when the LockRatio property is set to true)

• Ellipse: Allows you to create ellipses or circles (when the LockRatio property is set to true)

The Shape Tool provides an options to easily customize your shape – you can choose if the shape will be filled with some color or it will consist only of borders, which color and thickness also depends on your preferences. You could take advantage of the LockRatio property, which will ensure that the proportions of the shape will be always the same when resizing.

How to Create a Custom Shape

You could customize the shapes in the ShapeTool to fit specific requirements. To create a custom shape, the simple IShape interface should be implemented.

Example 3: Inherit the IShape interface

• C#
• VB

public class TelerikLogo : IShape 

Public Class TelerikLogo 
    Implements IShape 
    '... 

It exposes two members:

• string DisplayName: Тhe name, which will be displayed in the dropdown list.
• Geometry GetShapeGeometry: Тhe exact figure.

Example 4 shows a sample implementation of a custom shape.

Example 4: Implement custom shape

• C#
• VB

public string DisplayName 
{ 
    get 
    { 
        return "Telerik"; 
    } 
} 
 
public Geometry GetShapeGeometry() 
{ 
    PathFigure outer = new PathFigure(); 
    outer.IsClosed = true; 
    outer.StartPoint = new Point(0, 2.5); 
    outer.Segments.Add(new LineSegment() { Point = new Point(2.5, 0) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(5, 2.5) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(7.5, 0) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(10, 2.5) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(9, 3.5) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(7.5, 2) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(6, 3.5) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(8.5, 6) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(5, 9.5) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(1.5, 6) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(4, 3.5) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(2.5, 2) }); 
    outer.Segments.Add(new LineSegment() { Point = new Point(1, 3.5) }); 
 
    PathFigure inner = new PathFigure(); 
    inner.StartPoint = new Point(3.5, 6); 
    inner.IsClosed = true; 
    inner.Segments.Add(new LineSegment() { Point = new Point(5, 7.5) }); 
    inner.Segments.Add(new LineSegment() { Point = new Point(6.5, 6) }); 
    inner.Segments.Add(new LineSegment() { Point = new Point(5, 4.5) }); 
 
    PathGeometry logoGeometry = new PathGeometry(); 
    logoGeometry.Figures.Add(inner); 
    logoGeometry.Figures.Add(outer); 
 
    return logoGeometry; 
} 

Public ReadOnly Property DisplayName() As String Implements IShape.DisplayName 
    Get 
        Return "Telerik" 
    End Get 
End Property 
 
Public Function GetShapeGeometry() As Geometry Implements IShape.GetShapeGeometry 
    Dim outer As New PathFigure() 
    outer.IsClosed = True 
    outer.StartPoint = New Point(0, 2.5) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(2.5, 0)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(5, 2.5)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(7.5, 0)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(10, 2.5)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(9, 3.5)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(7.5, 2)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(6, 3.5)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(8.5, 6)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(5, 9.5)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(1.5, 6)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(4, 3.5)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(2.5, 2)}) 
    outer.Segments.Add(New LineSegment() With {.Point = New Point(1, 3.5)}) 
 
    Dim inner As New PathFigure() 
    inner.StartPoint = New Point(3.5, 6) 
    inner.IsClosed = True 
    inner.Segments.Add(New LineSegment() With {.Point = New Point(5, 7.5)}) 
    inner.Segments.Add(New LineSegment() With {.Point = New Point(6.5, 6)}) 
    inner.Segments.Add(New LineSegment() With {.Point = New Point(5, 4.5)}) 
 
    Dim logoGeometry As New PathGeometry() 
    logoGeometry.Figures.Add(inner) 
    logoGeometry.Figures.Add(outer) 
 
    Return logoGeometry 
End Function 

You could download runnable project with Custom Shape from our SDK repository

Add Custom Shape

After creating a custom shape, it should be registered in the tool. This could be achieved declaratively as well as in the code behind as shown in Examples 5 and 6. You could get or set the shapes in the ShapeTool trough the Shapes collection.

Example 5: Add custom shape to the shape tool

• C#
• VB

ShapeTool tool = new ShapeTool(); 
tool.Shapes.Add(new RectangleShape()); 
tool.Shapes.Add(new EllipseShape()); 
tool.Shapes.Add(new LineShape()); 
tool.Shapes.Add(new TelerikLogo()); 

Dim tool As New ShapeTool() 
tool.Shapes.Add(New RectangleShape()) 
tool.Shapes.Add(New EllipseShape()) 
tool.Shapes.Add(New LineShape()) 
tool.Shapes.Add(New TelerikLogo()) 

Example 5: Add custom shape to the shape tool

• XAML

<tools:ShapeTool> 
    <tools:ShapeTool.Shapes> 
        <shapes:RectangleShape /> 
        <shapes:EllipseShape /> 
        <shapes:LineShape /> 
        <local:TelerikLogo /> 
    </tools:ShapeTool.Shapes> 
</tools:ShapeTool>