Skip to content

WPF-1038171-Need to modify the UG files content_02 #2461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KarkuvelRajan merged 2 commits into from
Aug 17, 2026
Merged

WPF-1038171-Need to modify the UG files content_02 #2461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
643a21d
WPF-1038171_Files_updated
ArunKumarSF4054 Aug 7, 2026
a93fa65
Merge branch 'development' into WPF-1038171_To_update_WPF_UG_files_02
ArunKumarSF4054 Aug 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions wpf/Diagram/Interaction/Deletion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,17 @@ documentation: ug

# Deletion in WPF SfDiagram

Selected objects can be deleted by using the Delete key or In-built Delete command through QuickCommand.
Selected objects can be deleted by using the Delete key or the built-in Delete command through QuickCommand. For more information about configuring and using QuickCommands, refer to the [QuickCommand](https://help.syncfusion.com/wpf/diagram/interaction/userhandle) documentation.

* [ItemDeletedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDeleted) will notify you with the deleted item in argument. To explore about arguments , please refer to [ItemDeletedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletedEventArgs.html).
* [ItemDeletedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDeleted) will notify you of the deleted item through the event arguments. To learn about arguments , please refer to [ItemDeletedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletedEventArgs.html).

* [ItemDeletingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDeletingEvent) will notify you with the item , option to cancel the deleting operation of item and option to decide on deleting dependent Connector when its Source/Target gets deleting. To explore about arguments , please refer to [ItemDeletingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletingEventArgs.html).
* [ItemDeletingEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDeletingEvent) will notify you with the item , an option to cancel the deleting operation of item and option to decide on deleting dependent Connector when its Source/Target is deleted. To learn about arguments, please refer to [ItemDeletingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDeletingEventArgs.html).

{% tabs %}
{% highlight C# %}
Comment thread
ArunKumarSF4054 marked this conversation as resolved.
Resolved

SfDiagram diagram = new SfDiagram();

(diagram.Info as IGraphInfo).ItemDeletingEvent += MainWindow_ItemDeletingEvent;

/// <summary>
Expand All @@ -28,9 +30,15 @@ Selected objects can be deleted by using the Delete key or In-built Delete comma
/// <param name="args"></param>
private void MainWindow_ItemDeletingEvent(object sender, DiagramPreviewEventArgs args)
{
//For Deleting Node Without its Dependent Connector
//Prevent deletion of dependent connectors when deleting a node.

(args as ItemDeletingEventArgs).DeleteDependentConnector = false;

// For deleting the successor nodes and connectors
// associated with the currently deleting node.

(args as ItemDeletingEventArgs).DeleteSuccessors = true;

}

{% endhighlight %}
Expand Down
16 changes: 9 additions & 7 deletions wpf/Diagram/Interaction/Dragging/CollisionState.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,23 @@ documentation: ug
---
# Collision State in WPF SfDiagram

[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provide supports to arrange the nodes and connectors neatly by adjusting node's position. For example, on a diagram with full of nodes and connectors, you want to place a node without intersecting any other elements.
[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provides support to arrange the nodes and connectors neatly by adjusting the node's position. For example, on a diagram with full of nodes and connectors, you want to place a node without intersecting any other elements.

Using [CollisionState](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html) and [GetCollisionFreeLocation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_GetCollisionFreeLocation_Syncfusion_UI_Xaml_Diagram_CollisionState_) method, you can able to find a possible position without intersecting others for any given node.
Using [CollisionState](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html) and [GetCollisionFreeLocation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_GetCollisionFreeLocation_Syncfusion_UI_Xaml_Diagram_CollisionState_) method, you can find a possible position without intersecting others for any given node.


{% tabs %}
{% highlight C# %}
Comment thread
ArunKumarSF4054 marked this conversation as resolved.
Resolved

SfDiagram diagram = new SfDiagram();

// Invoking SelectorChanged Event
(this.diagram.Info as IGraphInfo).SelectorChangedEvent += OnSelectorChangedEvent;

// SelectorChanged event - custom code
private void OnSelectorChangedEvent(object sender, SelectorChangedEventArgs args)
{
// Need to adjust selected node's position, if it in contact with any other elements on drag complete
// Need to adjust selected node's position, “if it is in contact with any other elements on drag complete
if (args.Item is SelectorViewModel && args.NewValue.InteractionState == NodeChangedInteractionState.Dragged)
{
var selectorViewModel = (SelectorViewModel)args.Item;
Expand Down Expand Up @@ -66,7 +68,7 @@ private void OnSelectorChangedEvent(object sender, SelectorChangedEventArgs args
var selectedNode = (NodeViewModel)selectedNodes[0];
var collisionState = new CollisionState() { Item = selectedNode };

// Finding overlapping nodes & connectors for the selected node.
// Finding overlapping nodes and connectors for the selected node.
var intercepts = ((IGraphInfo)this.diagram.Info).GetOverlappingObjects(collisionState);

foreach (var intercept in intercepts)
Expand Down Expand Up @@ -94,7 +96,7 @@ private void OnSelectorChangedEvent(object sender, SelectorChangedEventArgs args

## Spacing

The [`Space`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_Space) property of [CollisionState](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html) allows you to change the spacing distance.
The [`Space`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_Space) property of [CollisionState](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html) allows you to specify the spacing distance.

{% tabs %}
{% highlight C# %}
Expand All @@ -108,7 +110,7 @@ var collisionState = new CollisionState() { Item = selectedNode, Space = 5 };

## Ignore objects as an overlap

By default, annotation's of other elements were also considered as an intercepts for any given node. This can be disabled with the help of [IncludeSubElements](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_IncludeSubElements) property of CollisionState.
By default, annotations of other elements are also considered intersections for any given node. This can be disabled using [IncludeSubElements](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_IncludeSubElements) property of CollisionState.

{% tabs %}
{% highlight C# %}
Expand All @@ -120,7 +122,7 @@ var collisionState = new CollisionState() { Item = selectedNode, IncludeSubEleme
{% endhighlight %}
{% endtabs %}

In addition to this,[`IgnoreList`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_IgnoreList) property of CollisionState allows you to restrict specific elements as not an intercepts. For example, you can ignore aligning nodes if same shaped node were collided.
In addition to this,[`IgnoreList`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.CollisionState.html#Syncfusion_UI_Xaml_Diagram_CollisionState_IgnoreList) property of CollisionState allows you to exclude specific elements from collision detection. For example, you can ignore aligning nodes if same-shaped nodes collide.

![list to ignore detect overlapping](Drag_images/AutomaticAlignment_img3.gif)

Expand Down
45 changes: 40 additions & 5 deletions wpf/Diagram/Interaction/Dragging/Drag.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ documentation: ug

# Dragging in WPF SfDiagram

[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provides support to drag the elements within the given limitations using [EditableArea](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ScrollSettings.html#Syncfusion_UI_Xaml_Diagram_ScrollSettings_EditableArea), [ScrollLimit.Limited](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ScrollLimit.html#Syncfusion_UI_Xaml_Diagram_ScrollLimit_Limited) property and based on [SelectorChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html) enabling/disabling of dragging within the limits occur.
[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provides support to drag the elements within the given limitations using [EditableArea](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ScrollSettings.html#Syncfusion_UI_Xaml_Diagram_ScrollSettings_EditableArea), [ScrollLimit.Limited](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ScrollLimit.html#Syncfusion_UI_Xaml_Diagram_ScrollLimit_Limited) property and based on [SelectorChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html) enabling or disabling of dragging within the limits occur.

In `SelectorChangedEvent` based on the arguments the process occurs,
* [Block](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SelectorChangedEventArgs_Block): If this boolean expression is set to 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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SelectorChangedEventArgs_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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SelectorChangedEventArgs_BlockPosition): It is an enum that encapsulates two properties:

Expand All @@ -23,6 +23,41 @@ In `SelectorChangedEvent` based on the arguments the process occurs,
* [Abort](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SelectorChangedEventArgs_Abort): If this boolean is set to true, dragging is restricted within the defined limits.
* [Cancel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SelectorChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SelectorChangedEventArgs_Cancel): If this boolean is set to true, dragging of the element does not occur at all.

{% tabs %}

{% highlight C# %}
Comment thread
ArunKumarSF4054 marked this conversation as resolved.
Resolved

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;
}

{% endhighlight %}
{% endtabs %}

[Refer](https://help.syncfusion.com/wpf/diagram/scroll-settings/scrolllimit) for Scroll-Limit.

## Dragging Diagram elements in vertical and horizontal axis
Expand All @@ -33,7 +68,7 @@ Diagram provides support to drag its elements in either vertical or horizontal d

## Drag and Drop Nodes over other elements

Diagram provides support to drop a [node](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) over another node or [connector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ConnectorViewModel.html). 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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeConstraints.html) constraints property for both node and connector.
Diagram provides support to drop a [node](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) over another node or [connector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ConnectorViewModel.html). 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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeConstraints.html) constraints property for both nodes and connectors.

{% tabs %}
{% highlight Xaml %}
Expand Down Expand Up @@ -62,7 +97,7 @@ Similarly, you can enable [AllowDrop](https://help.syncfusion.com/cr/wpf/Syncfus

## 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.
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 |
| --|--|
Expand Down Expand Up @@ -105,7 +140,7 @@ Diagram.ConnectorDropIndicatorStyle = this.Resources["connectordropindicator"] a

## Events

* [ItemDropEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDropEvent), [DragEnter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_DragEnter), [DragOver](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_DragOver) and [DragLeave](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDropEventArgs.html).
* [ItemDropEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDropEvent), [DragEnter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_DragEnter), [DragOver](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_DragOver) and [DragLeave](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDropEventArgs.html).

## See Also

Expand Down
43 changes: 41 additions & 2 deletions wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,50 @@ documentation: ug
---
# Duplicate Nodes and Connectors in WPF SfDiagram

The [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) simplifies the process of duplicating nodes and connectors. You can easily drag to create duplicates of selected nodes or connectors by simply holding down the Ctrl key, providing an improved experience for editing your diagrams.
The [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) simplifies the process of duplicating nodes and connectors. You can create duplicates by dragging. of selected nodes or connectors by simply holding down the Ctrl key, providing an improved experience for editing your diagrams.

![DuplicateNodesandConnectors](Drag_images/DuplicateNodeandConnectors.gif)

N> To enable dragging of connectors in your diagrams, use `ConnectorConstraints.Draggable`.
N> To duplicate connectors using Ctrl + Drag, the connector must first be enabled for dragging by setting the [`ConnectorConstraints.Draggable`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ConnectorConstraints.html#Syncfusion_UI_Xaml_Diagram_ConnectorConstraints_Draggable) constraint.

{% tabs %}
{% highlight Xaml %}
Comment thread
ArunKumarSF4054 marked this conversation as resolved.
Resolved

<!--Initialize the Sfdiagram-->
<syncfusion:SfDiagram x:Name="diagram" >
<!--Initialize the connectors-->
<syncfusion:SfDiagram.Connectors>
<!--Initialize the Connector Collection-->
<syncfusion:ConnectorCollection>
<!--create the simple connector with Draggable constraints-->
<syncfusion:ConnectorViewModel x:Name="simpleConnector" Constraints="Default,Draggable"
SourcePoint="100,100" TargetPoint="200,200" />
</syncfusion:ConnectorCollection>
</syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>

{% endhighlight %}

Comment thread
ArunKumarSF4054 marked this conversation as resolved.
Resolved
{% highlight C# %}


SfDiagram diagram = new SfDiagram();

diagram.Connectors = new ConnectorCollection();

ConnectorViewModel simpleConnector = new ConnectorViewModel()
{
SourcePoint = new Point(100, 100),
TargetPoint = new Point(200, 200),
};

simpleConnector.Constraints |= ConnectorConstraints.Draggable;

//Adding the connector into Collection
(diagram.Connectors as ConnectorCollection).Add(simpleConnector);

{% endhighlight %}
{% endtabs %}

## See Also

Expand Down
2 changes: 1 addition & 1 deletion wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Connector Splitting in WPF SfDiagram

The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. You can split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting `EnableConnectorSplitting` as `true`. The default value of `EnableConnectorSplitting` is `false`.
The Connectors are used to create links between two points, ports, or nodes to represent the relationship between them. You can split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting `EnableConnectorSplitting` as `true`. The default value of `EnableConnectorSplitting` is `false`.

{% tabs %}
{% highlight Xaml %}
Expand Down
Loading