Custom Shapes Tutorial. Step 3: Create Connection Points and Parameters
- 2 minutes to read
In the previous step, you defined each shape’s geometry.
This step shows how to specify optional settings that allow you to bind a connection to the shape or modify its geometry.
To add anchor points to the “DevExpress” shape, define the ConnectionPoints child element and use the ShapePoint sub-element’s attributes. Set an anchor point’s coordinates and specify whether they are relative or absolute.
// XML
<ConnectionPoints>
<ShapePoint X="0" Y="0.58" Kind="Relative"/>
<ShapePoint X="0.015" Y="0.015" Kind="Relative"/>
<ShapePoint X="0.5" Y="0"Kind="Relative"/>
<ShapePoint X="0.985" Y="0.015" Kind="Relative"/>
<ShapePoint X="0.985" Y="0.19" Kind="Relative"/>
<ShapePoint X="0.985" Y="0.28" Kind="Relative"/>
<ShapePoint X="0.985" Y="0.98" Kind="Relative"/>
<ShapePoint X="0.5" Y="1" Kind="Relative"/>
<ShapePoint X="0.013" Y="0.98" Kind="Relative"/>
</ConnectionPoints>
</ShapeTemplate>
The image below shows the result.
To specify optional parameters that allow you to change the shape’s geometry, use the Parameter sub-element’s attributes within the Parameters child element.
The code snippet below shows how to specify the “Colorful Rectangle” shape’s parameters:
// XML
<Parameters>
<Parameter DefaultValue="0.5"
Point="CreatePoint([W], [P] * [H])"
Value="[P.Y] / [H]"
Min="0" Max="1"/>
<Parameter DefaultValue="0.5"
Point="CreatePoint([P] * [W], [H])"
Value="[P.X] / [W]"
Min="0" Max="1"/>
</Parameters>
</ShapeTemplate>
The CreatePoint function accepts the handle’s coordinates as parameters. To pass a parameter’s current value, use the P variable.
To make the handles functional, return to the ShapeTemplate section and replace the Rows and Columns values with the following code snippet:
// XML
<!--The rectangle's height is multiplied by the first parameter(P0). You can move the handle by the Y axis and change rows size.-->
Rows="[H]*[P0];[H]*(1-[P0])"
<!--The rectangle's width is multiplied by the second parameter(P1). You can move the handle by the X axis and change columns size.-->
Columns="[W]*[P1];[W]*(1-[P1])">
The image below shows the result.
Save your file and load shapes to the control’s repository as shown in the next step.