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.

C#
VB.NET

csharp

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

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#
VB.NET

csharp

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

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

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