Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Collapse]Diagrams
    Getting Started
   [Expand]Diagram Designer
    Diagram Control
   [Expand]End-User Interaction
   [Collapse]Diagram Items
     Shapes
     Default Shapes
     Connectors
     Images
     SVG Shapes
     Creating Shapes and Containers Using Shape Templates
     Containers
   [Expand]Automatic Layout
   [Expand]Data Binding Functionality
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
   [Expand]Examples
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Creating Shapes and Containers Using Shape Templates

This document describes how to define shapes in XML using shape templates. The ShapeTemplate is the main element that contains shape description. The ContainerShapeTemplate is used to describe containers.

Expanded Segments

You can define the shape geometry using the following segments :

  • Start - Specifies the start point of the geometry and provides customization properties. A shape can consist of multiple geometries.
  • Line - Defines a line.
  • Arc - Defines an arc with the size and the direction.

Each segment provides the X and Y properties that define its relative coordinates within the shape border. X="0" Y="0" corresponds to the top-left corner of the shape border, X="1" Y="1" corresponds to the bottom-right corner. The Line and Arc segments are drawn from the point defined by the preceding segment's X and Y values to the point defined by their X and Y.

The arc segment's size is specified using the CreateSize method that accepts absolute width and height values as parameters. You can pass the shape's current width and height as the method's parameters using the W and H variables respectively. To create an arc with a fixed height or width, pass a static value instead of a variable. The code snippet below illustrates how to create an arc half the size of the shape.

Expanded Connection Points

The ShapeTemplate.ConnectionPoints property allows you to specify the connection points the ShapePoint class instances represent. See the code snippet below.

Expanded Shape Transformations

You can specify shape parameters by adding the Parameter class instances to the ShapeTemplate.Parameters collection. End-users can transform the shape by dragging the yellow handles that visually represent parameters. Each parameter is characterized by its Parameter.Value property. The Parameter.Point property specifies the handle's coordinates using the CreatePoint method. Use the P variable to pass the current Parameter.Value to this method's parameters.

To pass the current Parameter.Point to the Parameter.Value definition, use the P.X and P.Y variables that correspond to the point's X and Y coordinates.

The code snippet below illustrates how to define a parameter that changes its value from 0 to 1 depending on its current Y coordinate. An end-user cannot change the X coordinate.

You can pass the parameter's value to the CreateSize method. The P0 variable corresponds to the first parameter within the ShapeTemplate.Parameters collection, the P1 corresponds to the second parameter and so on. The code snippet below illustrates how to use this parameter to allow an end-user to transform the shape by changing the Arc segment's size.

The following image shows the result:

Expanded Rows and Columns

The ShapeTemplate.Rows and ShapeTemplate.Columns properties allow you to define a grid-based layout and arrange complex shape elements. Elements are automatically aligned in rows and columns.

The following code snippet illustrates how to define a shape that consists of four rectangles arranged in two columns and two rows. An end-user can customize row and column sizes.

The image below shows the result.

See the example: How to: Create Custom Shapes with Connection Points

Is this topic helpful?​​​​​​​