Skip to content

WPF-1038171-Need to modify the Overview file content #2351

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
ArunKumarSF4054 wants to merge 2 commits into
base: development
Choose a base branch
from
Open

WPF-1038171-Need to modify the Overview file content #2351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6809053
WPF-1038171_Updated_Overview_file
ArunKumarSF4054 Jul 8, 2026
33d0e83
Additional_files
ArunKumarSF4054 Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions wpf/Diagram/BPMN-Shapes/BPMN-Event.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 %}
Expand All @@ -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()
{
Expand All @@ -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 |
| -------- | -------- | -------- | -------- | -------- | -------- | -------- |
Expand Down
11 changes: 7 additions & 4 deletions wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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()
{
Expand Down Expand Up @@ -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.|
Expand All @@ -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.

Expand Down
53 changes: 24 additions & 29 deletions wpf/Diagram/Node.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -25,16 +25,20 @@ To create a node, you have to define the [`node object`](https://help.syncfusion
{% highlight xaml %}

<!--Resource Dictionary which contains predefined shapes for Node-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
</ResourceDictionary.MergedDictionaries>

<!--Shape style for Node-->
<Style x:Key="ShapeStyle" TargetType="Path">
<Setter Property="Fill" Value="#FF5B9BD5"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="Stroke" Value="#FFEDF1F6"/>
</Style>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
</ResourceDictionary.MergedDictionaries>

<!--Shape style for Node-->
<Style x:Key="ShapeStyle" TargetType="Path">
<Setter Property="Fill" Value="#FF5B9BD5"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="Stroke" Value="#FFEDF1F6"/>
</Style>
</ResourceDictionary>
</Window.Resources>

<!--Initialize the Sfdiagram-->
<syncfusion:SfDiagram x:Name="diagram">
Expand Down Expand Up @@ -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,
};
Expand Down Expand Up @@ -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. |

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)

Expand All @@ -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)

Expand Down Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -785,15 +787,15 @@ 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)

[How to use the property grid for diagram elements?](https://support.syncfusion.com/kb/article/9861/how-to-use-the-property-grid-in-the-wpf-diagram-sfdiagram)

[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)

Expand Down Expand Up @@ -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)
Expand Down
Loading