Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Custom Shapes Tutorial. Step 1: Describe a Shape Template

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.

See Also