Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Collapse]Diagram Control
    Getting Started
   [Expand]Diagram Designer Control
    Diagram Control
   [Expand]End-User Interaction
   [Collapse]Diagram Items
     Shapes
     Default Shapes
     Connectors
     Containers
     Images
     SVG Shapes
     Creating Shapes and Containers Using Shape Templates
   [Expand]Automatic Layout
   [Expand]Data Binding
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
   [Expand]Examples
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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 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.

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?​​​​​​​