Skip to content

WPF-889895-Getting Started Page Issue Correction #1332

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

Merged
merged 5 commits into from
Jun 19, 2024
Merged

WPF-889895-Getting Started Page Issue Correction #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab63c46
WPF-889895-Updated the Stencil Images and also corrected the inconsis…
satishraj-sf4377 Jun 7, 2024
1bfac89
WPF-889895-Changed the representation of properties and removed the …
satishraj-sf4377 Jun 7, 2024
fc815a5
WPF-889895-Reduced the GIF size and corrected a mistake in xaml
satishraj-sf4377 Jun 10, 2024
cd751aa
WPF-889895-Removed Extra spaces and removed the content from "Note" s…
satishraj-sf4377 Jun 12, 2024
c017856
WPF-889895-Updated the API links and Gif
satishraj-sf4377 Jun 19, 2024
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
10 changes: 3 additions & 7 deletions wpf/Diagram/BPMN-Shapes/BPMN-Activity.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down Expand Up @@ -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 %}
Expand Down Expand Up @@ -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 %}
Expand Down
89 changes: 46 additions & 43 deletions wpf/Diagram/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ Please refer to [Shapes](https://help.syncfusion.com/wpf/diagram/shapes) to know
<Style TargetType="Path" x:Key="ShapeStyle">
<Setter Property="Fill" Value="#FF5B9BD5"/>
<Setter Property="Stretch" Value="Fill"/>
Setter Property="Stroke" Value="#FFEDF1F6"/>
<Setter Property="Stroke" Value="#FFEDF1F6"/>
</Style>

<!--To apply Style for NodeViewModel-->
Expand Down Expand Up @@ -524,17 +524,17 @@ xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfus
<!--Initialize the SymbolCollection-->
<local:SymbolCollection>
<!--Define the DiagramElement-Node-->
<Syncfusion:NodeViewModel UnitHeight="40" UnitWidth="120"
<syncfusion:NodeViewModel UnitHeight="40" UnitWidth="120"
Shape="{StaticResource Ellipse}" Key="Nodes">
<Syncfusion:NodeViewModel.Annotations>
<syncfusion:NodeViewModel.Annotations>
<!--Observable Collection of AnnotationEditorViewModel-->
<Syncfusion:AnnotationCollection>
<Syncfusion:AnnotationEditorViewModel Content="Begin"/>
</Syncfusion:AnnotationCollection>
</Syncfusion:NodeViewModel.Annotations>
</Syncfusion:NodeViewModel>
<syncfusion:AnnotationCollection>
<syncfusion:AnnotationEditorViewModel Content="Begin"/>
</syncfusion:AnnotationCollection>
</syncfusion:NodeViewModel.Annotations>
</syncfusion:NodeViewModel>
<!--Define the DiagramElement-Connector-->
<Syncfusion:ConnectorViewModel Key="Connectors"
<syncfusion:ConnectorViewModel Key="Connectors"
SourcePoint="100,100"
TargetPoint="200,200" />
</local:SymbolCollection>
Expand All @@ -549,14 +549,14 @@ xmlns:stencil="clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assembly=Syncfus
</stencil:Stencil>

<!--Define DiagramControl to drag and drop elements into the diagram-->
<Syncfusion:SfDiagram x:Name="sfdiagram">
<Syncfusion:SfDiagram.Nodes>
<Syncfusion:NodeCollection/>
</Syncfusion:SfDiagram.Nodes>
<Syncfusion:SfDiagram.Connectors>
<Syncfusion:ConnectorCollection/>
</Syncfusion:SfDiagram.Connectors>
</Syncfusion:SfDiagram>
<syncfusion:SfDiagram x:Name="sfdiagram">
<syncfusion:SfDiagram.Nodes>
<syncfusion:NodeCollection/>
</syncfusion:SfDiagram.Nodes>
<syncfusion:SfDiagram.Connectors>
<syncfusion:ConnectorCollection/>
</syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>
{% endhighlight %}

{% highlight c# %}
Expand Down Expand Up @@ -644,13 +644,17 @@ Declare the style for node, connector, symbol, and symbol group to visualize the

{% tabs %}
{% highlight xaml %}

<!--Namespace for stencil-->
xmlns:stencil="clr-namespace:syncfusion.UI.Xaml.Diagram.Stencil;assembly=syncfusion.SfDiagram.WPF"

<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
</ResourceDictionary.MergedDictionaries>

<!--Style for Node-->
<Style TargetType="Syncfusion:Node">
<Style TargetType="syncfusion:Node">
<Setter Property="ShapeStyle">
<Setter.Value>
<Style TargetType="Path">
Expand All @@ -662,7 +666,7 @@ Declare the style for node, connector, symbol, and symbol group to visualize the
</Style>

<!--Style for Connector-->
<Style TargetType="Syncfusion:Connector">
<Style TargetType="syncfusion:Connector">
<Setter Property="TargetDecoratorStyle">
<Setter.Value>
<Style TargetType="Path">
Expand Down Expand Up @@ -736,17 +740,17 @@ WPF Diagram (SfDiagram) provides support to auto-arrange the nodes in the diagra

#### Business object (employee information)

Define employee information as collection of data. The following code example shows the employee information whose, EmpId is used as an unique identifier and ParentId is used to identify the person to whom an employee report to, in the organization.
Define employee information as collection of data. The following code example shows the employee information whose, `EmpId` is used as an unique identifier and `ParentId` is used to identify the person to whom an employee report to, in the organization.

{% tabs %}
{% highlight xaml %}
<!--Initializes the DataSource -->
<local:Employees x:Key="employees">
<local:Employee EmpId="1" ParentId="" Designation="CEO"/>
<local:Employee EmpId="2" ParentId="1" Designation="Project Manager1"/>
<local:Employee EmpId="3" ParentId="1" Designation="Project Manager2"/>
<local:Employee EmpId="4" ParentId="2" Designation="Engineer1"/>
<local:Employee EmpId="5" ParentId="3" Designation="Engineer2"/>
<local:Employee EmpId="1" ParentId="" Designation="CEO"/>
<local:Employee EmpId="2" ParentId="1" Designation="Project Manager1"/>
<local:Employee EmpId="3" ParentId="1" Designation="Project Manager2"/>
<local:Employee EmpId="4" ParentId="2" Designation="Engineer1"/>
<local:Employee EmpId="5" ParentId="3" Designation="Engineer2"/>
</local:Employees>
{% endhighlight %}

Expand All @@ -767,7 +771,6 @@ public class Employee
{
public Employee()
{

}
public string EmpId { get; set; }
public string ParentId { get; set; }
Expand All @@ -783,19 +786,19 @@ public class Employees:ObservableCollection<Employee>

#### Map DataSource with Diagram

You can configure the above “Employee Information” with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example shows how dataSourceSettings is used to map ID , ParentId and DataSource with property name identifiers for employee information.
You can configure the above “Employee Information” with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example shows how dataSourceSettings is used to map [`Id`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DataSourceSettings.html#Syncfusion_UI_Xaml_Diagram_DataSourceSettings_Id) , [`ParentId`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DataSourceSettings.html#Syncfusion_UI_Xaml_Diagram_DataSourceSettings_ParentId) and [`DataSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.DataSourceSettings.html#Syncfusion_UI_Xaml_Diagram_DataSourceSettings_DataSource) with property name identifiers for employee information.

{% tabs %}
{% highlight xaml %}

<!--Initializes the DataSourceSettings -->
<Syncfusion:DataSourceSettings x:Key="DataSourcesettings"
<syncfusion:DataSourceSettings x:Key="DataSourcesettings"
DataSource="{StaticResource employees}"
ParentId="ParentId" Id="EmpId" />
<!--Map the DataSourceSettings class with Diagram-->
<Syncfusion:SfDiagram x:Name="sfdiagram"
<syncfusion:SfDiagram x:Name="sfdiagram"
DataSourceSettings="{StaticResource DataSourcesettings}"/>
</Syncfusion:SfDiagram>
</syncfusion:SfDiagram>
{% endhighlight %}

{% highlight c# %}
Expand Down Expand Up @@ -825,7 +828,7 @@ To create an organizational chart, TreeLayout type should be set to `LayoutType.
{% highlight xaml %}

<!--Style for Connector-->
<Style TargetType="Syncfusion:Connector">
<Style TargetType="syncfusion:Connector">
<Setter Property="ConnectorGeometryStyle">
<Setter.Value>
<Style TargetType="Path">
Expand All @@ -847,7 +850,7 @@ To create an organizational chart, TreeLayout type should be set to `LayoutType.
</Style>

<!--Style for Node-->
<Style TargetType="Syncfusion:Node">
<Style TargetType="syncfusion:Node">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
Expand All @@ -865,23 +868,23 @@ To create an organizational chart, TreeLayout type should be set to `LayoutType.
</Style>

<!--Initializes the Layout-->
<Syncfusion:DirectedTreeLayout x:Key="treeLayout" Orientation="TopToBottom"
<syncfusion:DirectedTreeLayout x:Key="treeLayout" Orientation="TopToBottom"
HorizontalSpacing="50" Type="Organization"/>

<!--Initializes the LayoutManager-->
<Syncfusion:LayoutManager x:Key="LayoutManager" Layout="{StaticResource treeLayout}" />
<syncfusion:LayoutManager x:Key="LayoutManager" Layout="{StaticResource treeLayout}" />

<!--Map the DataSourceSettings and LayoutManager class with Diagram-->
<Syncfusion:SfDiagram x:Name="sfdiagram"
<syncfusion:SfDiagram x:Name="sfdiagram"
DataSourceSettings="{StaticResource DataSourcesettings}"
LayoutManager="{StaticResource LayoutManager}">
<Syncfusion:SfDiagram.Nodes>
<Syncfusion:NodeCollection/>
</Syncfusion:SfDiagram.Nodes>
<Syncfusion:SfDiagram.Connectors>
<Syncfusion:ConnectorCollection/>
</Syncfusion:SfDiagram.Connectors>
</Syncfusion:SfDiagram>
<syncfusion:SfDiagram.Nodes>
<syncfusion:NodeCollection/>
</syncfusion:SfDiagram.Nodes>
<syncfusion:SfDiagram.Connectors>
<syncfusion:ConnectorCollection/>
</syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>

{% endhighlight %}

Expand Down Expand Up @@ -922,7 +925,7 @@ SfDiagram supports various built-in themes. Refer to the below links to apply th

![WPF Diagram Theme](getting-started_images\wpf-diagram-theme.jpg)

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

Expand Down
Binary file modified wpf/diagram/getting-started_images/wpf-diagram-interact-with-stencil.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified wpf/diagram/getting-started_images/wpf-diagram-stencil-output.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.