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.

Diagram data behaviors smart tag

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.

DataBindingSmartTag

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

  1. 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.

  2. 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.

DataBindingBehaviorExample

<Window ...
        xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram" 
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" >
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes">
            <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");
}

Example

View Example

See Also