Items with Custom Content

  • 4 minutes to read

Overview

Simple shapes in a DiagramControl only display their content as an editable string. Use the DiagramContentItem class to add custom elements to diagram items. DiagramContentItem has the DiagramContentItem.ContentTemplate property, which can be used to place any elements into the item.

<Style x:Key="formattedTextContentItem" TargetType="dxdiag:DiagramContentItem">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                ...
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

To register a DiagramContentItem in the toolbox, use the DiagramStencil.RegisterTool method with FactoryItemTool as a parameter:

stencil.RegisterTool(new FactoryItemTool(
    "Calendar",
    () => "Calendar",
    diagram => new DiagramContentItem() {
        CustomStyleId = "formattedTextContentItem"
    },
    new Size(230, 110), true));

After that, register the stencil using DiagramToolboxRegistrator.RegisterStencil.

NOTE

To properly deserialize a DiagramContentItem, it's necessary to set its DiagramItem.CustomStyleId property, which accepts a Style key applied to the item.

Use DiagramContentItem to represent data objects in diagrams generated from a data source, by specifying DiagramContentItem as the DiagramDataBindingBehaviorBase.ItemTemplate. See the example below.

<dxdiag:DiagramOrgChartBehavior.ItemTemplate>
    <DataTemplate>
        <dxdiag:DiagramContentItem>
            <dxdiag:DiagramContentItem.ContentTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Text}"/>
                </DataTemplate>
            </dxdiag:DiagramContentItem.ContentTemplate>
        </dxdiag:DiagramContentItem>
    </DataTemplate>
</dxdiag:DiagramOrgChartBehavior.ItemTemplate>

Example

The following example shows how to create diagram items that display custom content.

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows

Namespace DXDiagram.ContentItem
    Public Class ButtonItemModel
        Public Sub ShowMessage()
            MessageBox.Show("This command has been created by our POCO machanism based on the ShowMessage method")
        End Sub
    End Class
End Namespace