[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
   [Expand]Diagram Items
   [Expand]Automatic Layout
   [Collapse]Data Binding
     Generating Diagrams from a Data Source
     Generating Organization Charts
     Item Template Designer
    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)

Item Template Designer

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

Expanded Invoking the Designer

To invoke the Item Template Designer, switch to the design view and invoke the diagram's smart tag menu. Switch to the MVVM behaviors and Services tab and select Run Template Designer within the Properties group of the 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 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 Text and Image elements. You can bind items to data fields using the Item Data Binding Editor. To invoke it, double-click an item or click the item within the Editor. To 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, which automatically updates the data field value based on changes in the diagram item's text. This option is only in effect if the behavior's DiagramDataBindingBehaviorBase.EnableNotificationToSource property is set to true.


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

Expanded Selecting Templates in Code-Behind

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

You can use the DiagramDataBindingBehaviorBase.ItemTemplateSelector and DiagramDataBindingBehaviorBase.ConnectorTemplateSelector properties to implement custom logic for template selection.

Alternatively, specify template names using the DiagramItem.TemplateName property. Then handle the DiagramDataBindingBehaviorBase.GenerateItem and DiagramDataBindingBehaviorBase.GenerateConnector events, and specify the name of the desired template as the event's CreateItemFromTemplate/CreateConnectorFromTemplate method parameter.

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