Generating Diagrams from a Data Source
- 3 minutes 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.
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.
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.
<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>