From 643a21d7c72382dc6e16201851ec5458afd8dcef Mon Sep 17 00:00:00 2001 From: "124353880+ArunKumarSF4054@users.noreply.github.com" <124353880+ArunKumarSF4054@users.noreply.github.com> Date: Fri, 7 Aug 2026 10:03:16 +0530 Subject: [PATCH] WPF-1038171_Files_updated --- wpf/Diagram/Interaction/Deletion.md | 16 ++++-- .../Interaction/Dragging/CollisionState.md | 16 +++--- wpf/Diagram/Interaction/Dragging/Drag.md | 50 +++++++++++++++---- .../Dragging/DuplicateNodesandConnectors.md | 43 +++++++++++++++- .../Dragging/EnableConnectorSplitting.md | 2 +- .../PreviewSettings/Preview-Settings.md | 44 ++++++++++++++-- .../RestrictDraggingAtNegativeAxis.md | 17 +++++-- wpf/Diagram/Swimlane/Swimlane-Palette.md | 18 +++---- 8 files changed, 163 insertions(+), 43 deletions(-) diff --git a/wpf/Diagram/Interaction/Deletion.md b/wpf/Diagram/Interaction/Deletion.md index b0f1f8a420..5e6ba3ff54 100644 --- a/wpf/Diagram/Interaction/Deletion.md +++ b/wpf/Diagram/Interaction/Deletion.md @@ -9,15 +9,17 @@ documentation: ug # Deletion in WPF Diagram (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# %} +SfDiagram diagram = new SfDiagram(); + (diagram.Info as IGraphInfo).ItemDeletingEvent += MainWindow_ItemDeletingEvent; /// @@ -28,9 +30,15 @@ Selected objects can be deleted by using the Delete key or In-built Delete comma /// 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 %} diff --git a/wpf/Diagram/Interaction/Dragging/CollisionState.md b/wpf/Diagram/Interaction/Dragging/CollisionState.md index 5cbfcd7e60..19aa64ce4a 100644 --- a/wpf/Diagram/Interaction/Dragging/CollisionState.md +++ b/wpf/Diagram/Interaction/Dragging/CollisionState.md @@ -8,21 +8,23 @@ documentation: ug --- # Collision State in WPF Diagram (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# %} +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; @@ -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) @@ -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# %} @@ -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# %} @@ -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) diff --git a/wpf/Diagram/Interaction/Dragging/Drag.md b/wpf/Diagram/Interaction/Dragging/Drag.md index e9cfd36021..a69088d298 100644 --- a/wpf/Diagram/Interaction/Dragging/Drag.md +++ b/wpf/Diagram/Interaction/Dragging/Drag.md @@ -9,10 +9,10 @@ documentation: ug # Dragging based on DragLimit in WPF Diagram (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: @@ -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# %} + +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; + +/// +/// Occurs when the selector state changes during an interaction such as +/// dragging, resizing, rotating, or moving diagram elements. +/// +/// The source of the event. +/// +/// Contains information about the selector change and allows customization +/// of the interaction behavior. +/// +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 @@ -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 %} @@ -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 | | --|--| @@ -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 @@ -127,15 +162,10 @@ Diagram.ConnectorDropIndicatorStyle = this.Resources["connectordropindicator"] a [How to create filled PolyLine Node?](https://support.syncfusion.com/kb/article/10255/how-to-create-filled-polyline-node-in-wpf-diagram-sfdiagram) -[How to restrict diagram objects dragging in the positive side?](https://support.syncfusion.com/kb/article/9917/how-to-restrict-diagram-objects-dragging-in-the-positive-side-in-wpf-diagram) - -[How to enable the behaviour of drag the node from one diagram to another diagram?](https://support.syncfusion.com/kb/article/6270/how-to-enable-drag-the-node-from-one-diagram-to-another-wpf-diagram-sfdiagram) - [How to Restrict Node is being removed from its Parent Container when Dragging in WPF Diagram (SfDiagram)](https://support.syncfusion.com/kb/article/15644/how-to-restrict-node-is-being-removed-from-its-parent-container-when-dragging-in-wpf-diagram-sfdiagram) [How to prevent the connector segment from collapsing while dragging a node in WPF Diagram (SfDiagram) ?](https://support.syncfusion.com/kb/article/17746/how-to-prevent-the-connector-segment-from-collapsing-while-dragging-a-node-in-wpf-diagram-sfdiagram-) -[How to update the Zindex of the dragged node in WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/10388/how-to-update-the-zindex-of-the-dragged-node-in-wpf-diagram-sfdiagram) [How to identify the dragging state of connectors in the WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/18846/how-to-identify-the-dragging-state-of-connectors-in-the-wpf-diagram-sfdiagram) diff --git a/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md b/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md index af8faedcef..91c5f35459 100644 --- a/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md +++ b/wpf/Diagram/Interaction/Dragging/DuplicateNodesandConnectors.md @@ -8,11 +8,50 @@ documentation: ug --- # Duplicate the Nodes and Connectors in WPF Diagram (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 %} + + + + + + + + + + + + + +{% endhighlight %} + +{% 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 diff --git a/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md b/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md index 327d54bc19..3fadea23f3 100644 --- a/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md +++ b/wpf/Diagram/Interaction/Dragging/EnableConnectorSplitting.md @@ -9,7 +9,7 @@ documentation: ug # Enable connector splitting in WPF Diagram (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 %} diff --git a/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md b/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md index 4967c4dc7b..38a77a779a 100644 --- a/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md +++ b/wpf/Diagram/Interaction/Dragging/PreviewSettings/Preview-Settings.md @@ -8,31 +8,67 @@ documentation: ug --- # Preview Settings in WPF Diagram (SfDiagram) -[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provides support to drag objects as an outline without affecting original object. When multiple elements are selected, outline of every selected element will be moved. +[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) provides support to drag objects as an outline without affecting the original object. When multiple elements are selected, the outline of every selected element is moved. Preview Dragging can be enabled by assigning values other than [PreviewMode.Preview](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewMode.html) to [SfDiagram.PreviewSettings.PreviewMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewSettings.html#Syncfusion_UI_Xaml_Diagram_PreviewSettings_PreviewMode). ![Drag the preview of the node instead of original object](PreviewSettings_Images/PreviewDragging_img1.gif) -By default, Outline of the connectors connected to the dragging objects will be in disabled state. But, you can able to view the outline of the connectors, by holding dragging objects for certain time span. [`ConnectorRefreshingSpan`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewSettings.html#Syncfusion_UI_Xaml_Diagram_PreviewSettings_ConnectorRefreshingSpan) property of [PreviewSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewSettings.html) allows you to specify the time span and the value should be greater than 300ms. +By default, Outline of the connectors connected to the dragging objects will be disabled state. But, you can view the outline of the connectors, by holding dragged objects for certain time span. [`ConnectorRefreshingSpan`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewSettings.html#Syncfusion_UI_Xaml_Diagram_PreviewSettings_ConnectorRefreshingSpan) property of [PreviewSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewSettings.html) allows you to specify the time span and the value should be greater than 300ms. {% tabs %} + +{% highlight Xaml %} + + + + + + + + +{% endhighlight %} {% highlight C# %} +SfDiagram diagram = new SfDiagram(); + this.diagram.PreviewSettings = new PreviewSettings() { PreviewMode = PreviewMode.Preview, ConnectorRefreshingSpan = 300 }; {% endhighlight %} {% endtabs %} -![Refresh the orginal object with specific time](PreviewSettings_Images/PreviewDragging_img2.gif) +![Refresh the original object with specific time](PreviewSettings_Images/PreviewDragging_img2.gif) ## Appearance -Appearance of the preview can be modified using [`PreviewStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewSettings.html#Syncfusion_UI_Xaml_Diagram_PreviewSettings_PreviewStyle) property of `PreviewSettings`. +Appearance of the preview can be customized using [`PreviewStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PreviewSettings.html#Syncfusion_UI_Xaml_Diagram_PreviewSettings_PreviewStyle) property of `PreviewSettings`. {% tabs %} + +{% highlight Xaml %} + + + + + + + + + + + +{% endhighlight %} {% highlight C# %} +SfDiagram diagram = new SfDiagram(); + var previewStyle = new Style(); previewStyle.TargetType = typeof(Shape); previewStyle.Setters.Add(new Setter() { Property = Shape.StrokeProperty, Value = new SolidColorBrush(Colors.CornflowerBlue) }); diff --git a/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md b/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md index 1761b40f0e..66570f20f9 100644 --- a/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md +++ b/wpf/Diagram/Interaction/Dragging/RestrictDraggingAtNegativeAxis.md @@ -8,15 +8,17 @@ documentation: ug --- # Restrict objects dragging at negative axis in WPF Diagram (SfDiagram) -[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) allows you to restrict diagram elements from dragging behind the negative axis. When `RestrictNegativeAxisDragDrop` is enabled, diagram elements such as Node, Connector, Connector end thumbs, Groups, Swim lane objects, and stencil symbols can be restricted from dragging when drag enters into negative zone. +[WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) allows you to restrict diagram elements from being dragged into the negative axis region. When `RestrictNegativeAxisDragDrop` is enabled, diagram elements such as Node, Connector, Connector end thumbs, Groups, Swim lane objects, and stencil symbols can be restricted from dragging when the drag operation enters the negative region. + +N> The negative region refers to any location whose coordinate value is less than zero on either axis. When `RestrictNegativeAxisDragDrop` is enabled, diagram elements cannot be dragged to positions where the X-coordinate is less than 0 or the Y-coordinate is less than 0. ![Find and position the node without overlapping](Drag_images/RestrictDragObjects.gif) -N> While dragging diagram elements and auto-scrolling is running, auto-scrolling will be stopped automatically when the element drag enters into negative region. If an object is placed in negative region and `RestrictNegativeAxisDragDrop` option is enabled, then element can be dragged from the negative to the positive region. Once, an object is dragged into positive region, then element cannot be dragged into negative region. +N> While dragging diagram elements and auto-scrolling is running, auto-scrolling will be stopped automatically when the element drag enters into negative region. If an object is placed in negative region and `RestrictNegativeAxisDragDrop` option is enabled, the element can be dragged from the negative to the positive region. Once an object is dragged into positive region, then element cannot be dragged into negative region. ![Find and position the node without overlapping](Drag_images/RestrictDragToPositive.gif) -While symbol is dragging from the stencil control, it will be added into diagram page once entire symbol is placed in the positive region. +While a symbol is being dragged from the stencil control, it will be added into diagram page once entire symbol is placed in the positive region. {% tabs %} {% highlight xaml %} @@ -28,6 +30,7 @@ While symbol is dragging from the stencil control, it will be added into diagram //Initialize SfDiagram SfDiagram diagram = new SfDiagram(); + //Enables the SnapToObject value as All diagram.Constraints = GraphConstraints.Default | GraphConstraints.RestrictNegativeAxisDragDrop; {% endhighlight %} @@ -37,6 +40,14 @@ diagram.Constraints = GraphConstraints.Default | GraphConstraints.RestrictNegati Restrict diagram elements dragging at negative region behavior can be defined using both the specific object (Node/Connector) and the diagram. When the behaviors are contradictorily defined by both, the actual behavior is set by inherit options. +### Inheritance Behavior + +By default, nodes and connectors inherit the value of `RestrictNegativeAxisDragDrop` from the parent diagram through the `InheritRestrictNegativeAxisDragDrop` constraint. + +When `InheritRestrictNegativeAxisDragDrop` is enabled, the diagram-level setting determines whether the object can be dragged into the negative region. + +To define a different behavior for a specific node or connector, remove the `InheritRestrictNegativeAxisDragDrop` constraint and explicitly enable or disable `RestrictNegativeAxisDragDrop` on that object. In such cases, the object-level setting takes precedence over the diagram-level setting. + The following code example illustrates how to enable restrict object dragging at negative region behavior for a particular Node or specific connector. {% tabs %} diff --git a/wpf/Diagram/Swimlane/Swimlane-Palette.md b/wpf/Diagram/Swimlane/Swimlane-Palette.md index f47d6e5fb4..4372b1ebda 100644 --- a/wpf/Diagram/Swimlane/Swimlane-Palette.md +++ b/wpf/Diagram/Swimlane/Swimlane-Palette.md @@ -8,15 +8,11 @@ documentation: ug --- # Swimlane-Stencil in WPF Diagram (SfDiagram) - -Diagram provides support to add lanes and phases to Stencil. - +The Diagram control provides support for adding lanes and phases to the stencil. ## Add lanes and phases into stencil [WPF Diagram](https://www.syncfusion.com/diagram-sdk/wpf-diagram) elements such as [Lane](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.LaneViewModel.html), and [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseViewModel.html) can be used to visualize the Symbol. - - The following code sample shows how to add the lanes and phases to palette. - + The following code sample shows how to add the lanes and phases to the palette. {% tabs %} {% highlight xaml %} @@ -52,10 +48,8 @@ Diagram provides support to add lanes and phases to Stencil. You can add the swimlane shapes using the category. For more information, refer to the [Symbol categories](https://help.syncfusion.com/wpf/diagram/stencil/symbolgroup#symbol-categories). ## Interactions - -* The drag and drop support for swimlane shapes have been provided. -* When you drag and drop the lane shape, if the diagram already contains swimlane with the same orientation, the lane will be added and stacked inside a swimlane based on the order. Otherwise, it will be added a new swimlane. -* The phase will only drop on the swimlane shape with the same orientation. -The following image shows how to drag symbol from palette. - +* Drag-and-drop support for swimlane shapes is provided. +* When you drag and drop the lane shape, if the diagram already contains a swimlane with the same orientation, the lane will be added and stacked inside a swimlane based on the order. Otherwise, it will be added as a new swimlane. +* A phase will only drop on the swimlane shape with the same orientation. +The following image shows how to drag a symbol from the palette. ![Drag Symbol from Palette](Swimlane-images/Symbol_palette.gif)