syncfusion-content · mohamedks · Oct 21, 2022 · Oct 18, 2022 · Oct 19, 2022 · Oct 19, 2022
diff --git a/wpf/Add-Syncfusion-Controls.md b/wpf/Add-Syncfusion-Controls.md
@@ -18,27 +18,28 @@ The Syncfusion WPF controls can be added in a Visual Studio projects by using ei
 
 Syncfusion UI for WPF are added automatically to the Visual Studio Toolbox during installation. The following steps help you to add the required Essential WPF control using drag and drop from the Toolbox. For example: **SfTextBoxExt**
 
-1) Create a WPF project in Visual Studio.
+1. Create a WPF project in Visual Studio.
 
-2) Find **SfTextBoxExt** by typing the name of the "SfTextBoxExt" in the search box.
+2. Find **SfTextBoxExt** by typing the name of the "SfTextBoxExt" in the search box.
 
 ![Drag and drop from toolbox](ThroughDragndDrop_images/AddSyncfusionControls_img1.jpeg)
 
-3) Drag **SfTextBoxExt** and drop it in the designer.
+3. Drag **SfTextBoxExt** and drop it in the designer.
 
 ![WPF TextBoxExt control](ThroughDragndDrop_images/AddSyncfusionControls_img2.jpeg)
 
 ### Using XAML
 
 The following steps help you to add a required Essential WPF Control using XAML Code, for example: **SfTextBoxExt**.
 
-1) Create a WPF project in Visual Studio and refer the following assemblies:
+1. Create a WPF project in Visual Studio and refer the following assemblies:
 
-* Syncfusion.SfInput.WPF.dll
-* Syncfusion.SfShared.WPF.dll
+    * Syncfusion.SfInput.WPF.dll
+    * Syncfusion.SfShared.WPF.dll
 
-2) Include an XML namespace for the above assemblies to the Main window.
+2. Include an XML namespace for the above assemblies to the Main window.
 
+{% capture codesnippet1 %}
 {% tabs %}
 
 {% highlight XAML %}
@@ -51,9 +52,12 @@ The following steps help you to add a required Essential WPF Control using XAML
 {% endhighlight %}
 
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet1 | OrderList_Indent_Level_1 }}
 
-3) Now, add the SfTextBoxExt control with a required optimal name using the included namespace.
+3. Now, add the SfTextBoxExt control with a required optimal name using the included namespace.
 
+{% capture codesnippet2 %}
 {% tabs %}
 
 {% highlight XAML %}
@@ -63,18 +67,21 @@ The following steps help you to add a required Essential WPF Control using XAML
 {% endhighlight %}
 
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet2 | OrderList_Indent_Level_1 }}
 
 ## Using Code-Behind
 
 Syncfusion UI for WPF can be added at runtime using C# / VB. The following steps help you to add required Essential WPF control using code. For example: **SfTextBoxExt**.
 
-1) Create a WPF project in Visual Studio and refer to the following assemblies:
+1. Create a WPF project in Visual Studio and refer to the following assemblies:
 
-* Syncfusion.SfInput.WPF.dll
-* Syncfusion.SfShared.WPF.dll
+    * Syncfusion.SfInput.WPF.dll
+    * Syncfusion.SfShared.WPF.dll
 
-2) Create an instance of **SfTextBoxExt**, using its namespace.
+2. Create an instance of **SfTextBoxExt**, using its namespace.
 
+{% capture codesnippet3 %}
 {% tabs %}
 
 {% highlight C# %}
@@ -90,9 +97,12 @@ Dim textBoxExt1 As New Syncfusion.Windows.Controls.Input.SfTextBoxExt()
 {% endhighlight %}
 
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet3 | OrderList_Indent_Level_1 }}
 
-3) Set the Size and Alignment of the control with required value.
+3. Set the Size and Alignment of the control with required value.
 
+{% capture codesnippet4 %}
 {% tabs %}
 
 {% highlight C# %}
@@ -116,9 +126,12 @@ textBoxExt1.HorizontalAlignment = HorizontalAlignment.Center
 {% endhighlight %}
 
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet4 | OrderList_Indent_Level_1 }}
 
-4) Add the created instance to the parent window (or the needed layout panels).
+4. Add the created instance to the parent window (or the needed layout panels).
 
+{% capture codesnippet5 %}
 {% tabs %}
 
 {% highlight C# %}
@@ -136,6 +149,8 @@ Me.Content = textBoxExt1
 {% endhighlight %}
 
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet5 | OrderList_Indent_Level_1 }}
 
 ![WPF TextBoxExt control](ThroughDragndDrop_images/AddSyncfusionControls_img3.jpeg)
 
@@ -149,15 +164,15 @@ I> The Syncfusion WPF templates are available from v16.1.0.24.
 
 The following steps direct you to create the Syncfusion WPF project using the Visual Studio Project Template. 
 
-1) To create a Syncfusion WPF project, choose New Project-> Syncfusion->Windows->Syncfusion WPF Application from Visual Studio.
+1. To create a Syncfusion WPF project, choose New Project-> Syncfusion->Windows->Syncfusion WPF Application from Visual Studio.
 
 ![Create WPF application](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-1.png)
 
-2) Name the Project, choose the destination location when required and set the framework of the project, then click OK.  
+2. Name the Project, choose the destination location when required and set the framework of the project, then click OK.  
 
 N> Minimum target Framework is 4.0 for Syncfusion WPF project templates. 
 
-3) Choose the options to configure the Syncfusion WPF Application by using the following Project Configuration Wizard.  
+3. Choose the options to configure the Syncfusion WPF Application by using the following Project Configuration Wizard.  
 
 ![WPF Project configuration wizard](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-2.png)
 
@@ -179,12 +194,12 @@ N> Minimum target Framework is 4.0 for Syncfusion WPF project templates.
 
 ![Select the WPF Control](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-6.png)
 
-4) Once the Project Configuration Wizard is done, the Syncfusion WPF project is created with required references and XAML. 
+4. Once the Project Configuration Wizard is done, the Syncfusion WPF project is created with required references and XAML. 
 
 ![Added assemblies for WPF control](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-7.png)
 
 ![Shows project folder for added control](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-8.png)
 
-5) Then, Syncfusion licensing registration required message box will be shown as follows, if you have installed the trial setup or NuGet packages since Syncfusion introduced the licensing system with the 2018 Volume 2 (v16.2.0.41) Essential Studio release. Please navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion license key for your project. Refer to this [blog](https://blog.syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx) post for understanding the licensing changes introduced in Essential Studio.
+5. Then, Syncfusion licensing registration required message box will be shown as follows, if you have installed the trial setup or NuGet packages since Syncfusion introduced the licensing system with the 2018 Volume 2 (v16.2.0.41) Essential Studio release. Please navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion license key for your project. Refer to this [blog](https://blog.syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx) post for understanding the licensing changes introduced in Essential Studio.
 
 ![Shows syncfusion license registration message](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-9.png)
diff --git a/wpf/Autocomplete/Getting-Started.md b/wpf/Autocomplete/Getting-Started.md
@@ -13,7 +13,7 @@ documentation: ug
 
 Refer to this [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#sftextboxext) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.
 
-Refer to this [How to install nuget packages](https://help.syncfusion.com/wpf/nuget-packages) documentation to find more details about installing the NuGet package in a WPF application.
+Refer to this [How to install nuget packages](https://help.syncfusion.com/wpf/welcome-to-syncfusion-essential-wpf) documentation to find more details about installing the NuGet package in a WPF application.
 
 ## Creating a simple application
 
@@ -42,6 +42,7 @@ To add the control manually in XAML, follow the given steps:
 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page.
 3. Declare the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control in the XAML page.
 
+{% capture codesnippet1 %}
 {% tabs %}
 {% highlight XAML %}
 
@@ -64,6 +65,8 @@ To add the control manually in XAML, follow the given steps:
 
 {% endhighlight %}
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet1 | OrderList_Indent_Level_1 }}
 
 ### Add a control manually in C#
 
@@ -75,6 +78,7 @@ To add the control manually in C#, follow the given steps:
 2. Import the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) namespace using **Syncfusion.Windows.Controls.Input;**.
 3. Create an [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) instance, and add it to the window.
 
+{% capture codesnippet2 %}
 {% tabs %}
 {% highlight C# %}
 
@@ -102,6 +106,8 @@ namespace TextBoxExt
 
 {% endhighlight %}
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet2 | OrderList_Indent_Level_1 }}
 
 ![GettingStarted](GettingStarted_images/GettingStarted.png)
 
@@ -111,8 +117,9 @@ AutoComplete is a data-bound control. So before create binding to the control, y
 
 For illustration, let us create a textbox, which will populate a list of employees.
 
-1.Create data object class named **Employee** and declare properties as shown below,
+1. Create data object class named **Employee** and declare properties as shown below,
 
+{% capture codesnippet3 %}
 {% highlight c# %}
 
 public class Employee
@@ -134,10 +141,13 @@ public class Employee
 }
 
 {% endhighlight %}
+{% endcapture %}
+{{ codesnippet3 | OrderList_Indent_Level_1 }}
 
 
-2.Create a **EmployeeViewModel** class with Employees property and Employees property is initialized with several data objects in constructor.
+2. Create a **EmployeeViewModel** class with Employees property and Employees property is initialized with several data objects in constructor.
 
+{% capture codesnippet4 %}
 {% highlight c# %}
 
  public class EmployeeViewModel
@@ -165,12 +175,15 @@ public class Employee
  }
 
 {% endhighlight %}
+{% endcapture %}
+{{ codesnippet4 | OrderList_Indent_Level_1 }}
 
-3.To populate the AutoComplete with data, set the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property to `IEnumerable` implementation.
+3. To populate the AutoComplete with data, set the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property to `IEnumerable` implementation.
 
 
 Bind the collection created in previous step to [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property in XAML by setting EmployeeViewModel as `DataContext`.
 
+{% capture codesnippet5 %}
 {% tabs %}
 {% highlight xaml %}
 
@@ -215,6 +228,8 @@ this.Content = textBoxExt;
 {% endhighlight %}
 
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet5 | OrderList_Indent_Level_1 }}
 
 For further details, refer to [AutoComplete source](https://help.syncfusion.com/wpf/autocomplete/autocomplete-and-filtering#autocomplete-source).
 

diff --git a/wpf/Badge/Getting-Started.md b/wpf/Badge/Getting-Started.md
@@ -34,6 +34,7 @@ To add the `SfBadge` manually in XAML, follow these steps:
 
 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `SfBadge` in XAML page.
 
+{% capture codesnippet1 %}
 {% tabs %}
 {% highlight XAML %}
 
@@ -52,6 +53,8 @@ To add the `SfBadge` manually in XAML, follow these steps:
 
 {% endhighlight %}
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet1 | OrderList_Indent_Level_1 }}
 
 ## Adding WPF SfBadge via C#
 
@@ -68,6 +71,7 @@ To add the `SfBadge` control manually in C#, follow these steps:
 
 4. Declare the `SfBadge` control using C#.
 
+{% capture codesnippet2 %}
 {% tabs %}
 {% highlight C# %}
 
@@ -92,6 +96,8 @@ namespace GettingStarted
 
 {% endhighlight %}
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet2 | OrderList_Indent_Level_1 }}
 
 ## Adding badge for a Button
 

diff --git a/wpf/Badge/Overview.md b/wpf/Badge/Overview.md
@@ -17,12 +17,12 @@ documentation: ug
 
 ## Key features
 
-* Position - Position the `Badge` text around the `Badge` content.
-* Predefined colors - Customize the `Badge` background with predefined colors for the success, warning, error and information states.
-* Animation - Use animations for `Badge` text.
-* Predefined and custom shapes for `Badge` control.
-* Rotation - Rotate the `Badge` to any angle.
-* Alignment - Align the `Badge` at any position
-* Custom UI - Customized UI for control and its content.
+* **Position** - Position the `Badge` text around the `Badge` content.
+* **Predefined colors** - Customize the `Badge` background with predefined colors for the success, warning, error and information states.
+* **Animation** - Use animations for `Badge` text.
+* **Shapes**-Predefined and custom shapes for `Badge` control.
+* **Rotation** - Rotate the `Badge` to any angle.
+* **Alignment** - Align the `Badge` at any position
+* **Custom UI** - Customized UI for control and its content.
 
 
diff --git a/wpf/Breadcrumb/Command-Binding.md b/wpf/Breadcrumb/Command-Binding.md
@@ -15,6 +15,7 @@ The steps to listen to the command binding are as follows:
 
 1. Create a DelegateCommand class inherited from ICommand, which will be used in the ViewModel sample class.
 
+{% capture codesnippet1 %}
 {% tabs %}
 {% highlight c# %}
 
@@ -49,9 +50,12 @@ public class DelegateCommand : ICommand
 
 {% endhighlight %}
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet1 | OrderList_Indent_Level_1 }}
 
 2. Create the ViewModel sample class, to bind the command in the sample WPF application.
 
+{% capture codesnippet2 %}
 {% tabs %}
 {% highlight c# %}
 
@@ -90,10 +94,13 @@ public class ViewModel : INotifyPropertyChanged
 
 {% endhighlight %}
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet2 | OrderList_Indent_Level_1 }}
 
 1. Bind the command in the HierarchyNavigator control.
 2. To do this, create a new instance of the ViewModel sample class and set DataContext for the parent StackPanel. This will reflect changes in the children. Whenever the selected item changes, the TextBox Text value will change.
 
+{% capture codesnippet3 %}
 {% tabs %}
 {% highlight xaml %}
 
@@ -111,3 +118,5 @@ public class ViewModel : INotifyPropertyChanged
 
 {% endhighlight %}
 {% endtabs %}
+{% endcapture %}
+{{ codesnippet3 | OrderList_Indent_Level_1 }}