Custom Shapes Tutorial. Complete Code Examples

• Dec 28, 2020
• 2 minutes to read

This topic includes the code snippets that show full description of the “DevExpress” and “Colorful Rectangle” shapes created in this tutorial.

The “DevExpress” shape’s description:

//XML
<ShapeTemplate
  ID="DXIcon"
  Caption="DevExpress"
  DefaultSize="100,100">
    <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)"/>
    <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 “Colorful Rectangle” shape’s description:

//XML
<ShapeTemplate
  ID="FourRectangles"
  Caption="Colorful Rectangle"
  DefaultSize="100, 100"
  Rows="[H]*[P0];[H]*(1-[P0])"
  Columns="[W]*[P1];[W]*(1-[P1])">
    <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"/>
    <Parameters>
      <Parameter 
        Max="1" Min="0"
        Value="[P.Y] / [H]"
        Point="CreatePoint([W], [P] * [H])"
        DefaultValue="0.5"/>
      <Parameter
        Max="1" Min="0"
        Value="[P.X] / [W]"
        Point="CreatePoint([P] * [W], [H])"
        DefaultValue="0.5"/>
    </Parameters>
</ShapeTemplate>