[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Collapse]Diagram Control
    Getting Started
   [Expand]Diagram Control
   [Expand]End-User Interaction
   [Collapse]Diagram Items
     Default Shapes
     SVG Shapes
     Items with Custom Content
     Creating Shapes and Containers Using Shape Templates
     Managing Items Interaction
   [Expand]Automatic Layout
   [Expand]Data Binding
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Creating Shapes and Containers Using Shape Templates

This document describes how to define shapes in XAML 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.

Consecutively defined geometries can be merged to form a single shape. To do this, set the Start.IsNewShape property to false for the second and subsequent geometries.

The Start class provides properties that define the appearance of the geometry:

The X, Y and Size properties support Criteria Language Syntax. The example below illustrates the cosine and sine functions.

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.

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