Generate Diagrams from a Data Source
- 4 minutes to read
This topic describes how to bind the DiagramControl to a data source.
Tip
Refer to the Generate Organization Charts topic for information on how to bind the DiagramControl to a hierarchical data source.
Add the Behavior
The DiagramDataBindingBehavior is used to bind the DiagramControl to data. To add the behavior, open the DiagramControl’s Quick Actions and select DiagramDataBindingBehavior.
The following XAML is generated.
<dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes">
<dxmvvm:Interaction.Behaviors>
<dxdiag:DiagramDataBindingBehavior />
</dxmvvm:Interaction.Behaviors>
</dxdiag:DiagramControl>
To configure the data source, go to the Quick Action’s Behaviors tab.
Use the Item Template Designer to create templates for diagram items and connectors.
The following table lists the properties used to map a diagram to data.
| Member | Description |
|---|---|
| DiagramDataBindingBehaviorBase.ItemsSource | Specifies the path to a collection of diagram items. |
| DiagramDataBindingBehavior.ConnectorsSource | Specifies the path to a collection of objects that represent connectors. |
| DiagramDataBindingBehavior.ConnectorFromMember | Specifies the name of the data field that identifies the item to use as a connector’s start item. |
| DiagramDataBindingBehavior.ConnectorToMember | Specifies the name of the data field that identifies the item to use as a connector’s end item. |
Limitations
When you use the DiagramDataBindingBehavior to generate a diagram from a source, you can only add new diagram items as follows:
- Add diagram items in runtime from the Shapes Panel or Ribbon.
- Add data items to the bound collection.
Adding items directly to the DiagramControl.Items collection is not supported.
The DiagramDataBindingController can only get values from strongly typed objects. Binding to dynamic properties is not supported.
Example
The following example demonstrates the DiagramControl bound to sample data.
<Window ...
xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
DataContext="{dxmvvm:ViewModelSource Type={x:Type viewModel:ViewModel}}">
<Grid>
<dxdiag:DiagramControl ShowGrid="False" ShowRulers="False" ShowPageBreaks="False" CanvasSizeMode="Fill">
<dxmvvm:Interaction.Behaviors>
<dxdiag:DiagramDataBindingBehavior ItemsSource="{Binding ClassSource}" ConnectorsSource="{Binding ConnectionSource}" ConnectorFromMember="ConnectedFrom" ConnectorToMember="ConnectedTo" KeyMember="ClassName" LayoutKind="Sugiyama" ClearExistingItems="False" GenerateItem="DiagramDataBindingBehavior_GenerateItem" GenerateConnector="DiagramDataBindingBehavior_GenerateConnector">
<dxdiag:DiagramDataBindingBehavior.TemplateDiagram>
<dxdiag:DiagramControl CanvasSizeMode="Fill" SelectedStencils="TemplateDesigner" ShowPageBreaks="false">
<dxdiag:DiagramContainer Anchors="Left, Top" Background="#FFCEE1F2" CanCopyWithoutParent="True" ConnectionPoints="0.5,0 1,0.5 0.5,1 0,0.5" CanAddItems="False" DragMode="ByAnyPoint" Height="78" ItemsCanChangeParent="False" ItemsCanAttachConnectorEndPoint="False" ItemsCanAttachConnectorBeginPoint="False" ItemsCanSelect="False" ItemsCanEdit="False" ItemsCanCopyWithoutParent="False" ItemsCanMove="False" ItemsCanRotate="False" ItemsCanSnapToOtherItems="False" ItemsCanDeleteWithoutParent="False" ItemsCanSnapToThisItem="False" ItemsCanResize="False" Position="25,150" StrokeId="Black" Shape="StandardContainers.Alternating" ShowHeader="False" StrokeDashArray="5 3" ThemeStyleId="ShapeId.Focused1" TemplateName="ClassShape" Width="200">
<dxdiag:DiagramShape Anchors="Left, Top" Angle="0" Background="Transparent" CanAttachConnectorBeginPoint="False" CanResize="False" CanEdit="False" CanCopyWithoutParent="False" CanChangeParent="False" CanMove="False" CanAttachConnectorEndPoint="False" CanSelect="False" CanDeleteWithoutParent="False" CanRotate="False" ForegroundId="Black" FontWeight="Bold" FontFamily="Arial" Height="25" Position="11,10" StrokeThickness="0" ThemeStyleId="Variant2" TextAlignment="Left" Width="176">
<dxdiag:DiagramShape.Bindings>
<dxdiag:DiagramBinding Expression="ClassName" PropertyName="Content"/>
</dxdiag:DiagramShape.Bindings>
</dxdiag:DiagramShape>
<dxdiag:DiagramShape Anchors="Left, Top" Angle="0" Background="Transparent" CanAttachConnectorBeginPoint="False" CanResize="False" CanEdit="False" CanCopyWithoutParent="False" CanChangeParent="False" CanMove="False" CanAttachConnectorEndPoint="False" CanSelect="False" CanDeleteWithoutParent="False" CanRotate="False" ForegroundId="Black_3" FontFamily="Arial" Height="25" Position="11,37.5" Stroke="Transparent" StrokeThickness="0" TextAlignment="Left" Width="176">
<dxdiag:DiagramShape.Bindings>
<dxdiag:DiagramBinding Expression="Type" PropertyName="Content"/>
</dxdiag:DiagramShape.Bindings>
</dxdiag:DiagramShape>
</dxdiag:DiagramContainer>
<dxdiag:DiagramConnector BeginPoint="300,164" CanDragBeginPoint="False" CanChangeRoute="False" CanDragEndPoint="False" EndArrow="ClosedASMEArrow" EndArrowSize="10,10" EndPoint="390,254" Points="(Empty)" StrokeId="Black" TemplateName="ClassConnector" Type="Straight"/>
<dxdiag:DiagramContainer Anchors="Left, Top" BackgroundId="Dark_2" CanCopyWithoutParent="True" ConnectionPoints="0.5,0 1,0.5 0.5,1 0,0.5" CanAddItems="False" DragMode="ByAnyPoint" Height="78" ItemsCanChangeParent="False" ItemsCanAttachConnectorEndPoint="False" ItemsCanAttachConnectorBeginPoint="False" ItemsCanSelect="False" ItemsCanEdit="False" ItemsCanCopyWithoutParent="False" ItemsCanMove="False" ItemsCanRotate="False" ItemsCanSnapToOtherItems="False" ItemsCanDeleteWithoutParent="False" ItemsCanSnapToThisItem="False" ItemsCanResize="False" Position="428,369" StrokeId="Black" Shape="StandardContainers.Alternating" ShowHeader="False" StrokeDashArray="5 3" ThemeStyleId="ShapeId.Focused1" TemplateName="InterfaceShape" Width="200">
<dxdiag:DiagramShape Anchors="Left, Top" Angle="0" Background="Transparent" CanAttachConnectorBeginPoint="False" CanResize="False" CanEdit="False" CanCopyWithoutParent="False" CanChangeParent="False" CanMove="False" CanAttachConnectorEndPoint="False" CanSelect="False" CanDeleteWithoutParent="False" CanRotate="False" ForegroundId="Black" FontWeight="Bold" FontFamily="Arial" Height="25" Position="11,10" StrokeThickness="0" ThemeStyleId="Variant2" TextAlignment="Left" Width="176">
<dxdiag:DiagramShape.Bindings>
<dxdiag:DiagramBinding Expression="ClassName" PropertyName="Content"/>
</dxdiag:DiagramShape.Bindings>
</dxdiag:DiagramShape>
<dxdiag:DiagramShape Anchors="Left, Top" Angle="0" Background="Transparent" CanAttachConnectorBeginPoint="False" CanResize="False" CanEdit="False" CanCopyWithoutParent="False" CanChangeParent="False" CanMove="False" CanAttachConnectorEndPoint="False" CanSelect="False" CanDeleteWithoutParent="False" CanRotate="False" ForegroundId="Black_3" FontFamily="Arial" Height="25" Position="11,37.5" Stroke="Transparent" StrokeThickness="0" TextAlignment="Left" Width="176">
<dxdiag:DiagramShape.Bindings>
<dxdiag:DiagramBinding Expression="Type" PropertyName="Content"/>
</dxdiag:DiagramShape.Bindings>
</dxdiag:DiagramShape>
</dxdiag:DiagramContainer>
<dxdiag:DiagramConnector BeginPoint="500,175" CanDragBeginPoint="False" CanChangeRoute="False" CanDragEndPoint="False" EndArrow="Filled90" EndArrowSize="10,10" EndPoint="590,265" Points="(Empty)" StrokeId="Black" TemplateName="InterfaceConnector" Type="Straight"/>
</dxdiag:DiagramControl>
</dxdiag:DiagramDataBindingBehavior.TemplateDiagram>
</dxdiag:DiagramDataBindingBehavior>
</dxmvvm:Interaction.Behaviors>
</dxdiag:DiagramControl>
</Grid>
</Window>
public class ViewModel {
public List<ClassData> ClassSource { get; set; }
public List<ConnectionData> ConnectionSource { get; set; }
public ViewModel() {
ClassSource = ClassStructureGenerator.ClassList();
ConnectionSource = ClassStructureGenerator.ConnectionList();
}
}
//...
private void DiagramDataBindingBehavior_GenerateItem(object sender, DevExpress.Xpf.Diagram.DiagramGenerateItemEventArgs e) {
if (((ClassData)e.DataObject).Type == ClassType.Interface)
e.Item = e.CreateItemFromTemplate("InterfaceShape");
else e.Item = e.CreateItemFromTemplate("ClassShape");
}
private void DiagramDataBindingBehavior_GenerateConnector(object sender, DevExpress.Xpf.Diagram.DiagramGenerateConnectorEventArgs e) {
if (((ClassData)e.From).Type == ClassType.Interface || ((ClassData)e.To).Type == ClassType.Interface)
e.Connector = e.CreateConnectorFromTemplate("InterfaceConnector");
else e.Connector = e.CreateConnectorFromTemplate("ClassConnector");
}
See Also