Generating Diagrams from a Data Source

  • 3 min to read

The DiagramDataBindingBehavior class provides the data binding behavior for the DiagramControl. To bind the DiagramControl to data, open its Smart Tag panel and select DiagramDataBindingBehavior.

Diagram data behaviors smart tag

The following XAML will be generated.

<dxdiag:DiagramControl SelectedStencils="BasicShapes, BasicFlowchartShapes">
    <dxmvvm:Interaction.Behaviors>
        <dxdiag:DiagramDataBindingBehavior />
    </dxmvvm:Interaction.Behaviors>
</dxdiag:DiagramControl>

To configure the data source, go to the Smart Tag panel's MVVM Behaviors tab.

DataBindingSmartTag

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

Limitations The DiagramDataBindingController can only get values from strongly typed objects. Binding to dynamic properties is not supported.

TIP

The Item Template Designer allows you to design templates for diagram items and connectors at design time.

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 Items}" ConnectorsSource="{Binding Connections}" KeyMember="Id" 
                                                   ConnectorFromMember="From" ConnectorToMember="To" LayoutKind="Circular">
                    <dxdiag:DiagramDataBindingBehavior.TemplateDiagram>
                        <dxdiag:DiagramControl SelectedStencils="TemplateDesigner" ShowPageBreaks="false">
                            <dxdiag:DiagramContainer  Height="50"  ThemeStyleId="Variant1" Width="100">
                                <dxdiag:DiagramShape StrokeThickness="0" Height="50"  Width="100">
                                    <dxdiag:DiagramShape.Bindings>
                                        <dxdiag:DiagramBinding Expression="Name" PropertyName="Content" />
                                    </dxdiag:DiagramShape.Bindings>
                                </dxdiag:DiagramShape>
                            </dxdiag:DiagramContainer>
                        </dxdiag:DiagramControl>
                    </dxdiag:DiagramDataBindingBehavior.TemplateDiagram>
                </dxdiag:DiagramDataBindingBehavior>
            </dxmvvm:Interaction.Behaviors>
        </dxdiag:DiagramControl>
    </Grid></Window>