How to Bind Items Position to a Source Object

• Feb 02, 2024

This example demonstrates how to bind the Position property of diagram items to the view model in two-way mode.

Define the CustomLayoutItems event:

C#

private void DiagramDataBindingBehavior_CustomLayoutItems(object sender, DevExpress.Xpf.Diagram.DiagramCustomLayoutItemsEventArgs e) {
    e.Handled = true;
}

VB.NET

Private Sub DiagramDataBindingBehavior_CustomLayoutItems(ByVal sender As Object, ByVal e As DevExpress.Xpf.Diagram.DiagramCustomLayoutItemsEventArgs)
    e.Handled = True
End Sub

Add a Position property of the Point type to the data source:

C#

public class Item : BindableBase {
    public int Id { get; set; }
    public string Name { get; set; }
    public Point Position { get => GetProperty(() => Position); set => SetProperty(() => Position, value); }
}

VB.NET

Public Class Item
    Inherits BindableBase

    Public Property Id As Integer

    Public Property Name As String

    Public Property Position As Point
        Get
            Return GetProperty(Function() Me.Position)
        End Get

        Set(ByVal value As Point)
            SetProperty(Function() Position, value)
        End Set
    End Property
End Class

Specify a DiagramBinding for the Position property:

XAML

<dxdiag:DiagramDesignerControl>
    <dxmvvm:Interaction.Behaviors>
        <dxdiag:DiagramDataBindingBehavior
            ...
            CustomLayoutItems="DiagramDataBindingBehavior_CustomLayoutItems">
            <dxdiag:DiagramDataBindingBehavior.TemplateDiagram>
                <dxdiag:DiagramControl
                    ...
                    >
                    <dxdiag:DiagramShape
                        Width="100"
                        Height="75"
                        Anchors="Left, Top"
                        Position="90,60"
                        Shape="BasicShapes.Rectangle">
                        <dxdiag:DiagramShape.Bindings>
                            <dxdiag:DiagramBinding
                                Expression="Position"
                                Mode="TwoWay"
                                PropertyName="Position" />
                        </dxdiag:DiagramShape.Bindings>
                    </dxdiag:DiagramShape>
                </dxdiag:DiagramControl>
            </dxdiag:DiagramDataBindingBehavior.TemplateDiagram>
        </dxdiag:DiagramDataBindingBehavior>
    </dxmvvm:Interaction.Behaviors>
</dxdiag:DiagramDesignerControl>

View Example