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 2: Define a Shape Geometry

  • 2 minutes to read

In the previous step, you specified the “DevExpress” and “Colorful Rectangle” shapes’ templates. This step describes how to define their geometry.

A geometric object is a set of lines and/or arc primitives that define a shape.

One shape can consist of multiple geometric objects. The destination point of each object’s primitive (except for the first primitive) defines a start point of the next primitive.

The Start child element contains attributes that allow you to specify the initial coordinates of any geometric object and adjust the following appearance settings:

  • Outline/background color

  • Fill color brightness

  • Shape type (None, Filled, Closed, ClosedFilled)

Next, define the “DevExpress” shape’s lines and arcs. The Line and Arc child elements include the X and Y attributes that are used to specify the destination point for the corresponding primitive.

The code snippet below shows how to define the “DevExpress” shape’s primitives:

// XML
<!--X and Y coordinates in the control area-->
  <Start X="0" Y="0.05" FillColor="#F58220" StrokeColor="#F58220" Kind="ClosedFilled"/>
  <Arc X="0.05" Y="0" Direction="Clockwise" Size="CreateSize([W]/20, [H]/20)"/>
  <Line X="0.95" Y="0"/>
  <Arc X="1" Y="0.05" Direction="Clockwise" Size="CreateSize([W]/20, [H]/20)"/>
  <Line X="1" Y="0.15"/>
  <Arc X="0.95" Y="0.2" Direction="Clockwise" Size="CreateSize([W]/20, [H]/20)"/>
  <Arc X="0" Y="0.58" Direction="Counterclockwise" Size="CreateSize([W]*1.75, [H]*0.95)"/>
  <Start X="0.05" Y="1" FillColor="#424141" StrokeColor="#424141" Kind="ClosedFilled"/>
  <Arc X="0" Y="0.95" Direction="Clockwise" Size="CreateSize([W]/22, [H]/22)"/>
  <Arc X="0.94" Y="0.26" Direction="Clockwise" Size="CreateSize([W]*2.4, [H])"/>
  <Arc X="1" Y="0.30" Direction="Clockwise" Size="CreateSize([W]/18, [H]/17)"/>
  <Line X="1" Y="0.95"/>
  <Arc X="0.95" Y="1" Direction="Clockwise" Size="CreateSize([W]/19, [H]/17)"/>

Note

You can use the shape’s width and height as the W and H parameters within the CreateSize function or pass constants instead of variables to create an arc with fixed dimensions.

Define the rectangle comprised of four smaller rectangles:

// XML
<!--X and Y coordinates in the control area-->
  <Start X="0" Y="0" FillColor="#F9E79F" StrokeColor="#6A6A5F"/>
  <Line X="1" Y="0"/>
  <Line X="1" Y="1"/>
  <Line X="0" Y="1"/>
  <Start X="0" Y="1" FillColor="#F0E68C" FillBrightness="-0.085" StrokeColor="#6A6A5F"/>
  <Line X="1" Y="1"/>
  <Line X="1" Y="2"/>
  <Line X="0" Y="2"/>
  <Start X="1" Y="0" FillColor="#FAD7A0" StrokeColor="#6A6A5F"/>
  <Line X="2" Y="0"/>
  <Line X="2" Y="1"/>
  <Line X="1" Y="1"/>
  <Start X="1" Y="1" FillColor="#F8C471" StrokeColor="#6A6A5F"/>
  <Line X="2" Y="1"/>
  <Line X="2" Y="2"/>
  <Line X="1" Y="2"/>

The next step describes how to specify anchor points that you can use to connect an arrow to the shape and use special parameters that allow you to change the shape.

See Also