From 444be0a86734fdc52afb7911c592655d7a8651b5 Mon Sep 17 00:00:00 2001 From: "124353880+ArunKumarSF4054@users.noreply.github.com" <124353880+ArunKumarSF4054@users.noreply.github.com> Date: Wed, 8 Jul 2026 14:01:19 +0530 Subject: [PATCH 1/2] WPF-1038171-Constraints_file_updated --- wpf/Diagram/Constraints.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/wpf/Diagram/Constraints.md b/wpf/Diagram/Constraints.md index 3dd5564a72..e060397be8 100644 --- a/wpf/Diagram/Constraints.md +++ b/wpf/Diagram/Constraints.md @@ -14,7 +14,7 @@ To know more about bitwise operators, refer to [Bitwise Operations](#bitwise-ope ## Graph Constraints -[GraphConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.GraphConstraints.html) allows to enable or disable the following behaviors.By default , `Zoomable` , `Pannable` , `PanRails` , `Relationship` , `Events` , `AutoScroll` , `PageEditing` constraints are enabled for diagram. +[GraphConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.GraphConstraints.html) allows to enable or disable the following behaviors. By default `Zoomable` , `Pannable` , `PanRails` , `Relationship` , `Events` , `AutoScroll` , `PageEditing` constraints are enabled for diagram. |Constraints|Description| |--|--| @@ -39,7 +39,7 @@ To know more about bitwise operators, refer to [Bitwise Operations](#bitwise-ope |`PannableY` |Enables or disables the panning of diagram over Y -axis.| |`PanRails` |Enables or disables the panning actions on the x-axis (horizontal panning) and y-axis (vertical panning) in SfDiagram.| |`PanRailsX` |Enables or disables the pan rails of diagram in X-axis| -|`PanRailsY `|Enables or disables the pan rails of diagram in Y -axis| +|`PanRailsY`|Enables or disables the pan rails of diagram in Y -axis| |`Relationship` |Enables or disables the properties based on Node and Connector relationships on dragging at run time.| |`Resizable` |Enables or disables the resize action on diagram or node.| |`Rotatable` |Enables or disables the rotation action on diagram or node.| @@ -61,7 +61,7 @@ diagram.Constraints = GraphConstraints.Default & ~GraphConstraints.PageEditing; ## Node Constraints -[NodeConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeConstraints.html) allows to enable or disable the following behaviors of Node.By default `Selectable`, `Connectable`, `Inherit`, `RoutingObstacle`, `PivotDraggable`, `Delete` and `ThemeStyle` constraints are enabled for Node. +[NodeConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeConstraints.html) allows to enable or disable the following behaviors of Node. By default `Selectable`, `Connectable`, `Inherit`, `RoutingObstacle`, `PivotDraggable`, `Delete` and `ThemeStyle` constraints are enabled for Node. |Constraints |Description| |--|--| @@ -116,7 +116,7 @@ The following code example illustrates how to disable rotation. {% highlight C# %} //Create NodeViewModel collection -diagram.nodes = new ObservableCollection(); +diagram.Nodes = new ObservableCollection(); //Create NodeViewModel NodeViewModel node = new NodeViewModel() @@ -201,12 +201,12 @@ ConnectorViewModel connector1 = new ConnectorViewModel() ## Port Constraints -[PortConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PortConstraints.html) allows to enable or disable the following behaviors of port.By default Inherit constraints are enabled for port. +[PortConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PortConstraints.html) allows to enable or disable the following behaviors of port. By default Inherit constraints are enabled for port. |Constraints |Description| |--|--| |`Connectable` |Enables or disables the connector creation from port.| -|`ConnectionDirection` |Decides the connection direction of port based on PortBase.ConnectionDirection| +|`ConnectionDirection` |Decides the connection direction of port based on PortBase.[ConnectionDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PortBase.html#Syncfusion_UI_Xaml_Diagram_PortBase_ConnectionDirection)| |`Default` |Enables or disables the Inheritable constraints.| |`Draggable` |Enables or disables whether port to be dragged at boundaries of node| |`Dynamic` |Defines whether port to be connected at boundaries of node and pointed to the port.| @@ -242,7 +242,7 @@ NodePortViewModel port= new NodePortViewModel() ## Annotation Constraints -[AnnotationConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationConstraints.html) allows to enable or disable the following behaviors of Annotation.By default Inherit and Editable constraints are enabled for annotation. +[AnnotationConstraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationConstraints.html) allows to enable or disable the following behaviors of Annotation. By default Inherit and Editable constraints are enabled for annotation. |Constraints |Description| |--|--| @@ -278,7 +278,7 @@ AnnotationEditorViewModel anno = new AnnotationEditorViewModel() { Content="Annotation", //Assign Constraint to Drag - Constraints=AnnotationConstraints.Draggable, + Constraints=AnnotationConstraints.Selectable | AnnotationConstraints.Draggable, }; {% endhighlight %} @@ -432,11 +432,11 @@ In the above example, you can check whether the rotate constraints are enabled i [How to do Panning the diagram in all the directions at a time?](https://support.syncfusion.com/kb/article/5874/how-to-do-panning-in-all-the-directions-at-a-time-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 enable the behavior 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 enable the virtualization?](https://support.syncfusion.com/kb/article/6081/how-to-enable-the-virtualization-in-wpf-diagram-sfdiagram) -[How to disable the page editing behaviour?](https://support.syncfusion.com/kb/article/5860/how-to-disable-page-editing-in-wpf-diagram-sfdiagram) +[How to disable the page editing behavior?](https://support.syncfusion.com/kb/article/5860/how-to-disable-page-editing-in-wpf-diagram-sfdiagram) [How to remove the rotator thumb of the node?](https://support.syncfusion.com/kb/article/5943/how-to-remove-rotator-of-the-node-in-wpf-diagram-sfdiagram) From cb068be2dee6a18dc35b290e109308076fc28cfd Mon Sep 17 00:00:00 2001 From: "124353880+ArunKumarSF4054@users.noreply.github.com" <124353880+ArunKumarSF4054@users.noreply.github.com> Date: Thu, 16 Jul 2026 15:58:21 +0530 Subject: [PATCH 2/2] AdditionalChanges --- wpf/Diagram/Annotation/DefineAnnotation.md | 10 +++- .../Annotation/Interaction/Dragging.md | 6 +-- .../Annotation/Interaction/Rotating.md | 8 +-- .../Interaction/SelectionAndResizing.md | 6 +-- .../Annotation/PositioningAndAppearance.md | 39 ++++++++------- wpf/Diagram/Container.md | 30 +++++++----- wpf/Diagram/Group.md | 9 ++-- wpf/Diagram/Port/AutomaticPortCreation.md | 6 +-- wpf/Diagram/Port/Port-to-port-creation.md | 6 +-- wpf/Diagram/Swimlane/Lane/Interaction.md | 6 +-- wpf/Diagram/Swimlane/Lane/Lane.md | 16 +++--- wpf/Diagram/Swimlane/Phase.md | 49 ++++++++++--------- wpf/Diagram/Swimlane/Swimlane.md | 16 +++--- 13 files changed, 112 insertions(+), 95 deletions(-) diff --git a/wpf/Diagram/Annotation/DefineAnnotation.md b/wpf/Diagram/Annotation/DefineAnnotation.md index 06452b4e7c..5ef29a0fcd 100644 --- a/wpf/Diagram/Annotation/DefineAnnotation.md +++ b/wpf/Diagram/Annotation/DefineAnnotation.md @@ -62,6 +62,12 @@ An annotation can be added to a node or connector by defining the annotation obj //Initialize the diagram SfDiagram diagram = new SfDiagram(); +//Initialize NodeCollection to SfDiagram +diagram.Nodes = new NodeCollection(); + +//Initialize ConnectorCollection to SfDiagram +diagram.Connectors = new ConnectorCollection(); + //Initialize the Node View Model NodeViewModel node = new NodeViewModel() { @@ -128,7 +134,7 @@ You can add any number of annotations to a node or connector. //Initialize the Annotation Collection Annotations = new ObservableCollection() { - //Initialize the multiple annotation + //Initialize multiple annotation new AnnotationEditorViewModel() { Content = "Annotation", @@ -152,7 +158,7 @@ Annotations = new ObservableCollection() ## See Also -[How to add annotations to nodes/connectors and its customization?](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Annotations) +[How to add annotations to nodes/connectors and their customization?](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Annotations) [How to add image annotations to a Node?](https://support.syncfusion.com/kb/article/6078/how-to-add-image-annotations-to-a-node-in-wpf-diagram-sfdiagram-control) diff --git a/wpf/Diagram/Annotation/Interaction/Dragging.md b/wpf/Diagram/Annotation/Interaction/Dragging.md index 512a7ae1b2..33a5e69136 100644 --- a/wpf/Diagram/Annotation/Interaction/Dragging.md +++ b/wpf/Diagram/Annotation/Interaction/Dragging.md @@ -14,7 +14,7 @@ To learn about annotation constraints, refer to the [Annotation Constraints](htt ## Dragging the annotation -Dragging of annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Draggable`. +Dragging an annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Draggable`. {% tabs %} @@ -47,7 +47,7 @@ Annotations = new ObservableCollection() ## Nudging an annotation -Diagram allows users to nudge annotations by one pixel in a specific direction using the arrow keys. By enabling the `AnnotationConstraints.Selectable` and `AnnotationConstraints.Draggable` through the `Constraints` property in the `AnnotationEditorViewModel` class, users can interact with annotations and adjust their positions incrementally. Additionally, holding down the shift key while pressing the arrow key will move the annotation ten pixels instead of one. +Diagram allows users to nudge annotations by one pixel in a specific direction using the arrow keys. By enabling the `AnnotationConstraints.Selectable` and `AnnotationConstraints.Draggable` through the `Constraints` property in the `AnnotationEditorViewModel` class, users can interact with annotations and adjust their positions incrementally. Additionally, holding down the Shift key while pressing the arrow key will move the annotation ten pixels instead of one. ![WPF Diagram Annotation Nudging](Annotation_images/wpf-diagram-annotation-nudging.gif) @@ -86,7 +86,7 @@ Annotations = new ObservableCollection() {% endtabs %} | Property | Value | Output | Keyboard Output | -|---|---|---|---| --- | +|---|---|---|---| | DragLimit | (10,10,10,10) | ![WPF Diagram Annotation NoWrap](Annotation_images/wpf-diagram-annotation-drag-limit-default.gif) | ![WPF Diagram Annotation Nudging](Annotation_images/wpf-diagram-annotation-nudging-draglimit-default.gif) | | |(40,80,40,40) | ![WPF Diagram Annotation Wrap](Annotation_images/wpf-diagram-annotation-custom-drag-limit.gif) | ![WPF Diagram Annotation Nudging Custom](Annotation_images/wpf-diagram-annotation-nudging-draglimit-custom.gif) | diff --git a/wpf/Diagram/Annotation/Interaction/Rotating.md b/wpf/Diagram/Annotation/Interaction/Rotating.md index 2951482c40..5946acfd49 100644 --- a/wpf/Diagram/Annotation/Interaction/Rotating.md +++ b/wpf/Diagram/Annotation/Interaction/Rotating.md @@ -15,7 +15,7 @@ To learn about annotation constraints, refer to the [Annotation Constraints](htt ## Rotating the annotation -Rotation of annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Rotatable`. +Rotation an annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Rotatable`. {% tabs %} {% highlight xaml %} @@ -47,7 +47,7 @@ Annotations = new ObservableCollection() ## How to customize the annotation rotation - The [`RotationReference`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_RotationReference) property of the annotation is to define the rotation based on Page or its host node or connector.To learn about the Rotate Reference property, refer to the [RotationReference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.RotationReference.html) . + The [`RotationReference`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_RotationReference) property of the annotation is to define the rotation based on Page or its host node or connector. To learn about the Rotate Reference property, refer to the [RotationReference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.RotationReference.html) . {% tabs %} {% highlight xaml %} @@ -76,6 +76,6 @@ Annotations = new ObservableCollection() {% endtabs %} | Values | Description | Node | -|---|---|---|---| +|---|---|---| | Page | While rotating the node, annotation will not be rotated. | ![WPF Diagram Annotation Rotation Page](Annotation_images/wpf-diagram-annotation-rotation-page.gif) | -| Wrap | While rotating the node, annotation will also be rotated with node. | ![WPF Diagram Annotation Rotation Parent](Annotation_images/wpf-diagram-annotation-rotation-parent.gif) | \ No newline at end of file +| Wrap | While rotating the node, annotation will also be rotated with the node. | ![WPF Diagram Annotation Rotation Parent](Annotation_images/wpf-diagram-annotation-rotation-parent.gif) | \ No newline at end of file diff --git a/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md b/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md index efe8ca767c..8d35b17a49 100644 --- a/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md +++ b/wpf/Diagram/Annotation/Interaction/SelectionAndResizing.md @@ -9,13 +9,13 @@ documentation: ug # How to Select and Resize the Annotation -Basic intersections of selecting and resizing can be applied over annotation. These interactions can be controlled by annotation and its parent node or connector. +Basic interactions of selecting and resizing can be applied over annotation. These interactions can be controlled by annotation and its parent node or connector. To learn about annotation constraints, refer to the [Annotation Constraints](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationConstraints.html). ## Selecting the annotation -Selection of annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Selectable`. +Selection of an annotation can be enabled by using the [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Constraints) property of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class and setting its value as `AnnotationConstraints.Selectable`. {% tabs %} {% highlight xaml %} @@ -52,7 +52,7 @@ Annotations = new ObservableCollection() ## Resizing the annotation -Resizing of annotation can be enabled by using the `Constraints` property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Resizable`. +Resizing an annotation can be enabled by using the `Constraints` property of `AnnotationEditorViewModel` class and setting its value as `AnnotationConstraints.Resizable`. {% tabs %} {% highlight xaml %} diff --git a/wpf/Diagram/Annotation/PositioningAndAppearance.md b/wpf/Diagram/Annotation/PositioningAndAppearance.md index 22533d27df..4e7c482ee5 100644 --- a/wpf/Diagram/Annotation/PositioningAndAppearance.md +++ b/wpf/Diagram/Annotation/PositioningAndAppearance.md @@ -13,7 +13,7 @@ documentation: ug ## How to position node's annotation -Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignments properties of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class. +Annotation can be aligned relative to the node boundaries. It has Margin, Offset, Horizontal, and Vertical alignment settings. It is quite tricky when all four alignments are used together but gives more control over alignment properties of [`AnnotationEditorViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html) class. Annotations of a node can be positioned using the following properties of `AnnotationEditorViewModel` class. @@ -238,13 +238,13 @@ The following image shows the relationship between the annotation position and L ### Displacement -The [`Displacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in center of the connector path. When you assign value to the `Displacement` property, annotation will be displaced from its position by displacment value. Default value is 0d. +The [`Displacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel.html#Syncfusion_UI_Xaml_Diagram_AnnotationEditorViewModel_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in the center of the connector path. When you assign value to the `Displacement` property, annotation will be displaced from its position by displacement value. Default value is 0d. {% tabs %} {% highlight xaml %} - + - + {% endhighlight %} @@ -252,7 +252,7 @@ The [`Displacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagr //Initialize the Annotation Collection Annotations = new ObservableCollection() { - //Initialize the Annotation with dispalcement property + //Initialize the Annotation with displacement property new AnnotationEditorViewModel() { Content = "Annotation", @@ -303,7 +303,7 @@ Annotations = new ObservableCollection() |Pivot | (0.5,0.5) | ![Target](Annotation_images/Pivot5.PNG) | | | (0,0) | ![Source](Annotation_images/Pivot0,0.png) | | | (0,1) | ![Center](Annotation_images/Pivot0,1.PNG) | -| | 1,0) | ![Target](Annotation_images/Pivot1,0.PNG) | +| | (1,0) | ![Target](Annotation_images/Pivot1,0.PNG) | | | (1,1) | ![Target](Annotation_images/Pivot1,1.png) | ### Margin @@ -350,7 +350,7 @@ Diagram allows you to set size for annotations by using the [`UnitWidth`](https: - + @@ -408,7 +408,7 @@ Annotations = new AnnotationCollection() {% endtabs %} | Values | Description | Node | -|---|---|---|---| +|---|---|---| | NoWrap | Text will not be wrapped. | ![NoWrap](Annotation_images/Annotation_img18.png) | | Wrap | Text-wrapping occurs when the text overflows beyond the available annotation container width. | ![Wrap](Annotation_images/Annotation_img19.png) | | WrapWithOverflow | Text-wrapping occurs when the text overflows beyond the available annotation container width. However, the text may overflow beyond the annotation container width in the case of a very long word. | ![Overflow](Annotation_images/annotation_img20.png) | @@ -419,24 +419,27 @@ Default appearance of the annotations can be customized by using the [`EditTempl {% tabs %} {% highlight xaml %} + - - - + + - + - - - + + - + + + @@ -466,7 +469,7 @@ Annotations = new ObservableCollection() ![WPF Diagram Annotation Appearance](Annotation_images/wpf-diagram-annotation-appearance.PNG)       ![WPF Diagram Annotation EditTemplate](Annotation_images/wpf-diagram-annotation-edittemplate.png) -Also, diagram have `TextAnnotationViewModel` class to customize the appearance of the annotation directly instead of overriding view and edit templates of the annotation. This class customization will be applied for both view and edit mode of annotation. +Also, diagram has `TextAnnotationViewModel` class to customize the appearance of the annotation directly instead of overriding view and edit templates of the annotation. This class customization will be applied for both view and edit mode of annotation. {% tabs %} {% highlight xaml %} @@ -486,7 +489,7 @@ Also, diagram have `TextAnnotationViewModel` class to customize the appearance o //Initialize the Annotation Collection Annotations = new ObservableCollection() { - //Intialize the Text Annotation View Model class + //Initialize the Text Annotation View Model class new TextAnnotationViewModel() { Text = "Annotation", diff --git a/wpf/Diagram/Container.md b/wpf/Diagram/Container.md index ff62faa027..0702f0157a 100644 --- a/wpf/Diagram/Container.md +++ b/wpf/Diagram/Container.md @@ -49,7 +49,9 @@ The following code illustrates how to create a Container Node. {% endhighlight %} {% highlight C# %} -ObservableCollection nodes = new ObservableCollection(); +//Initialize the diagram +SfDiagram diagram = new SfDiagram(); + NodeViewModel node = new NodeViewModel() { UnitWidth = 100, @@ -148,7 +150,9 @@ The following code example explains how to define a container header and its cus {% endhighlight %} {% highlight C# %} -ObservableCollection nodes = new ObservableCollection(); +//Initialize the diagram +SfDiagram diagram = new SfDiagram(); + NodeViewModel node = new NodeViewModel() { UnitWidth = 100, @@ -202,13 +206,13 @@ N> You can edit the header by double-clicking the region of the container's head ### Container from Stencil -Container Nodes can be predefined and added to the stencil. You can drop those Containers into Diagram when required. +Container Nodes can be predefined and added to the stencil. You can drop those Containers into the Diagram when required. To explore how to add Containers from stencil, refer to [Stencil](https://help.syncfusion.com/wpf/diagram/stencil/stencil). ## Interactively add or remove diagram elements into Container -You can interactively add or remove diagram elements from the Container in the runtime. Container will adjust its size when you drop diagram element into its edges. +You can interactively add or remove diagram elements from the Container at runtime. Container will adjust its size when you drop diagram element into its edges. ![WPF Diagram Container Interaction](Container_images/Container.gif) @@ -220,11 +224,11 @@ Diagram provides support to drag or resize the container interactively. Container can be selected by clicking (tap) it. -* The `IsSelected` Property is used to select or unselect the node at runtime. +* The `IsSelected` Property is used to select or deselect the node at runtime. -* `ItemSelectingEvent` and `ItemSelectedEvent` for selecting an element, will notify you the item and its original source. To explore about arguments, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [ItemSelectedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemSelectedEventArgs.html). +* `ItemSelectingEvent` and `ItemSelectedEvent` for selecting an element, will notify you the item and its original source. To learn about the arguments, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [ItemSelectedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemSelectedEventArgs.html). -* `ItemUnselectingEvent` and `ItemUnselectedEvent` for unselecting an element, will notify you the item and its original source. To explore about arguments, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [DiagramEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramEventArgs.html). +* `ItemUnselectingEvent` and `ItemUnselectedEvent` for unselecting an element, will notify you the item and its original source. To learn about the argumentss, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [DiagramEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramEventArgs.html). ![WPF Diagram Container Selection](Container_images/Container-Selection.png) @@ -238,7 +242,7 @@ To explore about selection and selection related events, refer to the [Selection * While dragging, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to the [Snapping](https://help.syncfusion.com/wpf/diagram/snapping "Snapping"). -* The `NodeChangedEvent` will notify the `OffsetX` and `OffsetY` changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html). +* The `NodeChangedEvent` will notify the `OffsetX` and `OffsetY` changes with their old and new values. Along with that, this event will give information about interaction state. To learn about the argumentss, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html). ![WPF Diagram Drag Container](Container_images/Container-Drag.gif) @@ -246,18 +250,18 @@ To explore about selection and selection related events, refer to the [Selection * The selector is surrounded by eight thumbs. By dragging these thumbs, selected items can be resized smaller or larger. * When one corner of the selector is dragged, opposite corner is in a static position. -* Enable [AspectRatio](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeConstraints.html) NodeConstraints to maintain the aspect ratio of the container when its being resized. +* Enable [AspectRatio](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeConstraints.html) NodeConstraints to maintain the aspect ratio of the container when it is being resized. * While resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to the [Snapping](https://help.syncfusion.com/wpf/diagram/snapping/definesnapping "Snapping"). -* The `NodeChangedEvent` will notify the `UnitHeight` and `UnitWidth` changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html). +* The `NodeChangedEvent` will notify the `UnitHeight` and `UnitWidth` changes with their old and new values. Along with that, this event will give information about interaction state. To learn about the arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html). ![WPF Diagram Resize Container](Container_images/Container-Resize.gif) ## Events -* The `ItemTappedEvent` is invoked on clicking the container. To explore about arguments, refer to the [ItemTappedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemTappedEventArgs.html). -* The `ItemDoubleTappedEvent` is invoked on double-clicking the container. To explore about arguments, refer to the [ItemDoubleTappedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDoubleTappedEventArgs.html). -* The `MouseDown` and `MouseUp` are invoked as similar to framework element that is raised together with either MouseLeftButtonUp or MouseRightButtonUp. To explore about arguments, refer to the [MouseDownEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.MouseDownEventArgs.html) and +* The `ItemTappedEvent` is triggered on clicking the container. To learn about the arguments, refer to the [ItemTappedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemTappedEventArgs.html). +* The `ItemDoubleTappedEvent` is triggered on double-clicking the container. To learn about the arguments, refer to the [ItemDoubleTappedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDoubleTappedEventArgs.html). +* The `MouseDown` and `MouseUp` are triggered as similar to framework element that is raised together with either MouseLeftButtonUp or MouseRightButtonUp. To learn about the arguments, refer to the [MouseDownEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.MouseDownEventArgs.html) and [MouseUpEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.MouseUpEventArgs.html). ## See Also diff --git a/wpf/Diagram/Group.md b/wpf/Diagram/Group.md index ad16b57052..a407ab7313 100644 --- a/wpf/Diagram/Group.md +++ b/wpf/Diagram/Group.md @@ -9,7 +9,7 @@ documentation: ug # Group in WPF Diagram (SfDiagram) -Group is used to cluster multiple Nodes and Connectors into a single element. It acts like a container for its children (Nodes, Groups, and Connectors). Every change made to the Group also affects the children. Child elements can be edited individually. +A Group is used to cluster multiple Nodes and Connectors into a single element. It acts like a container for its children (Nodes, Groups, and Connectors). Every change made to the Group also affects the children. Child elements can be edited individually. ## Create Group @@ -19,6 +19,9 @@ The following code illustrates how to create a Group Node. {% highlight C# %} +//Initialize the diagram +SfDiagram diagram = new SfDiagram(); + ObservableCollection nodes = new ObservableCollection(); NodeViewModel node = new NodeViewModel() { @@ -56,7 +59,7 @@ diagram.Groups = groups; ### Group from Stencil -Group Nodes can be predefined and added to stencil. You can drop those Groups into Diagram, when required. +Group Nodes can be predefined and added to a stencil. You can drop those Groups into the diagram, when required. To explore how to add Groups from stencil, refer to [Stencil](https://help.syncfusion.com/wpf/diagram/stencil/stencil). @@ -70,7 +73,7 @@ You can edit the Group and its children at runtime. For more information about h [How to Notify when diagramming object is duplicated with source?](https://support.syncfusion.com/kb/article/6268/how-to-notify-when-diagramming-object-is-duplicated-with-source-in-wpf-diagram-sfdiagram) -[How to Obtain InConnectors and OutConnectors of Node in WPF Diagram?](https://support.syncfusion.com/kb/article/18250/how-to-obtain-inconnectors-and-outconnectors-of-node-in-wpf-diagram) +[How to Obtain InConnectors and OutConnectors of a Node in WPF Diagram?](https://support.syncfusion.com/kb/article/18250/how-to-obtain-inconnectors-and-outconnectors-of-node-in-wpf-diagram) [How to prevent the node from moving outside the group in WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/18852/how-to-prevent-the-node-from-moving-outside-the-group-in-wpf-diagram-sfdiagram) diff --git a/wpf/Diagram/Port/AutomaticPortCreation.md b/wpf/Diagram/Port/AutomaticPortCreation.md index 0435b9a7cc..0f5dd5be16 100644 --- a/wpf/Diagram/Port/AutomaticPortCreation.md +++ b/wpf/Diagram/Port/AutomaticPortCreation.md @@ -9,7 +9,7 @@ documentation: ug # AutomaticPortCreation in WPF Diagram (SfDiagram) -[WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram) provides an option to create a port dynamically by clicking and dragging the mouse over any node or connector. This behavior is disabled by default and can be enabled by using `GraphConstraints.AutomaticPortCreation`. To draw connector, you need to set the `Tool` and `DrawingTool` properties of diagram. +[WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram) provides an option to create a port dynamically by clicking and dragging the mouse over any node or connector. This behavior is disabled by default and can be enabled by using `GraphConstraints.AutomaticPortCreation`. To draw a connector, you need to set the `Tool` and `DrawingTool` properties of diagram. {% tabs %} {% highlight xaml %} @@ -40,7 +40,7 @@ diagram.Constraints |= GraphConstraints.AutomaticPortCreation; Diagram provides the support to drag the port interactively within the limit. -* For [`NodePort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html) and [`DockPort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DockPort.html), port can be dragged within the node bounds. +* For [`NodePort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html) and [`DockPort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DockPort.html), port can be dragged within the node boundaries. * For [`ConnectorPort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ConnectorPort.html), port can be dragged anywhere on the connector. ![WPF Diagram Port Dragging](Port_images/wpf-port-dragging.gif) @@ -49,4 +49,4 @@ diagram.Constraints |= GraphConstraints.AutomaticPortCreation; [How to decide whether to drag or draw a port at runtime?](https://www.syncfusion.com/kb/9622/how-to-decide-whether-to-drag-or-draw-a-connection-on-port-at-runtime) -[How to create port at runtime though SetTool?](https://www.syncfusion.com/kb/11446/how-to-create-port-at-runtime-through-set-tool-in-wpf-diagram-sfdiagram) \ No newline at end of file +[How to create port at runtime through SetTool?](https://www.syncfusion.com/kb/11446/how-to-create-port-at-runtime-through-set-tool-in-wpf-diagram-sfdiagram) \ No newline at end of file diff --git a/wpf/Diagram/Port/Port-to-port-creation.md b/wpf/Diagram/Port/Port-to-port-creation.md index ed3e893b24..72dc1242fc 100644 --- a/wpf/Diagram/Port/Port-to-port-creation.md +++ b/wpf/Diagram/Port/Port-to-port-creation.md @@ -9,15 +9,15 @@ documentation: ug # Port-to-port-creation in WPF Diagram (SfDiagram) -The connector’s `SourcePort` or `SourcePortID` and `TargetPort` or `TargetPortID` properties allows you to create connections between two specific points of same or different nodes and connectors. +The connector’s `SourcePort` or `SourcePortID` and `TargetPort` or `TargetPortID` properties allow you to create connections between two specific points of same or different nodes and connectors. ### Connection between ports (NodePort, ConnectorPort) programmatically -You can create static connection between the ports by specifying the SourcePortID and TargetPortID for the connector. Refer to [connections-with-ports](https://help.syncfusion.com/wpf/diagram/connector/defineconnector#connections-with-ports) for code example. +You can create a static connection between the ports by specifying the SourcePortID and TargetPortID for the connector. Refer to [connections-with-ports](https://help.syncfusion.com/wpf/diagram/connector/defineconnector#connections-with-ports) for code example. ### Connection between ports interactively -You can create connection between the ports interactively by performing click and drag action on the port. +You can create a connection between the ports interactively by performing click and drag action on the port. {% tabs %} {% highlight xaml %} diff --git a/wpf/Diagram/Swimlane/Lane/Interaction.md b/wpf/Diagram/Swimlane/Lane/Interaction.md index 7e20edab63..07ce77bc45 100644 --- a/wpf/Diagram/Swimlane/Lane/Interaction.md +++ b/wpf/Diagram/Swimlane/Lane/Interaction.md @@ -19,10 +19,10 @@ A Lane can be selected by clicking (tap) the header of the lane. * Lane can be resized in the bottom and right direction. * Lane can be resized by using the resize selector of the lane. -* Lane can be resized by resizing the bottom and right border of the lane without make a selection. +* Lane can be resized by resizing the bottom and right border of the lane without making a selection. * Once you can resize the lane, the swimlane will be resized automatically. * The lane can be resized either resizing the selector or the tight bounds of the child object. If the child node move to edge of the lane it can be automatically resized. -* The `SwimlaneChildChangedEvent` will notify the [`UnitHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitHeight) and [`UnitWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitWidth) changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [SwimlaneChildChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) +* The `SwimlaneChildChangedEvent` will notify the [`UnitHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitHeight) and [`UnitWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitWidth) changes with their old and new values. Along with that, this event will give information about interaction state. To learn about the arguments, refer to the [SwimlaneChildChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) The following image shows how to resize the lane. @@ -31,7 +31,7 @@ The following image shows how to resize the lane. ## Lane swapping * Lanes can be swapped by dragging the lanes over another lane. -* The `SwimlaneChildChangedEvent` will notify the [`RowIndex`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildChangedEventArgs_RowIndex) and [`ColumnIndex`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildChangedEventArgs_ColumnIndex) changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [SwimlaneChildChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) +* The `SwimlaneChildChangedEvent` will notify the [`RowIndex`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildChangedEventArgs_RowIndex) and [`ColumnIndex`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildChangedEventArgs.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildChangedEventArgs_ColumnIndex) changes with their old and new values. Along with that, this event will give information about interaction state. To learn about the arguments, refer to the [SwimlaneChildChangedEvent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html) * Helper should intimate the insertion point while lane swapping. The following image shows how to swap the lane. diff --git a/wpf/Diagram/Swimlane/Lane/Lane.md b/wpf/Diagram/Swimlane/Lane/Lane.md index 91e066aa8c..c98b803e41 100644 --- a/wpf/Diagram/Swimlane/Lane/Lane.md +++ b/wpf/Diagram/Swimlane/Lane/Lane.md @@ -11,11 +11,11 @@ documentation: ug A [Lane](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.LaneViewModel.html) is a functional unit or a responsible department of a business process that helps to map a process within the functional unit or in between other functional units. -The number of lanes can be added to swimlane and rendered in the [WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram). The lanes are automatically stacked inside swimlane based on the order they are added. +Any number of lanes can be added to a swimlane and rendered in the [WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram). The lanes are automatically stacked inside swimlane based on the order they are added. ## Create an empty lane -* You can create the [Lane](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.LaneViewModel.html) and add into the [Lanes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Lanes) collection of the Swimlane. +* You can create the [Lane](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.LaneViewModel.html) and add to the [Lanes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Lanes) collection of the Swimlane. >Note: For the Horizontal Swimlane, you must set the UnitHeight of the Lane. For the Vertical Swimlane, you must set UnitWidth of the Lane. @@ -96,7 +96,7 @@ The following code example explains how to define a swimlane with lane. * The [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.LaneViewModel.html#Syncfusion_UI_Xaml_Diagram_LaneViewModel_Header) property of lane allows you to textually describe the lane and to customize the appearance of the description. * The size of lane header can be controlled by using the [`UnitWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitWidth) and [`UnitHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_UnitHeight) properties of header. -* The appearance of lane header can be set by using the [`ShapeStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_ShapeStyle) properties. +* The appearance of the lane header can be set by using the [`ShapeStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneChildViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneChildViewModel_ShapeStyle) properties. The following code example explains how to define a lane header and its customization. @@ -114,7 +114,7 @@ The following code example explains how to define a lane header and its customiz @@ -205,7 +205,7 @@ N> Default RotateAngle value of LaneHeader's Annotation is 270 degrees. If you w ## Add and Remove the lane at runtime - You can add and remove the lane at runtime by using the `Add` and `Remove` method of the [`SfDiagram.Lanes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Lanes) Collection. The following code explains how to dynamically add and remove lane to swimlane. + You can add and remove the lane at runtime by using the `Add` and `Remove` method of the [`SfDiagram.Lanes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Lanes) Collection. The following code explains how to dynamically add and remove lane from the swimlane. {% tabs %} {% highlight xaml %} @@ -438,9 +438,9 @@ NodeViewModel node = new NodeViewModel() { UnitHeight = 50, UnitWidth = 50, Lane ## Header Selection and Resize - * You can select the individual lane header by clicking on the header twice. For first click, the respective lane can select. + * You can select the individual lane header by clicking on the header twice. For first click, the respective lane is selected. - * You can support to resize the individual lane header. While resizing lane, it has maintain 20px distances from the Lane children. + * You can support to resize the individual lane header. While resizing lane, it has maintain 20px distance from the Lane children. * The `NodeChangedEvent` will notify the `UnitHeight` and `UnitWidth` changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html) The following image shows how to select and resize the lane header. @@ -449,7 +449,7 @@ NodeViewModel node = new NodeViewModel() { UnitHeight = 50, UnitWidth = 50, Lane ## Lane header editing -Diagram provides the support to edit Lane headers at runtime. You can achieve the header editing by double click event. Double clicking the header label will enables the editing of that. +Diagram provides the support to edit Lane headers at runtime. You can achieve the header editing by double click event. Double clicking the header label will enable the editing of that. The following image shows how to edit the lane header. ![Lane Header Editing](../Swimlane-images/Lane_Header_Edit.gif) diff --git a/wpf/Diagram/Swimlane/Phase.md b/wpf/Diagram/Swimlane/Phase.md index 7fcd69ab8a..c888395db9 100644 --- a/wpf/Diagram/Swimlane/Phase.md +++ b/wpf/Diagram/Swimlane/Phase.md @@ -9,15 +9,15 @@ documentation: ug # Phase in WPF Diagram (SfDiagram) -The [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseViewModel.html) is the subprocess which will split each lanes as horizontally or vertically based on the swimlane orientation. The multiple number of phase can be added to swimlane. +The [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseViewModel.html) is the subprocess which will split each lanes as horizontally or vertically based on the swimlane orientation. Multiple phases can be added to a swimlane. ## Create an empty Phase -You can create the [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseViewModel.html) and add into the [Phases](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Phases) collection of the Swimlane. +You can create the [Phase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.PhaseViewModel.html) and add to the [Phases](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Phases) collection of the Swimlane. N> For Horizontal Swimlane, you must set the `UnitWidth` of the Phase. For Vertical Swimlane, you must set `UnitHeight` of the Phase. -The following code example explains how to add phase at swimlane. +The following code example explains how to add phase to a swimlane. {% tabs %} {% highlight xaml %} @@ -107,7 +107,7 @@ The following code example explains how to add phase at swimlane. ## Dynamically add phase to Swimlane -You can add the a phase at runtime by using the `Add` and `Remove` method of the [`SfDiagram.Phases`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Phases) collection. The following code example explains how to add and remove phase at run time. +You can add the phase at runtime by using the `Add` and `Remove` method of the [`SfDiagram.Phases`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SwimlaneViewModel.html#Syncfusion_UI_Xaml_Diagram_SwimlaneViewModel_Phases) collection. The following code example explains how to add and remove phase at runtime. {% tabs %} {% highlight xaml %} @@ -236,22 +236,23 @@ The following code example explains how to define a Phase header and its customi {% tabs %} {% highlight xaml %} - - - - - - + + + + + + + @@ -270,10 +271,10 @@ The following code example explains how to define a Phase header and its customi - + - + @@ -339,7 +340,7 @@ The following code example explains how to define a Phase header and its customi * You can select the individual phase header by clicking on the header twice. For first click, the respective phase can select. - * You can support to resize the individual phase header. While resizing the phase, it has maintain 20px distances from Lane children. + * You can support to resize the individual phase header. While resizing the phase, it has maintain 20px distance from Lane children. * The `NodeChangedEvent` will notify the `UnitHeight` and `UnitWidth` changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html) @@ -349,7 +350,7 @@ The following code example explains how to define a Phase header and its customi ## Phase header editing -The diagram provides the support to edit phase headers at runtime. You can achieve the header editing by double click event. Double clicking the header label will enables the editing of that. +The diagram provides the support to edit phase headers at runtime. You can achieve the header editing by double click event. Double clicking the header label will enable the editing of that. The following image shows how to edit the phase header. diff --git a/wpf/Diagram/Swimlane/Swimlane.md b/wpf/Diagram/Swimlane/Swimlane.md index 9953991827..d7c73db468 100644 --- a/wpf/Diagram/Swimlane/Swimlane.md +++ b/wpf/Diagram/Swimlane/Swimlane.md @@ -9,7 +9,7 @@ documentation: ug # Swimlane in WPF Diagram (SfDiagram) -A [Swimlane](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Swimlane.html) is a type of diagram nodes, which is typically used to visualize the relationship between a business process and the department responsible for it by focusing on the logical relationships between activities. +A [Swimlane](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Swimlane.html) is a type of diagram node, which is typically used to visualize the relationship between a business process and the department responsible for it by focusing on the logical relationships between activities. ![Swimlane Content](Swimlane-images/Swimlane_Default.PNG) @@ -150,7 +150,7 @@ The following code example explains how to customize the swimlane header. @@ -168,7 +168,7 @@ The following code example explains how to customize the swimlane header. - + @@ -242,7 +242,7 @@ You can customize the Swimlane background by changing its `ShapeStyle` property. ### Header editing -The diagram provides the support to edit swimlane headers at runtime. You can achieve the header editing by double clicking on it. Double clicking the header label will enables the editing mode. +The diagram provides the support to edit swimlane headers at runtime. You can achieve the header editing by double clicking on it. Double clicking the header label will enable the editing mode. The following image shows how to edit the swimlane header. ![Header Editing](Swimlane-images/Header_Edit.gif). @@ -303,11 +303,11 @@ SwimlaneViewModel swimlane = new SwimlaneViewModel() Swimlane can be selected by clicking (tap) the header of the swimlane. -* The `IsSelected` Property is used to select or unselect the swimlane at runtime. +* The `IsSelected` Property is used to select or deselect the swimlane at runtime. -* The `ItemSelectingEvent` and `ItemSelectedEvent` for selecting an element, will notify you the item and its original source. To explore about arguments, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [ItemSelectedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemSelectedEventArgs.html). +* The `ItemSelectingEvent` and `ItemSelectedEvent` for selecting an element, will notify you the item and its original source. To learn about the arguments, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [ItemSelectedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemSelectedEventArgs.html). -* The `ItemUnselectingEvent` and `ItemUnselectedEvent` for unselecting an element, will notify you the item and its original source. To explore about arguments, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [DiagramEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramEventArgs.html). +* The `ItemUnselectingEvent` and `ItemUnselectedEvent` for unselecting an element, will notify you the item and its original source. To learn about the arguments, refer to the [DiagramPreviewEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramPreviewEventArgs.html) and [DiagramEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramEventArgs.html). ### Drag @@ -315,7 +315,7 @@ Swimlane can be selected by clicking (tap) the header of the swimlane. * Instead of dragging original object, preview of the node alone can be dragged. For preview dragging, refer to the [PreviewSettings](https://help.syncfusion.com/wpf/sfdiagram/preview-settings). -* The `NodeChangedEvent` will notify the `OffsetX` and `OffsetY` changes with their old and new values. Along with that, this event will give information about interaction state. To explore about arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html) . +* The `NodeChangedEvent` will notify the `OffsetX` and `OffsetY` changes with their old and new values. Along with that, this event will give information about interaction state. To learn about the arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html) . ![Drag Node](Swimlane-images/Swimlane_Select_Drag.gif)