Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.
How to: Create Items with Custom Content in DiagramControl
4 minutes to read
Simple shapes in DiagramControl display only their content as an editable string. If it’s necessary to add custom elements to diagram items, use the DiagramContentItem class. DiagramContentItem has the DiagramContentItem.ContentTemplate property, which can be used to put any elements into the item.
stencil.RegisterTool(new FactoryItemTool(
"Calendar",
() => "Calendar",
diagram => new DiagramContentItem() {
CustomStyleId = "formattedTextContentItem"
},
new Size(230, 110), true));
After that, register the stencil using DiagramToolboxRegistrator.RegisterStencil.
Please note that to properly deserialize DiagramContentItem, it’s necessary to set its CustomStyleId property, which accepts a key of a Style applied to the item.
The following example shows how to create diagram items that display custom content.
ImportsSystemImportsSystem.Collections.GenericImportsSystem.LinqImports System.TextImportsSystem.WindowsNamespace DXDiagram.ContentItem
PublicClass ButtonItemModel
PublicSub ShowMessage()
MessageBox.Show("This command has been created by our POCO machanism based on the ShowMessage method")
EndSubEndClassEndNamespace
ImportsSystemImportsSystem.Collections.GenericImportsSystem.LinqImports System.TextImportsSystem.WindowsImportsSystem.Windows.ControlsImportsSystem.Windows.DataImportsSystem.Windows.DocumentsImportsSystem.Windows.InputImportsSystem.Windows.MediaImportsSystem.Windows.Media.ImagingImportsSystem.Windows.NavigationImportsSystem.Windows.ShapesImportsDevExpress.Diagram.CoreImportsDevExpress.Xpf.CoreImportsDevExpress.Xpf.DiagramImports DevExpress.Mvvm.POCO
Namespace DXDiagram.ContentItem
PartialPublicClass MainWindow
Inherits Window
PublicSubNew()
InitializeComponent()
RegisterContentItemTools()
LoadDiagram()
EndSubPrivateSub RegisterContentItemTools()
Dim stencil AsNew DiagramStencil("CustomTools", "Content Item Tools")
stencil.RegisterTool(New FactoryItemTool("Text", Function() "Text", Function(diagram) New DiagramContentItem() With {.CustomStyleId = "formattedTextContentItem"}, New Size(230, 110), True))
stencil.RegisterTool(New FactoryItemTool("Logo", Function() "Logo", Function(diagram) New DiagramContentItem() With {.CustomStyleId = "devExpressLogoContentItem"}, New Size(230, 80), True))
stencil.RegisterTool(New FactoryItemTool("Action", Function() "Button", Function(diagram) New DiagramContentItem() With {.CustomStyleId = "buttonContentItem"}, New Size(230, 80), True))
DiagramToolboxRegistrator.RegisterStencil(stencil)
EndSubPrivateSub LoadDiagram()
diagramControl.DocumentSource = "DiagramData.xml"
diagramControl.SelectedStencils = New StencilCollection(NewString() { "CustomTools" })
EndSubEndClassEndNamespace
<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram"xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"xmlns:local="clr-namespace:DXDiagram.ContentItem"xmlns:sys="clr-namespace:System;assembly=mscorlib"><Stylex:Key="formattedTextContentItem"TargetType="dxdiag:DiagramContentItem"><SetterProperty="Background"Value="#FF35779C"/><SetterProperty="ContentTemplate"><Setter.Value><DataTemplate><TextBlockTextWrapping="Wrap"TextAlignment="Center"VerticalAlignment="Center"Margin="10">
DiagramContentItem allows you to use custom content in diagram items. For example, you can use it for displaying
<RunFontSize="14"Foreground="#FFF3F3A8"FontWeight="Bold">formatted</Run>
text.
</TextBlock></DataTemplate></Setter.Value></Setter></Style><Stylex:Key="devExpressLogoContentItem"TargetType="dxdiag:DiagramContentItem"><SetterProperty="Background"Value="#FFEC7D32"/><SetterProperty="ContentTemplate"><Setter.Value><DataTemplate><StackPanelHorizontalAlignment="Center"Margin="10"VerticalAlignment="Center"><TextBlockText="Item with several images"VerticalAlignment="Center"FontSize="20"/><StackPanelOrientation="Horizontal"HorizontalAlignment="Center"><ImageSource="Images\DevExpressLogo.png"MaxHeight="32"Margin="5,0,0,0"/><ImageSource="Images\Globe.png"MaxHeight="32" /><ImageSource="Images\Apply.png"MaxHeight="32" /></StackPanel></StackPanel></DataTemplate></Setter.Value></Setter></Style><Stylex:Key="buttonContentItem"TargetType="dxdiag:DiagramContentItem"><SetterProperty="Background"Value="Gray"/><SetterProperty="ContentTemplate"><Setter.Value><DataTemplate><StackPanelHorizontalAlignment="Center"VerticalAlignment="Center"Margin="10"DataContext="{dxmvvm:ViewModelSource Type={x:Type local:ButtonItemModel}}"><TextBlockText="Item with a command"VerticalAlignment="Center"FontSize="20"/><ButtonContent="Show additional info"Command="{Binding ShowMessageCommand}"MaxHeight="40"Margin="5,0,0,0"Cursor="Hand"/></StackPanel></DataTemplate></Setter.Value></Setter></Style></ResourceDictionary>
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Windows;
namespaceDXDiagram.ContentItem
{
publicclassButtonItemModel
{
publicvoidShowMessage()
{
MessageBox.Show("This command has been created by our POCO machanism based on the ShowMessage method");
}
}
}
Was this page helpful?
Thanks for your feedback!
How can we improve this help topic?
Additional comments/thoughts:
If you have any questions, submit a ticket to our Support Center.