Skip to main content
All docs
V24.1

How to Bind Items Position to a Source Object

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

Define the CustomLayoutItems event:

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

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

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

Specify a DiagramBinding for the Position property:

<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