devexpress-examples/how-to-create-items-with-custom-content-in-diagramcontrol-t395119

Create diagram items with custom elements and register these items in the toolbox

WPF DiagramControl - Create Items with Custom Content

This example demonstrates how to create diagram items with custom elements and register these items in the toolbox.

DiagramControl shapes can display only string content. To add custom elements to diagram items, use DiagramContentItem objects with the specified ContentTemplate property:

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

Create a DiagramStencil object and call its RegisterTool method with the FactoryItemTool object as a parameter to register the created DiagramContentItem in the toolbox:

DiagramStencil stencil = new DiagramStencil("CustomTools", "Content Item Tools");

stencil.RegisterTool(new FactoryItemTool(
    id: "Text",
    getName: () => "Text",
    createItem: diagram => new DiagramContentItem() {
        CustomStyleId = "formattedTextContentItem"
    },
    defaultSize: new Size(230, 110), 
    isQuick: true
));

Call the DiagramToolboxRegistrator.RegisterStencil method to register the stencil:

DiagramToolboxRegistrator.RegisterStencil(stencil);

To deserialize the DiagramContentItem, specify its CustomStyleId property. This property accepts the applied style's key.

Files to Review

• DiagramData.xml (VB: DiagramData.xml)
• DiagramResources.xaml (VB: DiagramResources.xaml)
• MainWindow.xaml (VB: MainWindow.xaml)
• MainWindow.xaml.cs (VB: MainWindow.xaml.vb)
• Model.cs (VB: Model.vb)

Documentation

• Diagram Items with Custom Content
• DiagramContentItem
• DiagramContentItem.ContentTemplate

More Examples

• WPF DiagramControl - Create Custom Shapes with Connection Points
• Create Custom Diagram Containers and Register Them in the Toolbox and Ribbon Gallery
• Create a DiagramShape Descendant with Editable and Serializable Properties