From 68090538528ee766990e2d75a01a5dfa2c3f3ad0 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 16:03:54 +0530 Subject: [PATCH 1/2] WPF-1038171_Updated_Overview_file --- wpf/Diagram/Overview.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/wpf/Diagram/Overview.md b/wpf/Diagram/Overview.md index 13ace3fe1..2372068e3 100644 --- a/wpf/Diagram/Overview.md +++ b/wpf/Diagram/Overview.md @@ -13,25 +13,25 @@ documentation: ug ![WPF Diagram Overview](Overview_images/wpf-diagram-overview.png) -## Key features of SfDiagram are as follows: +## Key Features of SfDiagram are as follows: * **Data visualization**: Supports visualizing any graphical objects such as text, image, shapes, or any UIElement or template. -* **Built-in Shapes**: Provided 445+ standard built-in shapes as ResourceDictionary. +* **Built-in Shapes**: Provides 445+ standard built-in shapes as ResourceDictionary. * **High Performance**: Supports loading large diagrams quickly using UI-virtualization techniques. * **Interaction**: Diagram elements can be selected, rotated, resized, and moved. -* **Z-Order**: Diagram elements overlapping can be controlled by changing its Z-Order value. +* **Z-Order**: Diagram elements overlapping can be controlled by changing their Z-Order value. * **Pan and Zoom**: Allows you to pan, zoom in or out of your current diagram. * **Snapping**: Snaps the diagram elements towards the nearest element or gridlines. * **Undo/Redo**: Allows you to keep track of the recent changes made in a Diagram to correct your mistakes. -* **Commands**: Built-in commands for various interactions that allows you to easily implement Diagram interaction logic in MVVM pattern. +* **Commands**: Built-in commands for various interactions that allow you to easily implement Diagram interaction logic in MVVM pattern. * **Keyboard Shortcuts**: Allows you to trigger the diagramming features using keyboard shortcuts. * **Clipboard Operations**: Ability to cut, copy, and paste or duplicate selected Diagram elements within and across diagrams. -* **Business objects**: Ability to populate diagram from datasource (business object) with the help of automatic-layouts. -* **Automatic Layouts**: Built-in automatic nodes arrangement support for organization chart layout, hierarchical tree layout, flowchart layout, and radial tree layout. -* **Serialization**: Saves current state of diagram as an XML file, and load them back when needed. -* **Printing and Exporting**: Supports printing and also exporting the diagram as image. -* **Stencil**: Gallery of reusable symbols and nodes, which can be dragged and dropped onto the diagram surface at any number of times. -* **Overview control**: Displays a small preview of the full diagram page, which allows you to improve the navigation. -* **Localization**: Localizes every static text in the control to any supported language. +* **Business objects**: Ability to populate diagram from data source (business object) with the help of automatic-layouts. +* **Automatic Layouts**: Built-in automatic nodes arrangement support for organization chart layout, hierarchical tree layout, mind map tree layout, flowchart layout, force directed tree layout, and radial tree layout. +* **Serialization**: Saves current state of diagram as an XML file, and loads them back when needed. +* **Printing and Exporting**: Supports printing and also exporting the diagram as an image. +* **Stencil**: Gallery of reusable symbols and nodes, which can be dragged and dropped onto the diagram surface any number of times. +* **Overview control**: Displays a small preview of the full diagram page, which allows you to improve navigation. +* **Localization**: Localizes all static text in the control to any supported language. N> Looking for the full WPF Diagram component overview, features, pricing, and documentation? Visit the [WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram) page. \ No newline at end of file From 33d0e837c542eebc891b98c0a96ee07c7e137792 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 10:52:44 +0530 Subject: [PATCH 2/2] Additional_files --- wpf/Diagram/BPMN-Shapes/BPMN-Event.md | 11 +++-- wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md | 11 +++-- wpf/Diagram/Node.md | 53 +++++++++++------------ wpf/Diagram/Port/Port.md | 12 +++--- wpf/Diagram/Port/PortHoverEffect.md | 2 +- wpf/Diagram/Shapes.md | 59 ++++++++++++++------------ wpf/Diagram/UML-Sequence-Diagram.md | 8 ++-- 7 files changed, 80 insertions(+), 76 deletions(-) diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Event.md b/wpf/Diagram/BPMN-Shapes/BPMN-Event.md index ad400b407..fad8872e0 100644 --- a/wpf/Diagram/BPMN-Shapes/BPMN-Event.md +++ b/wpf/Diagram/BPMN-Shapes/BPMN-Event.md @@ -8,9 +8,9 @@ documentation: ug --- # Event in WPF Diagram (SfDiagram) -An [`Event`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Controls.BpmnShapeType.html#fields#Event) is a common BPMN process model element that represents something happens during a business process and its is notated with a circle. +An [`Event`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Controls.BpmnShapeType.html#fields#Event) is a common BPMN process model element that represents something happens during a business process and it is notated with a circle. The [`EventType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_EventType) property of the [`BpmnNodeViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html) allows you to set the type of event that occurred during the process. The default event type is [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Controls.EventType.html). - The type of events are as follows: + The types of events are as follows: * Start: Occurs at the beginning of the process and every business process starts with an event. * Intermediate: Occurs in the middle of the process. @@ -60,7 +60,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel() ## BPMN event trigger -The event triggers are notated as icons inside the circle and they represent the specific details of the process. The [`EventTrigger`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_EventTrigger) property of the [`BpmnNodeViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html) allows you to set the type of trigger. By default, it is set to [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Controls.EventTrigger.html). The following code example explains how to create a BPMN trigger. +The event triggers are notated as icons inside the circle and they represents something that happens during a business process. The [`EventTrigger`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_EventTrigger) property of the [`BpmnNodeViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html) allows you to set the type of trigger. By default, it is set to [`None`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Controls.EventTrigger.html). The following code example explains how to create a BPMN trigger. {% tabs %} {% highlight xaml %} @@ -83,6 +83,9 @@ The event triggers are notated as icons inside the circle and they represent the //Initialize the diagram. SfDiagram diagram = new SfDiagram(); +//Initialize NodeCollection to SfDiagram +diagram.Nodes = new NodeCollection(); + //Initialize the BpmnNodeViewModel. BpmnNodeViewModel node = new BpmnNodeViewModel() { @@ -103,7 +106,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel() ![WPF Diagram BPMN Event and Trigger](BPMN-Shapes-Images/wpf-diagram-bpmn-event-and-trigger.png) -The following table shows the type of event triggers. +The following table shows the event trigger types. | Event / Trigger | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End | | -------- | -------- | -------- | -------- | -------- | -------- | -------- | diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md b/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md index 9cfeaff5f..62260dd87 100644 --- a/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md +++ b/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md @@ -9,7 +9,7 @@ documentation: ug # BPMN Shapes in WPF Diagram (SfDiagram) -BPMN(Business Process Model and Notation) shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create BPMN shapes, you have to initialize [`BpmnNodeViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html) with the [`Type`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_Type) property. The `Type` property can be set to any one of the built-in bpmn shapes using the [`BpmnShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Controls.BpmnShapeType.html) enumeration. The default value for the `Type` property of `BpmnNodeViewModel` is `Activity`. +BPMN(Business Process Model and Notation) shapes are used to represent internal business processes in a graphical notation and enable you to communicate the procedures in a standard manner. To create BPMN shapes, you have to initialize [`BpmnNodeViewModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html) with the [`Type`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_Type) property. The `Type` property can be set to any one of the built-in BPMN shapes using the [`BpmnShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Controls.BpmnShapeType.html) enumeration. The default value for the `Type` property of `BpmnNodeViewModel` is `Activity`. The following code example explains how to create a simple business process. @@ -34,6 +34,9 @@ The following code example explains how to create a simple business process. //Initialize the diagram. SfDiagram diagram = new SfDiagram(); +//Initialize NodeCollection to SfDiagram +diagram.Nodes = new NodeCollection(); + //Initialize the BpmnNodeViewModel. BpmnNodeViewModel node = new BpmnNodeViewModel() { @@ -62,8 +65,8 @@ The list of supported BPMN shapes are as follows: | Activity | ![Task Shape](BPMN-Shapes-Images/Task.png) | Activities describe the kind of work being done in a particular process instance | | Message | ![Message Shape](BPMN-Shapes-Images/Message.png) | The message is just the content of the communication| | DataStore | ![Datasource Shape](BPMN-Shapes-Images/Datasource.png) |DataStore is used to store or access data associated with a business process| -| DataObject | ![Dataobject Shape](BPMN-Shapes-Images/Dataobject.png) |A DataObject represents information flowing using the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored| -| TextAnnotation | ![TextAnnotation Shape](BPMN-Shapes-Images/TextAnnotation.png) |A TextAnnotation points at or references the another BPMN shape, which we call as the TextAnnotationTarget of the TextAnnotation| +| DataObject | ![Dataobject Shape](BPMN-Shapes-Images/Dataobject.png) |A DataObject represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored| +| TextAnnotation | ![TextAnnotation Shape](BPMN-Shapes-Images/TextAnnotation.png) |A TextAnnotation points at or references another BPMN shape, which is call as the TextAnnotationTarget of the TextAnnotation| | Group | ![Group Shape](BPMN-Shapes-Images/Group.png) |Organize tasks or processes that have significance in the overall process.| | Expandedsubprocess | ![Expandedsubprocess Shape](BPMN-Shapes-Images/Expandedsubprocess.png) |ExpandedSubProcess is the extended version of the Group| | Sequenceflow | ![Sequenceflow Shape](BPMN-Shapes-Images/Sequenceflow.png) |Sequence flows represent the typical path between two flow objects.| @@ -74,7 +77,7 @@ The list of supported BPMN shapes are as follows: | BiDirectionalAssociation | ![BiDirectionalAssociation Shape](BPMN-Shapes-Images/BiDirectionalAssociation.png) |BiDirectionalAssociation is represented as a dotted graphical line with the double side arrow.| | MessageFlow | ![MessageFlow Shape](BPMN-Shapes-Images/Messageflow.png) |A MessageFlow flow shows the flow of messages between two participants and is represented by line.| | InitiatingMessageflow | ![InitiatingMessageflow Shape](BPMN-Shapes-Images/InitiatingMessageflow.png) | An activity or event in one pool can initiate a message to another pool| -| NonInitiatingMessageflow | ![NonInitiatingMessageflow Shape](BPMN-Shapes-Images/NonInitiatingMessageflow.png) | An activity or event in one pool cann't initiate a message to another pool| +| NonInitiatingMessageflow | ![NonInitiatingMessageflow Shape](BPMN-Shapes-Images/NonInitiatingMessageflow.png) | An activity or event in one pool can not initiate a message to another pool| Please find the BPMN Editor sample as follows. diff --git a/wpf/Diagram/Node.md b/wpf/Diagram/Node.md index 1e7bf7c4a..168374fe6 100644 --- a/wpf/Diagram/Node.md +++ b/wpf/Diagram/Node.md @@ -9,7 +9,7 @@ documentation: ug # Node in WPF Diagram (SfDiagram) -The nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, or any other kind of data, and it represents the functions of a complete system in regards of how it interacts with external entities. +The nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, or any other kind of data, and they represent the functions of a complete system in regards to how it interacts with external entities. ![WPF Diagram Node Content](Node_images/wpf-diagram-node-content.PNG) @@ -25,16 +25,20 @@ To create a node, you have to define the [`node object`](https://help.syncfusion {% highlight xaml %} - - - - - - + + + + + + + + + + @@ -283,7 +287,7 @@ NodeViewModel node = new NodeViewModel() //sets the position OffsetX = 100, OffsetY = 100, - Shape= App.Current.Resources["Rectangle"] as Style, + Shape= App.Current.Resources["Rectangle"], //Apply style to Shape ShapeStyle = App.Current.Resources["ShapeStyle"] as Style, }; @@ -480,7 +484,7 @@ The following table explains how `Pivot` relates `Offset` values with `Node` bou | Pivot | Offset | |---|---| -| (0,5, 0.5) | OffsetX and OffsetY values are considered as the node’s center point. | +| (0.5, 0.5) | OffsetX and OffsetY values are considered as the node’s center point. | | (0,0) | OffsetX and OffsetY values are considered as the top left corner of node. | | (1,1) | OffsetX and OffsetY values are considered as the bottom right corner of the node. | @@ -593,8 +597,10 @@ The [`Flip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Flip. {% endhighlight %} -{% highlight c# %} +{% highlight C# %} +//Initialize the SfDiagram. +SfDiagram diagram = new SfDiagram(); //Define NodeProperty NodeViewModel node1 = AddNode(200,200,65,100); //Space between Connector and Node @@ -694,7 +700,7 @@ To explore about selection and selection related events, refer to the [Selection * The [`BoundaryConstraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ChangeEventArgs-2.html#Syncfusion_UI_Xaml_Diagram_ChangeEventArgs_2_BoundaryConstraints) argument in the [`NodeChangedEvent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_NodeChangedEvent) is used to restrict the dragging of the Nodes in the given region. -* The [`NodeChangedEvent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_NodeChangedEvent) will notify the [`OffsetX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_OffsetY) changes with their old and new values. Along with that, this event will give information about interaction state. To explore about aruguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html) . +* The [`NodeChangedEvent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_NodeChangedEvent) will notify the [`OffsetX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_OffsetY) changes with their old and new values. Along with that, this event will give information about interaction state. To explore the arguments, refer to the [NodeChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeChangedEventArgs.html) . ![WPF Diagram Drag Node](Node_images/wpf-diagram-drag-node.gif) @@ -711,7 +717,7 @@ To explore about selection and selection related events, refer to the [Selection ### Rotate -* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node. +* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction leads to rotate the node. * The node is rotated with reference to the static pivot point. * `Pivot` thumb (thumb at the middle of the Node) appears when rotating the node to represent the static point. For more information about pivot, refer to [`Position`](https://help.syncfusion.com/wpf/diagram/node#position) @@ -753,8 +759,6 @@ The [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra [How to customize the context menu?](https://support.syncfusion.com/kb/article/9270/how-to-customize-the-contextmenu-in-wpf-diagram-sfdiagram) -[How to drag 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’s dragging from native lane to other lanes in diagram?](https://support.syncfusion.com/kb/article/11744/how-to-restrict-nodes-dragging-from-native-lane-to-other-lanes-in-wpf-diagramsfdiagram) [How to add ToolTip for Diagram objects of Node, NodePort in Diagram?](https://support.syncfusion.com/kb/article/11748/how-to-add-tooltip-for-diagram-objects-of-node-nodeport-in-wpf-diagramsfdiagram) @@ -763,8 +767,6 @@ The [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra [How to notify state of operation performed on node?](https://support.syncfusion.com/kb/article/5523/how-to-notify-state-of-operation-performed-on-node-in-wpf-diagram) -[How to remove all its children nodes when deleting a parent node?](https://support.syncfusion.com/kb/article/10027/how-to-remove-all-its-children-when-deleting-a-parent-node-in-wpf-diagram-sfdiagram) - [How to restrict annotation editing by double-clicking the node or connector?](https://support.syncfusion.com/kb/article/8539/how-to-restrict-annotation-editing-by-double-clicking-the-node-or-connector-in-wpf-diagram) [How to disable the animation while creating a connection in diagram?](https://support.syncfusion.com/kb/article/8187/how-to-disable-the-animation-while-creating-a-connection-in-wpf-diagram-sfdiagram) @@ -785,7 +787,7 @@ The [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra [How to customize the appearance of the node selector?](https://support.syncfusion.com/kb/article/10605/how-to-customize-the-appearance-of-the-selector-in-wpf-diagram-sfdiagram) -[How to update the Zindex of the dragged node?](https://support.syncfusion.com/kb/article/10388/how-to-update-the-zindex-of-the-dragged-node-in-wpf-diagram-sfdiagram) +[How to update the ZIndex of the dragged node?](https://support.syncfusion.com/kb/article/10388/how-to-update-the-zindex-of-the-dragged-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) @@ -793,7 +795,7 @@ The [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra [How to add multiple ports for Node?](https://support.syncfusion.com/kb/article/9948/how-to-add-multiple-ports-for-node-in-the-wpf-diagram-sfdiagram) -[How to override the default cursors while interact on diagram objects?](https://support.syncfusion.com/kb/article/9997/how-to-override-the-default-cursors-while-interaction-in-wpf-diagram-sfdiagram) +[How to override the default cursors while interacting on diagram objects?](https://support.syncfusion.com/kb/article/9997/how-to-override-the-default-cursors-while-interaction-in-wpf-diagram-sfdiagram) [How to create parent and child relationship by drag and drop nodes?](https://support.syncfusion.com/kb/article/10008/how-to-create-parent-and-child-relationship-by-drag-and-drop-nodes-in-wpf-diagram-sfdiagram) @@ -855,20 +857,13 @@ The [`Constraints`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagra [How to manage the visibility of node and connector objects in the WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/14995/how-to-manage-the-visibility-of-node-and-connector-objects-in-the-wpf-diagram-sfdiagram) -[How to customize the connection indicator style of node and port in WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/10048/how-to-customize-the-connection-indicator-style-of-node-and-port-in-wpf-diagram-sfdiagram) - -[How to notify state of operation performed on node in WPF Diagram?](https://support.syncfusion.com/kb/article/5523/how-to-notify-state-of-operation-performed-on-node-in-wpf-diagram) [How to remove all its children when deleting a parent node in WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/10027/how-to-remove-all-its-children-when-deleting-a-parent-node-in-wpf-diagram-sfdiagram) [How to restrict annotation editing by double-clicking the node or connector in WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/8539/how-to-restrict-annotation-editing-by-double-clicking-the-node-or-connector-in-wpf-diagram) -[How to hide specific default QuickCommands of node in WPF Diagram?](https://support.syncfusion.com/kb/article/11519/how-to-hide-specific-default-quickcommands-of-node-in-wpf-diagram) - [How to restrict Connector's source/target changing from native Nodes to other Nodes in WPF Diagram(SfDiagram)?](https://support.syncfusion.com/kb/article/11796/how-to-restrict-connectors-source-target-changing-from-native-nodes-to-other-nodes-in-wpf) -[How to serialize Content and ContentTemplate properties of a Node in WPF Diagram(SfDiagram)?](https://support.syncfusion.com/kb/article/11574/how-to-serialize-content-and-contenttemplate-properties-of-a-node-in-wpf-diagramsfdiagram) - [How to create filled PolyLine Node in WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/10255/how-to-create-filled-polyline-node-in-wpf-diagram-sfdiagram) [How to bring the specific node to the center or viewport in WPF Diagram (SfDiagram)?](https://support.syncfusion.com/kb/article/9918/how-to-bring-the-specific-node-to-the-center-or-viewport-in-wpf-diagram-sfdiagram) diff --git a/wpf/Diagram/Port/Port.md b/wpf/Diagram/Port/Port.md index aa57cd5b6..9641f6928 100644 --- a/wpf/Diagram/Port/Port.md +++ b/wpf/Diagram/Port/Port.md @@ -9,7 +9,7 @@ documentation: ug # Port in WPF Diagram (SfDiagram) -Port is a special connection point on a Node or Connector that you can glue the connectors. When you glue a connector to a node or port, they stay connected, even if one of the node is moved. +Port is a special connection point on a Node or Connector that you can glue the connectors. When you glue a connector to a node or port, they stay connected, even if one of the nodes is moved. ![WPF Diagram Port](Port_images/wpf-diagram-port.PNG) @@ -29,7 +29,7 @@ SfDiagram supports three types of ports: Node Port, Connector Port, and DockPort ## Node port -A port on a node can be created using the instance of `NodePort` object. The [`NodeOffsetX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html#Syncfusion_UI_Xaml_Diagram_NodePort_NodeOffsetX) and [`NodeOffsetY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html#Syncfusion_UI_Xaml_Diagram_NodePort_NodeOffsetY) properties of [`NodePort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html) class is used to specify the position of the port on a node. +A port on a node can be created using the instance of `NodePort` object. The [`NodeOffsetX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html#Syncfusion_UI_Xaml_Diagram_NodePort_NodeOffsetX) and [`NodeOffsetY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html#Syncfusion_UI_Xaml_Diagram_NodePort_NodeOffsetY) properties of [`NodePort`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePort.html) class are used to specify the position of the port on a node. {% tabs %} @@ -140,7 +140,7 @@ The `NodeOffsetX` and `NodeOffsetY` properties of port is used to position the p | (1,1) | ![Left](Port_images/offset9.PNG) | ### Displacement -The [`Displacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodePortViewModel.html#Syncfusion_UI_Xaml_Diagram_NodePortViewModel_Displacement) property is used to dislocate the port by the value given. By default, port will be in the center of the node. When you assign value to the `Displacement` property, port 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.NodePortViewModel.html#Syncfusion_UI_Xaml_Diagram_NodePortViewModel_Displacement) property is used to dislocate the port by the value given. By default, port will be in the center of the node. When you assign value to the `Displacement` property, port will be displaced from its position by displacement value. Default value is 0d. {% tabs %} {% highlight xaml %} @@ -221,7 +221,7 @@ Find the common style for Connector and ConnectorPort. - + @@ -356,7 +356,7 @@ The appearance of `DockPort` such as stroke and stroke thickness can be customiz ![WPF Diagram Port Geometry Style](Port_images/wpf-diagram-port-geometry-style.PNG) -N> To visualize the DockPort, it is must to specify the SourcePoint , TargetPoint, and ConnectorGeometryStyle properties. +N> To visualize the DockPort, it is necessary to specify the SourcePoint , TargetPoint, and ConnectorGeometryStyle properties. ## Padding @@ -446,7 +446,7 @@ NodePortViewModel port = new NodePortViewModel() NodeOffsetY = 0.5 }; port.Constraints = PortConstraints.Connectable | PortConstraints.ConnectionDirection; -//Specifying the direction in which connector need to connected to the port +//Specifying the direction in which connector needs to be connected to the port port.ConnectionDirection = ConnectionDirection.Right; {% endhighlight %} diff --git a/wpf/Diagram/Port/PortHoverEffect.md b/wpf/Diagram/Port/PortHoverEffect.md index 3a22556fb..e30a52fe2 100644 --- a/wpf/Diagram/Port/PortHoverEffect.md +++ b/wpf/Diagram/Port/PortHoverEffect.md @@ -9,7 +9,7 @@ documentation: ug # Port hovering animation effect in WPF Diagram (SfDiagram) -When establishing a new connection or modifying the start/end points of existing connector over port, an animation will be shown while hovering on port. This animation is used to indicate that the user is hovering over the tiny port, which helps to start/end the connection to the ports. The [PortHoverEffect](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramViewModel.html#Syncfusion_UI_Xaml_Diagram_DiagramViewModel_PortHoverEffect) property of [SfDiagram](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramViewModel.html#Syncfusion_UI_Xaml_Diagram) class allows you to specify the any one of the following animation effect. The default effect is `Ripple`. +When establishing a new connection or modifying the start/end points of existing connector over a port, an animation will be shown while hovering on port. This animation is used to indicate that the user is hovering over the tiny port, which helps to start/end the connection to the ports. The [PortHoverEffect](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramViewModel.html#Syncfusion_UI_Xaml_Diagram_DiagramViewModel_PortHoverEffect) property of [SfDiagram](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DiagramViewModel.html#Syncfusion_UI_Xaml_Diagram) class allows you to specify the any one of the following animation effects. The default effect is `Ripple`. * **Ripple:** Specifies the water ripple circles type animation effect for connection. * **Shrink:** Specifies the plus symbol type animation effect for connection. diff --git a/wpf/Diagram/Shapes.md b/wpf/Diagram/Shapes.md index 7f43b1b43..4e3df2b89 100644 --- a/wpf/Diagram/Shapes.md +++ b/wpf/Diagram/Shapes.md @@ -11,7 +11,7 @@ documentation: ug We have provided some basic built-in shapes as ResourceDictionary. -The following code example illustrates how to merge shapes into [WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram). +The following code example illustrates how to add shape resources to [WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram). {% tabs %} {% highlight xaml %} @@ -59,6 +59,9 @@ The following code example illustrates how to assign [`Shape`](https://help.sync //Initialize the diagram SfDiagram diagram = new SfDiagram(); +//Initialize NodeCollection to SfDiagram +diagram.Nodes = new NodeCollection(); + //Initialize the NodeViewModel NodeViewModel node = new NodeViewModel() { @@ -74,7 +77,7 @@ NodeViewModel node = new NodeViewModel() {% endhighlight %} {% endtabs %} -Output Node will be, +The resulting node is shown below. ![WPF Diagram Shapes](Shapes_images\wpf-diagram-shapes.PNG) @@ -97,49 +100,49 @@ The list of shapes are available in the resource dictionary as follows | |TwoSideFlatCorner | ![BasicTwoSideFlatCorner](Shapes_images\BasicTwoSideFlatCorner.PNG)| | | TwoSideRoundCorner| ![BasicTwoSideRoundCorner](Shapes_images\BasicTwoSideRoundCorner.PNG)| | |RoundedRectangle | ![BasicRoundedRectangle](Shapes_images\BasicRoundedRectangle.PNG)| -| | Cloud | ![BasicCloud](Shapes_images\BasicCloud.PNG)| +| | Cloud| ![BasicCloud](Shapes_images\BasicCloud.PNG)| | |CloudCallOut | ![BasicCloudCallOut](Shapes_images\BasicCloudCallOut.PNG)| | | Paralleogram| ![BasicParalleogram](Shapes_images\BasicParalleogram.PNG)| -| |Frame | ![BasicFrame](Shapes_images\BasicFrame.PNG)| +| |Frame| ![BasicFrame](Shapes_images\BasicFrame.PNG)| | | Donut| ![BasicDonut](Shapes_images\BasicDonut.PNG)| | |RectangleCallOut | ![BasicRectangleCallOut](Shapes_images\BasicRectangleCallOut.PNG)| | |RoundedRectangleCallOut | ![BasicRoundedRectangleCallOut](Shapes_images\BasicRoundedRectangleCallOut.PNG)| | | OvalCallOut| ![BasicOvalCallOut](Shapes_images\BasicOvalCallOut.PNG)| | | Cube| ![BasicCube](Shapes_images\BasicCube.PNG)| -| |NoSymbol | ![BasicNoSymbol](Shapes_images\BasicNoSymbol.PNG)| -| |FourPointStar | ![BasicFourPointStar](Shapes_images\BasicFourPointStar.PNG)| -| |FivePointStar | ![BasicFivePointStar](Shapes_images\BasicFivePointStar.PNG)| +| |NoSymbol| ![BasicNoSymbol](Shapes_images\BasicNoSymbol.PNG)| +| |FourPointStar| ![BasicFourPointStar](Shapes_images\BasicFourPointStar.PNG)| +| |FivePointStar| ![BasicFivePointStar](Shapes_images\BasicFivePointStar.PNG)| | | SixPointStar| ![BasicSixPointStar](Shapes_images\BasicSixPointStar.PNG)| -| |SevenPointStar | ![BasicSevenPointStar](Shapes_images\BasicSevenPointStar.PNG)| -| |SixteenPointStar | ![BasicSixteenPointStar](Shapes_images\BasicSixteenPointStar.PNG)| -| |TwentyFourPointStar | ![BasicTwentyFourPointStar](Shapes_images\BasicTwentyFourPointStar.PNG)| -| |ThirtyTwoPointStar | ![BasicThirtyTwoPointStar](Shapes_images\BasicThirtyTwoPointStar.PNG)| +| |SevenPointStar| ![BasicSevenPointStar](Shapes_images\BasicSevenPointStar.PNG)| +| |SixteenPointStar| ![BasicSixteenPointStar](Shapes_images\BasicSixteenPointStar.PNG)| +| |TwentyFourPointStar| ![BasicTwentyFourPointStar](Shapes_images\BasicTwentyFourPointStar.PNG)| +| |ThirtyTwoPointStar| ![BasicThirtyTwoPointStar](Shapes_images\BasicThirtyTwoPointStar.PNG)| | Flow Shapes |Process | ![FlowProcess](Shapes_images\FlowProcess.PNG)| | | Decision| ![FlowDecision](Shapes_images\FlowDecision.PNG)| | |Terminator | ![FlowTerminator](Shapes_images\FlowTerminator.PNG)| | |Sort | ![Sort](Shapes_images\FlowSort.PNG)| -| |Document | ![FlowSort](Shapes_images\FlowDocument.PNG)| +| |Document| ![FlowSort](Shapes_images\FlowDocument.PNG)| | |MultiDocument | ![FlowMultiDocument](Shapes_images\FlowMultiDocument.PNG)| -| |DirectData | ![FlowDirectData](Shapes_images\FlowDirectData.PNG)| +| |DirectData| ![FlowDirectData](Shapes_images\FlowDirectData.PNG)| | |SequentialData | ![FlowSequentialData](Shapes_images\FlowSequentialData.PNG)| -| |PaperTap | ![FlowPaperTap](Shapes_images\FlowPaperTap.PNG)| +| |PaperTap| ![FlowPaperTap](Shapes_images\FlowPaperTap.PNG)| | | Collate| ![FlowCollate](Shapes_images\FlowCollate.PNG)| | | SummingJunction| ![FlowSummingJunction](Shapes_images\FlowSummingJunction.PNG)| | |Or | ![Or](Shapes_images\FlowOr.PNG)| | |InternalStorage | ![FlowInternalStorage](Shapes_images\FlowInternalStorage.PNG)| | |PredefinedProcess | ![FlowPredefinedProcess](Shapes_images\FlowPredefinedProcess.PNG)| -| |Extract | ![FlowExtract](Shapes_images\FlowExtract.PNG)| -| |Merge | ![FlowMerge](Shapes_images\FlowMerge.PNG)| +| |Extract| ![FlowExtract](Shapes_images\FlowExtract.PNG)| +| |Merge| ![FlowMerge](Shapes_images\FlowMerge.PNG)| | | OffPageReference| ![FlowOffPageReference](Shapes_images\FlowOffPageReference.PNG)| -| |SequentialAccessStorage | ![FlowSequentialAccessStorage](Shapes_images\FlowSequentialAccessStorage.PNG)| -| |Delay | ![FlowDelay](Shapes_images\FlowDelay.PNG)| +| |SequentialAccessStorage| ![FlowSequentialAccessStorage](Shapes_images\FlowSequentialAccessStorage.PNG)| +| |Delay| ![FlowDelay](Shapes_images\FlowDelay.PNG)| | | StoredData| ![FlowStoredData](Shapes_images\FlowStoredData.PNG)| -| |Display | ![FlowDisplay](Shapes_images\FlowDisplay.PNG)| +| |Display| ![FlowDisplay](Shapes_images\FlowDisplay.PNG)| | |ManualOperation | ![FlowManualOperation](Shapes_images\FlowManualOperation.PNG)| | |Data | ![FlowData](Shapes_images\FlowData.PNG)| | | OnPageReference| ![FlowOnPageReference](Shapes_images\FlowOnPageReference.PNG)| -| |Prepration | ![FlowPrepration](Shapes_images\FlowPrepration.PNG)| -| |PunchedCard | ![FlowPunchedCard](Shapes_images\FlowPunchedCard.PNG)| +| |Prepration| ![FlowPrepration](Shapes_images\FlowPrepration.PNG)| +| |PunchedCard| ![FlowPunchedCard](Shapes_images\FlowPunchedCard.PNG)| | |Card | ![FlowCard](Shapes_images\FlowCard.PNG)| | | LoopLimit| ![LoopLimit](Shapes_images\FlowLoopLimit.PNG)| | |ManualInput | ![ManualInput](Shapes_images\FlowManualInput.PNG)| @@ -154,10 +157,10 @@ The list of shapes are available in the resource dictionary as follows | | LeftArrow| ![LeftArrow](Shapes_images\ArrowLeftArrow.PNG)| | |RightArrow | ![RightArrow](Shapes_images\ArrowRightArrow.PNG)| | |DoubleArrow | ![DoubleArrow](Shapes_images\ArrowDoubleArrow.PNG)| -| |TopArrow | ![TopArrow](Shapes_images\ArrowTopArrow.PNG)| +| |TopArrow| ![TopArrow](Shapes_images\ArrowTopArrow.PNG)| | |BottomArrow | ![BottomArrow](Shapes_images\ArrowBottomArrow.PNG)| | | MultiArrow| ![MultiArrow](Shapes_images\ArrowMultiArrow.PNG)| -| |BlockArrow | ![BlockArrow](Shapes_images\ArrowBlockArrow.PNG)| +| |BlockArrow| ![BlockArrow](Shapes_images\ArrowBlockArrow.PNG)| | |QuadBlockArrow | ![QuadBlockArrow](Shapes_images\ArrowQuadBlockArrow.PNG)| | | NotchedArrow| ![NotchedArrow](Shapes_images\ArrowNotchedArrow.PNG)| | |LeftRightBlockArrow | ![LeftRightBlockArrow](Shapes_images\ArrowLeftRightBlockArrow.PNG)| @@ -194,19 +197,19 @@ The list of shapes are available in the resource dictionary as follows | |Sawtooth | ![Sawtooth](Shapes_images\ElectricalSawtooth.PNG)| | | Step| ![Step](Shapes_images\ElectricalStep.PNG)| | | SensingLinkSquib| ![SensingLinkSquib](Shapes_images\ElectricalSensingLinkSquib.PNG)| -| |Indicator | ![Indicator](Shapes_images\ElectricalIndicator.PNG)| +| |Indicator| ![Indicator](Shapes_images\ElectricalIndicator.PNG)| | | Material| ![Material](Shapes_images\ElectricalMaterial.PNG)| -| |DelayElement | ![DelayElement](Shapes_images\ElectricalDelayElement.PNG)| +| |DelayElement| ![DelayElement](Shapes_images\ElectricalDelayElement.PNG)| | | SurgeProtector| ![SurgeProtector](Shapes_images\ElectricalSurgeProtector.PNG)| | |SurgeProtector1 | ![SurgeProtector1](Shapes_images\ElectricalSurgeProtector1.PNG)| -| |PermanentMagnet | ![PermanentMagnet](Shapes_images\ElectricalPermanentMagnet.PNG)| +| |PermanentMagnet| ![PermanentMagnet](Shapes_images\ElectricalPermanentMagnet.PNG)| | |Magnetoresistor_shape | ![Magnetoresistor_shape](Shapes_images\ElectricalMagnetoresistor_shape.PNG)| | | IgnitorPlug| ![IgnitorPlug](Shapes_images\ElectricalIgnitorPlug.PNG)| -| |Bell | ![Bell](Shapes_images\ElectricalBell.PNG)| +| |Bell| ![Bell](Shapes_images\ElectricalBell.PNG)| | | Buzzer| ![Buzzer](Shapes_images\ElectricalBuzzer.PNG)| | |ThermalElement | ![ThermalElement](Shapes_images\ElectricalThermalElement.PNG)| | | ThermoCouple| ![ThermoCouple](Shapes_images\ElectricalThermoCouple.PNG)| -Find the [Shapes sample](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Shapes) to depict the shapes. +See the [Shapes sample](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Shapes) for examples of these shape. N> Looking for the full WPF Diagram component overview, features, pricing, and documentation? Visit the [WPF Diagram](https://www.syncfusion.com/wpf-controls/diagram) page. \ No newline at end of file diff --git a/wpf/Diagram/UML-Sequence-Diagram.md b/wpf/Diagram/UML-Sequence-Diagram.md index 0e42ff337..694e31f5e 100644 --- a/wpf/Diagram/UML-Sequence-Diagram.md +++ b/wpf/Diagram/UML-Sequence-Diagram.md @@ -93,7 +93,7 @@ Diagram.Model = new UMLSequenceDiagramModel() ### Messages -[UMLSequenceMessage](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.UMLSequenceMessage.html) represent communication between participants and is displayed as arrows connecting lifelines. +[UMLSequenceMessage](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.UMLSequenceMessage.html) represent communication between participants and are displayed as arrows connecting lifelines. #### Types of Messages @@ -401,7 +401,7 @@ var messages = new MessageCollection } }; -// Intialize Diagram +// Initialize Diagram SfDiagram Diagram = new SfDiagram(); // Update Participants and Messages to the Model @@ -663,7 +663,7 @@ var fragments = new FragmentCollection }; -// Intialize Diagram +// Initialize Diagram SfDiagram Diagram = new SfDiagram(); // Update Participants, Messages and Fragments to the Model @@ -724,7 +724,7 @@ The [SpaceBetweenParticipants](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% endhighlight %} {% highlight c# %} -// Intialize Diagram +// Initialize Diagram SfDiagram Diagram = new SfDiagram(); // Initialize the UML Sequence Diagram model with custom spacing and predefined elements