Custom Shapes Tutorial. Step 1: Describe a Shape Template

• Dec 28, 2020

In this step, use an XML file editor to open a blank XML file.

An XML-based shape consists of a template that describes the shape (this includes its geometry and optional settings).

The ShapeTemplate element contains attributes that allow you to specify a shape’s size, unique identifier in the repository, caption, and a grid-based layout within a shape.

Note

Parse routines define any content enclosed within the <ShapeTemplate>…</ShapeTemplate> tags as a single shape when you load a file with a shape description. One file can contain multiple shape descriptions.

The code snippet below includes the “DevExpress” shape description:

// XML
  <ShapeTemplate 
  Id="DXIcon" 
  Caption="DevExpress"
  DefaultSize="100,100">

Next, create the “Colorful Rectangle” shape that consists of four smaller rectangles arranged in two columns and two rows. To create a grid-based layout, pass the row/column sizes separated by “;” as the values of the shape template’s Rows and Columns attributes.

Note

To enable automatic row/column size calculation, pass “*” as an attribute value.

The code snippet demonstrates how to define the “Colorful Rectangle” shape:

// XML
<ShapeTemplate 
  ID="FourRectangles"
  Caption="Colorful Rectangle"
  DefaultSize="100, 100"
  Rows="*;45"
  Columns="52;*">

The next step describes how to adjust a shape’s geometry.