Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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