Dragging based on DragLimit in WPF Diagram (SfDiagram)

11 Jan 20244 minutes to read

Diagram provides support to drag the elements within the given limitations using EditableArea, ScrollLimit.Limited property and based on SelectorChangedEvent enabling/disabling of dragging within the limits occur.

In SelectorChangedEvent based on the arguments the process occurs,

Block-If this boolean expression is set true, then the dragging occurs within the given rectangular area. If dragging exceeds than the limit, then it hit back to previous position.
Based on the BlockPosition the dragging of Block occurs.
Block Position
SourcePosition- the element moves to the previous position if it exceeds the limitation during dragging.
CurrentPosition- the element present at the limited area position, it does not hit back to previous position during dragging.
Abort- If this boolean is set to true, then dragging is occurs within the limit.
Cancel- If this boolean is set to true, then the dragging of element does not occurs.

Refer for Scroll-Limit.

Dragging Diagram elements in vertical and horizontal axis

Diagram provides support to drag its elements in either vertical or horizontal directions by holding down SHIFT key while dragging the diagram elements.

Shift Dragging

Drag and Drop Nodes over other elements

Diagram provides support to drop a node over another node or connector. Drop event is raised to notify that an element is dropped over another one and it is disabled by default. It can enabled with the AllowDrop constraints property for both node and connector.

C#
//Enable AllowDrop Constraints for Node

Node.Constraints |= NodeConstraints.AllowDrop;

Similarly, you can enable AllowDrop constraints for connector to drop a node over connector.

View Sample in GitHub

Customize the appearance of Drop Indicator

Drag and drop a node over another node or connector will show the preview for the target node or connector. We have provided customization option for the appearance of the Preview.

Style	Behavior
NodeDropIndicatorStyle	Defines the customization option for preview for the Node.
ConnectorDropIndicatorStyle	Defines the customization option for preview for the Connector.

XAML
C#
<<Style TargetType="Shape" x:Key="Nodedropindicator">
                <Setter Property="StrokeThickness" Value="4"/>
                <Setter Property="Stroke" Value="Orange"/>
            </Style>
            
            <Style TargetType="Shape" x:Key="connectordropindicator">
                <Setter Property="StrokeThickness" Value="2"/>
                <Setter Property="Stroke" Value="Blue"/>
            </Style>


<Syncfusion:SfDiagram x:Name="Diagram" 
                              NodeDropIndicatorStyle="{StaticResource Nodedropindicator}"
                              ConnectorDropIndicatorStyle="{StaticResource connectordropindicator}">
SfDiagram Diagram = new SfDiagram();

Diagram.NodeDropIndicatorStyle = this.Resources["Nodedropindicator"] as Style;

Diagram.ConnectorDropIndicatorStyle = this.Resources["connectordropindicator"] as Style;

Drop Indicator