Skip to main content
All docs
V25.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