Dragging in WPF SfDiagram

18 Nov 20186 minutes to read

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

In SelectorChangedEvent based on the arguments the process occurs,

Block: If this boolean expression is set to true, then the dragging occurs within the given rectangular area. If dragging exceeds the limit, then it returns to the previous position. Based on the BlockPosition the dragging of Block occurs.
BlockPosition: It is an enum that encapsulates two properties:
- SourcePosition- When the element exceeds the dragging limitation, it moves back to its previous position.
- CurrentPosition- The element remains within the limited area position and does not return to the previous position during dragging.
Abort: If this boolean is set to true, dragging is restricted within the defined limits.
Cancel: If this boolean is set to true, dragging of the element does not occur at all.

C#
SfDiargam Diagram = new SfDiagram();

// Configure the scroll limit and editable area.
Diagram.ScrollSettings.ScrollLimit = ScrollLimit.Limited;

Diagram.ScrollSettings.EditableArea = new Rect(0, 0, 1000, 1000);

// Subscribe to the SelectorChangedEvent.
(Diagram.Info as IGraphInfo).SelectorChangedEvent += Diagram_SelectorChangedEvent;

/// <summary>
/// Occurs when the selector state changes during an interaction such as
/// dragging, resizing, rotating, or moving diagram elements.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="args">
/// Contains information about the selector change and allows customization
/// of the interaction behavior.
/// </param>
private void MainWindow_SelectorChangedEvent(object sender, SelectorChangedEventArgs args)
{
    
    // Restricts dragging within the editable area.
    args.Block = true;

    args.BlockPosition = BlockPosition.CurrentPosition;
}

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 be enabled with the AllowDrop constraints property for both nodes and connectors.

XAML
C#
<syncfusion:SfDiagram.Nodes>
    <syncfusion:NodeCollection>
        <syncfusion:NodeViewModel Constraints="AllowDrop" 
                                  UnitHeight="100" UnitWidth="100"
                                  OffsetX="300" OffsetY="300"/>
    </syncfusion:NodeCollection>
</syncfusion:SfDiagram.Nodes>
//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 a preview for the target node or connector. We have provided a 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

View Sample in GitHub

Events

ItemDropEvent, DragEnter, DragOver and DragLeave events will notify you the Source and elements that are interacted with the dropped element (target). To learn about arguments, please refer to ItemDropEventArgs.

Search docs

Ask Syncfusion AI Assistant