Dragging based on DragLimit in WPF Diagram (SfDiagram)
29 Dec 20214 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.
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.
//Enable AllowDrop Constraints for Node
Node.Constraints |= NodeConstraints.AllowDrop;
Similarly, you can enable AllowDrop constraints for connector to drop a node over connector.
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. |
<<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;
Events
- ItemDropEvent, DragEnter, DragOver and DragLeave events will notify you the Source and elements that are interacted with the dropped element(target).To explore about arguments, please refer to ItemDropEventArgs.