diff --git a/wpf-toc.html b/wpf-toc.html
index 0be863d74e..ffa0c2d4f5 100644
--- a/wpf-toc.html
+++ b/wpf-toc.html
@@ -2455,7 +2455,7 @@
Release Notes
- - 2024 Volume 2 - v26.*
- 2024 Volume 1 - v25.*
- 2023 Volume 4 - v24.*
- 2023 Volume 3 - v23.*
- 2023 Volume 2 - v22.*
+ - 2024 Volume 2 - v26.*
- 2024 Volume 1 - v25.*
- 2023 Volume 4 - v24.*
- 2023 Volume 3 - v23.*
- 2023 Volume 2 - v22.*
- 2023 Volume 1 - v21.*
- 2022 Volume 4 - v20.4.0.*
- 2022 Volume 3 - v20.3.0.*
- 2022 Volume 2 - v20.2.0.*
- 2022 volume 1 - v20.1.0.*
- 2021 Volume 4 - v19.4.0.*
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Activity.md b/wpf/Diagram/BPMN-Shapes/BPMN-Activity.md
index 7e2d0fb4e7..fb12c77a59 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Activity.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Activity.md
@@ -51,7 +51,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -97,7 +97,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -154,7 +154,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -201,7 +201,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -219,9 +219,8 @@ The following table contains various types of BPMN loops.
### Compensation
-Compensation is triggered when the operation is partially failed and enabled it with the compensation property in both task and the collapsed subprocess. To create a compensation, you have to enable the [IsCompensationActivity](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_IsCompensationActivity) property of the BpmnNodeViewModel.
+Compensation is triggered when the operation is partially failed and enabled it with the compensation property in both task and the collapsed subprocess. To create a compensation, you have to enable the [IsCompensationActivity](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_IsCompensationActivity) property of the BpmnNodeViewModel. By default, the IsCompensationActivity property is false.
->Note: By default, the IsCompensationActivity property is false.
{% tabs %}
{% highlight xaml %}
@@ -257,7 +256,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -266,9 +265,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
### Call
-A Call activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, you have to enable the [IsCallActivity](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_IsCallActivity) property of the BpmnNodeViewModel.
-
->Note: By default, the IsCallActivity property is false.
+A Call activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, you have to enable the [IsCallActivity](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_IsCallActivity) property of the BpmnNodeViewModel. By default, the IsCallActivity property is false.
{% tabs %}
{% highlight xaml %}
@@ -304,7 +301,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -313,9 +310,8 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
### Ad-Hoc
-An ad-hoc subprocess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition. To create a ad-hoc activity, you have to enable the [`IsAdhocActivity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_IsAdhocActivity) property of the BpmnNodeViewModel.
+An ad-hoc subprocess is a group of tasks that are executed in any order or skipped in order to fulfill the end condition. To create a ad-hoc activity, you have to enable the [`IsAdhocActivity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.BpmnNodeViewModel.html#Syncfusion_UI_Xaml_Diagram_BpmnNodeViewModel_IsAdhocActivity) property of the BpmnNodeViewModel. By default, the IsAdhocActivity property is false.
->Note: By default, the IsAdhocActivity property is false.
{% tabs %}
{% highlight xaml %}
@@ -351,7 +347,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -396,7 +392,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Connectors.md b/wpf/Diagram/BPMN-Shapes/BPMN-Connectors.md
index 352df2f51b..18c203a6a2 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Connectors.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Connectors.md
@@ -54,7 +54,7 @@ SfDiagram diagram = new SfDiagram();
TargetPoint = new Point(200, 100)
};
// Add the BpmnFlowViewModel into the Connectors's collection.
-(Diagram.Connectors as GroupCollection).Add(flow);
+(Diagram.Connectors as ConnectorCollection).Add(flow);
{% endhighlight %}
{% endtabs %}
@@ -106,7 +106,7 @@ SfDiagram diagram = new SfDiagram();
TargetPoint = new Point(200, 100)
};
// Add the BpmnFlowViewModel into the Connectors's collection.
-(Diagram.Connectors as GroupCollection).Add(flow);
+(Diagram.Connectors as ConnectorCollection).Add(flow);
{% endhighlight %}
{% endtabs %}
@@ -157,7 +157,7 @@ SfDiagram diagram = new SfDiagram();
TargetPoint = new Point(200, 100)
};
// Add the BpmnFlowViewModel into the Connectors's collection.
-(Diagram.Connectors as GroupCollection).Add(flow);
+(Diagram.Connectors as ConnectorCollection).Add(flow);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Data-Object.md b/wpf/Diagram/BPMN-Shapes/BPMN-Data-Object.md
index 2c12cec0b0..89b4756af2 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Data-Object.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Data-Object.md
@@ -45,7 +45,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Data-Store.md b/wpf/Diagram/BPMN-Shapes/BPMN-Data-Store.md
index df20e8abae..4720936ed8 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Data-Store.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Data-Store.md
@@ -43,7 +43,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Event.md b/wpf/Diagram/BPMN-Shapes/BPMN-Event.md
index 9ec5356a51..63f6b82029 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Event.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Event.md
@@ -51,7 +51,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
@@ -96,7 +96,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Expanded-Sub-Process.md b/wpf/Diagram/BPMN-Shapes/BPMN-Expanded-Sub-Process.md
index 1b633a12a5..313d6db97c 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Expanded-Sub-Process.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Expanded-Sub-Process.md
@@ -54,7 +54,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
IsExpandedSubProcess = true
};
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
@@ -144,7 +144,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
// Add the connector into the Connector's collection.
(group.Connectors as ConnectorCollection).Add(flow);
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
@@ -153,7 +153,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
## Add ExpandedSubProcess from stencil
-The ExpandedSubProcess can be predefined and added to the stencil and can be dropped into the diagram when needed. For more information about adding nodes from Stencil, refer to the [Stencil](/wpf/sfdiagram/stencil "Stencil") and [BPMN-Shapes-Palette](/wpf/sfdiagram/BPMN-Shapes/BPMN-Shapes-Palette "BPMN-Shapes-Palette").
+The ExpandedSubProcess can be predefined and added to the stencil and can be dropped into the diagram when needed. For more information about adding nodes from Stencil, refer to the [Stencil](https://help.syncfusion.com/wpf/diagram/stencil/stencil "Stencil") and [BPMN-Shapes-Palette](https://help.syncfusion.com/wpf/diagram/bpmn-shapes/bpmn-shapes-palette "BPMN-Shapes-Palette").
## Add BPMN Nodes/Groups into BPMN ExpandedSubProcess at runtime
You can add BPMN Nodes or Groups into the BPMN ExpandedSubProcess at runtime in two ways.
@@ -212,7 +212,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
LoopActivity = LoopCharacteristic.Standard
};
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
@@ -270,7 +270,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
IsCompensationActivity = true
};
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
@@ -320,7 +320,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
IsAdhocActivity = true
};
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
@@ -367,7 +367,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
SubProcessType = SubProcessType.Event
};
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Gateway.md b/wpf/Diagram/BPMN-Shapes/BPMN-Gateway.md
index 3344001204..f6dd9a9e4a 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Gateway.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Gateway.md
@@ -44,7 +44,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Group.md b/wpf/Diagram/BPMN-Shapes/BPMN-Group.md
index ad74aaaa4c..0812f235e9 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Group.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Group.md
@@ -46,7 +46,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
UnitHeight = 250,
};
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
@@ -129,7 +129,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
// Add the connector into the Connector's collection.
(group.Connectors as ConnectorCollection).Add(flow);
// Add the group into the Group's collection.
-(Diagram.Groups as GroupCollection).Add(group);
+(diagram.Groups as GroupCollection).Add(group);
{% endhighlight %}
{% endtabs %}
@@ -138,7 +138,7 @@ BpmnGroupViewModel group = new BpmnGroupViewModel()
## Add Group from stencil
-Groups can be predefined and added to the stencil and can be dropped into the diagram when needed. For more information about adding the nodes from Stencil, refer to the [Stencil](/wpf/sfdiagram/stencil "Stencil") and [BPMN-Shapes-Palette](/wpf/sfdiagram/BPMN-Shapes/BPMN-Shapes-Palette "BPMN-Shapes-Palette").
+Groups can be predefined and added to the stencil and can be dropped into the diagram when needed. For more information about adding the nodes from Stencil, refer to the [Stencil](https://help.syncfusion.com/wpf/diagram/stencil/stencil "Stencil") and [BPMN-Shapes-Palette](https://help.syncfusion.com/wpf/diagram/bpmn-shapes/bpmn-shapes-palette "BPMN-Shapes-Palette").
## Add BPMN Nodes/Groups into BPMNGroup at runtime
You can add the BPMN Nodes or Groups into BPMNGroup at runtime in two ways.
diff --git a/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md b/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md
index d32bab0932..e309fc41a7 100644
--- a/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md
+++ b/wpf/Diagram/BPMN-Shapes/BPMN-Shapes.md
@@ -45,7 +45,7 @@ BpmnNodeViewModel node = new BpmnNodeViewModel()
};
// Add the node into the Node's collection.
-(Diagram.Nodes as NodeCollection).Add(node);
+(diagram.Nodes as NodeCollection).Add(node);
{% endhighlight %}
{% endtabs %}
diff --git a/wpf/Diagram/Getting-Started.md b/wpf/Diagram/Getting-Started.md
index ab05f52b35..d7b6ed656d 100644
--- a/wpf/Diagram/Getting-Started.md
+++ b/wpf/Diagram/Getting-Started.md
@@ -210,7 +210,7 @@ Please refer to [Shapes](https://help.syncfusion.com/wpf/diagram/shapes) to know
@@ -524,17 +524,17 @@ xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfus
-
-
+
-
-
-
-
-
+
+
+
+
+
-
@@ -549,14 +549,14 @@ xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfus
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
{% endhighlight %}
{% highlight c# %}
@@ -644,13 +644,17 @@ Declare the style for node, connector, symbol, and symbol group to visualize the
{% tabs %}
{% highlight xaml %}
+
+
+xmlns:stencil="clr-namespace:syncfusion.UI.Xaml.Diagram.Stencil;assembly=syncfusion.SfDiagram.WPF"
+
-
-
-
-
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
{% endhighlight %}
@@ -922,7 +925,7 @@ SfDiagram supports various built-in themes. Refer to the below links to apply th
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Theme)
+[View Sample in GitHub](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Theme)
## See Also
diff --git a/wpf/Diagram/Node.md b/wpf/Diagram/Node.md
index 4027af23e6..1096a75a60 100644
--- a/wpf/Diagram/Node.md
+++ b/wpf/Diagram/Node.md
@@ -19,7 +19,7 @@ A node can be created and added to the Diagram, either programmatically or inter
### Add Node through Nodes collection
-To create a node, you have to define the [`node object`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) and add that to [`nodes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_Nodes) collection of the Diagram.
+To create a node, you have to define the [`node object`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) and add that to [`Nodes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html#Syncfusion_UI_Xaml_Diagram_SfDiagram_Nodes) collection of the Diagram.
{% tabs %}
{% highlight xaml %}
@@ -88,7 +88,7 @@ Now, node will be as follows.
### Add node from stencil
-Nodes can be predefined and added to the stencil and can be dropped into the Diagram when needed. For more information about adding Nodes from Stencil, refer to the [Stencil](https://help.syncfusion.com/wpf/diagram/stencil/stencil).
+Nodes can be predefined and added to the stencil and can be dropped into the Diagram when needed. For more information about adding Nodes from `Stencil`, refer to the [Stencil](https://help.syncfusion.com/wpf/diagram/stencil/stencil).
### Create node through data source
@@ -101,14 +101,14 @@ Nodes can be drawn interactively by clicking and dragging the Diagram surface by
## Visualize a node
You can use text, image, controls, panels, or any UIElement or template to visualize a node as follows:
- 1)Content template
- 2)Content
- 3)Geometry
- 4)Custom shapes
- 5)Built-in resource
+ 1) Content template
+ 2) Content
+ 3) Geometry
+ 4) Custom shapes
+ 5) Built-in resource
### Using content template
-[`Node`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) is a ContentControl, so you can use data template to display the content of the node using the [`ContentTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html#Syncfusion_UI_Xaml_Diagram_NodeViewModel_ContentTemplate) property. Refer to the following code example to define node's shape through ContentTemplate.
+[`Node`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) is a `ContentControl`, so you can use `DataTemplate` to display the content of the node using the [`ContentTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html#Syncfusion_UI_Xaml_Diagram_NodeViewModel_ContentTemplate) property. Refer to the following code example to define node's shape through `ContentTemplate`.
{% tabs %}
{% highlight xaml %}
@@ -147,7 +147,7 @@ NodeViewModel node = new NodeViewModel()
### Using content
-[`Node`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) is a ContentControl, so you can set text, image, or any UIElement as node content using the [`Content`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html#Syncfusion_UI_Xaml_Diagram_NodeViewModel_Content) property. Refer to the following code example to define image as content of the node.
+[`Node`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html) is a `ContentControl`, so you can set text, image, or any UIElement as node content using the [`Content`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html#Syncfusion_UI_Xaml_Diagram_NodeViewModel_Content) property. Refer to the following code example to define image as content of the `Node`.
{% tabs %}
{% highlight xaml %}
@@ -194,7 +194,7 @@ NodeViewModel node = new NodeViewModel()
### Using geometry
-The [`Shape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html#Syncfusion_UI_Xaml_Diagram_NodeViewModel_Shape) property of the node class allows to visualize any geometry path as node's content. Refer to the following code example to define geometry for node's shape.
+The [`Shape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.NodeViewModel.html#Syncfusion_UI_Xaml_Diagram_NodeViewModel_Shape) property of the `Node` class allows to visualize any geometry path as node's content. Refer to the following code example to define geometry for node's shape.
{% tabs %}
{% highlight xaml %}
@@ -240,7 +240,7 @@ NodeViewModel node = new NodeViewModel()
{% endhighlight %}
{% endtabs %}
-### Custom shapes
+### Custom shapes
#### How to add custom shape using path data
@@ -393,18 +393,14 @@ Refer to the following code example to add framework elements as node content,
{% highlight xaml %}
-
+
-
+
@@ -414,23 +410,23 @@ Refer to the following code example to add framework elements as node content,
+ HorizontalAlignment="Left"
+ VerticalAlignment="Center"
+ FontFamily="Segoe UI"
+ FontSize="12"
+ FontWeight="Bold"
+ Foreground="White"
+ Text="Daniel Tonini"
+ TextAlignment="Left" />
+ HorizontalAlignment="Left"
+ VerticalAlignment="Top"
+ FontFamily="Segoe UI"
+ FontSize="11"
+ FontWeight="SemiBold"
+ Foreground="White"
+ Text="Project Lead"
+ TextAlignment="Left" />
@@ -445,7 +441,7 @@ Refer to the following code example to add framework elements as node content,
-
+
{% endhighlight %}
@@ -478,9 +474,9 @@ Some basic built-in shapes are provided as ResourceDictionary. For more informat
## Position
-Position of a node is controlled by using its [`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) properties. By default, these Offset properties represent the distance between origin of the diagram’s page and node’s center point. You may expect this Offset values to represent the distance between page origin and node’s top left corner instead of center. The [`Pivot`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_Pivot) property helps solve this problem. Default value of node’s pivot point is (0.5, 0.5), that means center of node.
+Position of a node is controlled by using its [`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) properties. By default, these `Offset` properties represent the distance between origin of the diagram’s page and node’s center point. You may expect this Offset values to represent the distance between page origin and node’s top left corner instead of center. The [`Pivot`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_Pivot) property helps solve this problem. Default value of node’s pivot point is (0.5, 0.5), that means center of node.
-The following table explains how pivot relates Offset values with node boundaries:
+The following table explains how `Pivot` relates `Offset` values with `Node` boundaries:
| Pivot | Offset |
|---|---|
@@ -525,11 +521,11 @@ NodeViewModel node = new NodeViewModel()
Diagram provides support to flip the node.[`Flip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_Flip) is performed to give the mirrored node of the original element.
The [`Flip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Flip.html) types are:
-* Flip
+* **Flip**
`Flip` that involves both vertical and horizontal changes of the element.
-* VerticalFlip
+* **VerticalFlip**
`VerticalFlip` that involves changes in the vertical direction of the element.
-* HorizontalFlip
+* **HorizontalFlip**
`HorizontalFlip` that involves changes in the horizontal direction of the element.
{% tabs %}
@@ -569,7 +565,7 @@ The [`Flip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Flip.
## Padding
-Padding is used to leave space between the connector’s end point and the object to where it is connected. The [`ConnectorPadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_ConnectorPadding) property of node defines the space to be left between the node bounds and its edges.
+`Padding` is used to leave space between the connector’s end point and the object to where it is connected. The [`ConnectorPadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_ConnectorPadding) property of `Node` defines the space to be left between the node bounds and its edges.
{% tabs %}
{% highlight xaml %}
@@ -717,9 +713,9 @@ To explore about selection and selection related events, refer to the [Selection
* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead 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)
+* `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)
-* The [`NodeChangedEvent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_NodeChangedEvent) will notify the [`RotateAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_RotateAngle) changes with their old and new values. Along with that, this event will give information about iteraction state. To explore about arguments, 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 [`RotateAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.Node.html#Syncfusion_UI_Xaml_Diagram_Node_RotateAngle) 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) .
@@ -727,8 +723,7 @@ To explore about selection and selection related events, refer to the [Selection
* The [`ItemTappedEvent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemTappedEvent) is invoked on clicking the node. To explore about arguments, refer to the [ItemTappedEventargs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemTappedEventargs.html).
* The [`ItemDoubleTappedEvent`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_ItemDoubleTappedEvent) is invoked on double-clicking the node. To explore about arguments, refer to the [ItemDoubleTappedEventargs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.ItemDoubleTappedEventargs.html).
-* The [`MouseDown`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_MouseDown) and [`MouseUp`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_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
-[MouseUpEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.MouseUpEventArgs.html).
+* The [`MouseDown`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_MouseDown) and [`MouseUp`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.IGraphInfo.html#Syncfusion_UI_Xaml_Diagram_IGraphInfo_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 [MouseUpEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.MouseUpEventArgs.html).
## Constraints
diff --git a/wpf/diagram/getting-started_images/wpf-diagram-interact-with-stencil.gif b/wpf/diagram/getting-started_images/wpf-diagram-interact-with-stencil.gif
index 82c9182da9..d1b6dc7626 100644
Binary files a/wpf/diagram/getting-started_images/wpf-diagram-interact-with-stencil.gif and b/wpf/diagram/getting-started_images/wpf-diagram-interact-with-stencil.gif differ
diff --git a/wpf/diagram/getting-started_images/wpf-diagram-stencil-output.png b/wpf/diagram/getting-started_images/wpf-diagram-stencil-output.png
index cf91152846..c9f3772f45 100644
Binary files a/wpf/diagram/getting-started_images/wpf-diagram-stencil-output.png and b/wpf/diagram/getting-started_images/wpf-diagram-stencil-output.png differ