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 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.

See Also