Shapes

  • 5 minutes to read

The WPF Rich Text Editor allows you to view, print, and export (PDF) documents containing shapes. The RichEditControl supports all shape types: from simple lines and rectangles to 3-D shapes with advanced effects.

Shapes

This document covers:

Shapes in the User Interface

Users can move, resize, rotate, or remove shapes.

RotateResize

When users select a shape, the Picture Tools contextual tab becomes available. Items on this tab allow you to change the shape's position, text flow around the drawing object, and define the shape fill or outline color.

PictureTools

The RichEditControl provides the Shape Layout Dialog. This dialog allows users to specify advanced drawing object's properties. You can invoke this dialog from the shape's context menu.

IMAGE

IMPORTANT

The RichEditControl provides user interface elements to create text boxes and pictures only. You cannot insert other shape types.

Manage Shapes in Code

You can perform the following actions with shapes.

IMPORTANT

The RichEditControl does not support shapes in OpenDocument Text (.odt) documents.

Access a Shape

The ShapeCollection contains Shape objects. Access the collection using the SubDocument.Shapes property. You can retrieve the collection item by its index or name using the array notation. Use the Name property to specify the drawing object's name.

// Access a shape by its index.
Shape myShape = document.Shapes[0];

// Access a shape by its name.
Shape myShape = document.Shapes["Object1"];

Create a Shape

The Rich Text Editor provides the following API to create shapes, pictures and text boxes.

NOTE

The DocumentImageCollection.Append and DocumentImageCollection.Insert methods create images and add them to the ShapeCollection.

// Insert a rectangle at the beginning of the document.
Shape rectangle = richEditControl1.Document.Shapes.InsertShape(document.Range.Start, ShapeGeometryPreset.Rectangle, new RectangleF(300, 200, 500, 300));
// Fill the rectangle with color.
rectangle.Fill.SetSolidFill(Color.FromArgb(0xFF, 0xEE, 0xAD));

// Insert a picture at the end of the document.
richEditControl1.Document.Shapes.InsertPicture(richEditControl1.Document.Range.End, Image.FromFile("image001.jpg"));

Modify a Shape

Position

Use the Shape.TextWrapping property to specify the text flow around the drawing object. The following properties define the drawing object's position within the document.

API

Description

Shape.ZOrder

Places the floating object behind or in front of other shapes.

Shape.Offset

Positions the object relative to a certain point.

Shape.HorizontalAlignment

Shape.VerticalAlignment

Positions the object relative to the page element.

Shape.RelativeHorizontalPosition

Shape.RelativeVerticalPosition

Defines the page element to which the object position is relative.

The code snippet below uses the Shape.ZOrder property to position an image behind the specified drawing object and sets the Shape.TextWrapping property to place the image behind the text.

zOrder

document.LoadDocument("FirstLook.docx", DevExpress.XtraRichEdit.DocumentFormat.OpenXml);
Shape myPicture = document.Shapes[1];
myPicture.VerticalAlignment = ShapeVerticalAlignment.Top;
myPicture.ZOrder = document.Shapes[0].ZOrder - 1;
myPicture.TextWrapping = TextWrappingType.BehindText;

Rotate and Resize

Use the Shape.RotationAngle property to rotate the shape. The Shape.Size property defines the shape's size. Set the Shape.ScaleX or Shape.ScaleY property to scale the shape horizontally or vertically.

The following code rotates and resizes pictures in the document.

rotate

document.LoadDocument("FirstLook.docx", DevExpress.XtraRichEdit.DocumentFormat.OpenXml);
foreach (Shape s in document.Shapes)
{
    // Rotate and resize pictures.
    if (s.Type == ShapeType.Picture)
    {
        s.ScaleX = 0.8f;
        s.ScaleY = 0.8f;
        s.RotationAngle = 45;
    }
}

Format a Shape

Use the following API members to customize a shape's appearance:

  • Shape.Fill - Allows you to specify shape fill options.

  • Shape.Line - Provides access to format settings for a line or shape's border.

  • ShapeLine.Fill - Allows you to specify line fill options.

The example below shows how to create a rectangle and change its border settings.

Rich_ShapeLine_Settings

// Add a rectangle to a document.
Shape rectangle = document.Shapes.InsertShape(document.Range.Start, ShapeGeometryPreset.Rectangle, new RectangleF(300, 200, 500, 300));
// Fill the rectangle with color.
rectangle.Fill.SetSolidFill(Color.FromArgb(0xFF, 0xEE, 0xAD));
// Format the rectangle border.
ShapeLine border = rectangle.Line;
border.Color = Color.FromArgb(0x4D, 0x64, 0x8D);
border.Thickness = 6;
border.JoinType = LineJoinType.Miter;
border.DashType = LineDashType.Solid;

Delete a Shape

Use the ShapeCollection.Remove and ShapeCollection.RemoveAt methods to delete drawing objects from a document.

// Remove the first shape from the collection.
richEditControl1.Document.Shapes.RemoveAt(0);

You can also delete the range that contains the shape's anchor to remove the drawing object.

See Also