Custom Shapes Tutorial. Step 3: Create Connection Points and Parameters

Dec 28, 2020
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.