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.