[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
    Getting Started
   [Expand]Diagram Control
   [Expand]End-User Interaction
   [Expand]Diagram Items
   [Expand]Automatic Layout
   [Collapse]Data Binding Functionality
     Generating Diagrams from a Data Source
     Generating Organization Charts
     Item Template Designer
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst 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]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)

Item Template Designer

The Item Template Designer is a design-time tool that is used to define the appearance of items and connectors for diagrams generated from a data source (DiagramDataBindingController and DiagramOrgChartController).

Expanded Invoking the Designer

To invoke the Item Template Designer, switch to the design view and invoke the diagram's smart tag. Switch to the MVVM behaviors and Services tab and select the Run Template Designer item within the Properties group of a corresponding behavior.

Expanded Customizing Items and Binding to Data

To define the appearance of connectors, drag a connector to the canvas and apply the desired settings to it.

To define the appearance of items representing data objects, drag a template from the Template Designer category of the toolbox onto the canvas and customize it as needed. Individual data fields are represented by the Text and Image elements. Items can be bound to data fields using the Item Data Binding Editor. To invoke it, double-click an item or click the item within it. To simply bind an item to a data field, type the field name.

The Save changes to the source option specifies whether to apply the TwoWay binding mode, causing changes in the diagram item's text to automatically update the data field value. This option is only in effect if the behavior's DiagramDataBindingControllerBase.EnableNotificationToSource property is set to true.


To build complex binding expressions, use the Criteria Language Syntax. The Save changes to the source option is only available for simple binding expressions.

Expanded Selecting Templates in Code-Behind

The uppermost connector and diagram item defined in code-behind in the DiagramDataBindingControllerBase.TemplateDiagram are used as the template for the connectors and diagram items representing data objects.

To implement custom logic for choosing the template, specify the template names using the DiagramItem.TemplateName property. Then handle the DiagramDataBindingControllerBase.GenerateItem and DiagramDataBindingControllerBase.GenerateConnector events and specify the name of the desired template as the event's CreateItemFromTemplate/CreateConnectorFromTemplate method parameter.

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