diff --git a/wpf/Image-Editor/Toolbar-Customization.md b/wpf/Image-Editor/Toolbar-Customization.md
index 992d2d7b04..73e3fb490e 100644
--- a/wpf/Image-Editor/Toolbar-Customization.md
+++ b/wpf/Image-Editor/Toolbar-Customization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Toolbar customization in syncfusion SfImageEditor WPF.
-description: This section describes how to customize the toolbar and toolbar item selected event in SfImageEditor control for WPF platform.
+title: Toolbar Customization in Syncfusion SfImageEditor WPF
+description: This section describes how to customize the toolbar and handle the toolbar item selected event in the SfImageEditor control for the WPF platform.
 platform: wpf
 control: SfImageEditor
 documentation: ug
@@ -17,74 +17,114 @@ Toolbar can be made visible or hidden using the `IsToolbarVisiblity` property in
 
 {% tabs %} 
 
-{% highlight xaml %} 
+{% highlight xaml %}
 
-  <editor:SfImageEditor.ToolbarSettings>
-        <editor:ToolbarSettings IsToolbarVisiblity="True" />
-  </editor:SfImageEditor.ToolbarSettings>
+<Window x:Class="SfImageEditorSample.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
+        Title="SfImageEditor Sample" Height="600" Width="800">
+    <Grid>
+        <editor:SfImageEditor x:Name="editor">
+            <editor:SfImageEditor.ToolbarSettings>
+                <editor:ToolbarSettings IsToolbarVisiblity="True" />
+            </editor:SfImageEditor.ToolbarSettings>
+        </editor:SfImageEditor>
+    </Grid>
+</Window>
 
 {% endhighlight %}
 
-{% highlight C# %} 
+{% highlight C# %}
+
+using Syncfusion.UI.Xaml.ImageEditor;
 
-editor.ToolbarSettings.IsToolbarVisibility = true;
+editor.ToolbarSettings.IsToolbarVisiblity = true;
 
 {% endhighlight %}
 
-{% endtabs %} 
+{% endtabs %}
 
-### Add a item
+### Add an item
 
-You can add additional items to the toolbar and can perform your own operation. To add an additional item, specify the toolbar item, and add it in the ToolbarItems collection as demonstrated in following code snippet. You can specify your own template using the `IconTemplate` property in `ToolbarItem`.
+You can add additional items to the toolbar and perform your own operation. To add an additional item, specify the toolbar item, and add it to the `ToolbarItems` collection as demonstrated in the following code snippet. You can specify your own template using the `IconTemplate` property in `ToolbarItem`.
 
 {% tabs %} 
 
-{% highlight xaml %} 
-
-  <Grid.Resources>
-            <DataTemplate x:Key="template">
-                <TextBlock Text="New Item"></TextBlock>
-            </DataTemplate>
-  </Grid.Resources>
+{% highlight xaml %}
+
+<Window x:Class="SfImageEditorSample.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
+        Title="SfImageEditor Sample" Height="600" Width="800">
+    <Window.Resources>
+        <DataTemplate x:Key="template">
+            <TextBlock Text="New Item" />
+        </DataTemplate>
+    </Window.Resources>
+    <Grid x:Name="grid">
+        <editor:SfImageEditor x:Name="editor">
+            <editor:SfImageEditor.ToolbarSettings>
+                <editor:ToolbarSettings x:Name="toolbarSettings" />
+            </editor:SfImageEditor.ToolbarSettings>
+        </editor:SfImageEditor>
+    </Grid>
+</Window>
 
 {% endhighlight %}
 
-{% highlight C# %} 
+{% highlight C# %}
+
+using Syncfusion.UI.Xaml.ImageEditor;
+using System.Windows;
 
 editor.ToolbarSettings.ToolbarItems.Add(new ToolbarItem() { IconTemplate = grid.Resources["template"] as DataTemplate });
 
 {% endhighlight %}
 
-{% endtabs %} 
+{% endtabs %}
 
 ### Customization
 
-You can change the [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_Background) and [`BorderColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_BorderColor) of the toolbar. Also, you can change the height of the main toolbar using the [`HeaderToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_HeaderToolbarHeight) property, and the height of the sub toolbar can be changed using the [`SubItemToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_SubItemToolbarHeight) property, and the footer toolbar height can be changed using the [`FooterToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_FooterToolbarHeight).
+You can change the [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_Background) and [`BorderColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_BorderColor) of the toolbar. Also, you can change the height of the main toolbar using the [`HeaderToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_HeaderToolbarHeight) property, the height of the sub-toolbar can be changed using the [`SubItemToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_SubItemToolbarHeight) property, and the footer toolbar height can be changed using the [`FooterToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_FooterToolbarHeight) property.
 
 This can be done as in the following code snippet.
 
 {% tabs %} 
 
-{% highlight xaml %} 
+{% highlight xaml %}
 
-    <editor:SfImageEditor.ToolbarSettings>
-                <editor:ToolbarSettings IsToolbarVisibility="True" HeaderToolbarHeight="36" 
-                                        FooterToolbarHeight="36"  Background="#DEDEDE" BorderColor="Black"
-                                        />
-    </editor:SfImageEditor.ToolbarSettings>
+<Window x:Class="SfImageEditorSample.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
+        Title="SfImageEditor Sample" Height="600" Width="800">
+    <Grid>
+        <editor:SfImageEditor x:Name="editor">
+            <editor:SfImageEditor.ToolbarSettings>
+                <editor:ToolbarSettings IsToolbarVisiblity="True" HeaderToolbarHeight="36"
+                                        FooterToolbarHeight="36" Background="#DEDEDE" BorderColor="Black" />
+            </editor:SfImageEditor.ToolbarSettings>
+        </editor:SfImageEditor>
+    </Grid>
+</Window>
 
 {% endhighlight %}
 
-{% highlight C# %} 
+{% highlight C# %}
+
+using Syncfusion.UI.Xaml.ImageEditor;
+using System.Windows.Media;
 
- editor.ToolbarSettings.Background= (SolidColorBrush)new BrushConverter().ConvertFromString("#DEDEDE");
-            editor.ToolbarSettings.BorderColor = new SolidColorBrush(Colors.Black);
-            editor.ToolbarSettings.HeaderToolbarHeight = 36;
-            editor.ToolbarSettings.FooterToolbarHeight = 36;
-            editor.ToolbarSettings.IsToolbarVisibility = true;
+editor.ToolbarSettings.Background = (SolidColorBrush)new BrushConverter().ConvertFromString("#DEDEDE");
+editor.ToolbarSettings.BorderColor = new SolidColorBrush(Colors.Black);
+editor.ToolbarSettings.HeaderToolbarHeight = 36;
+editor.ToolbarSettings.FooterToolbarHeight = 36;
+editor.ToolbarSettings.IsToolbarVisiblity = true;
 {% endhighlight %}
 
-{% endtabs %} 
+{% endtabs %}
 
 ![Custom Item](Images/ToolbarCustomization.png) 
 
@@ -92,20 +132,22 @@ This can be done as in the following code snippet.
 
 ### ToolbarItemSelected
 
-This event occurs when an item in the toolbar is selected. `ToolbarItemSelectedEventArgs` is the parameter. You can control the selected item operation by setting the Cancel property to true. You can also get the information about the ToolbarItem.
+This event occurs when an item in the toolbar is selected. `ToolbarItemSelectedEventArgs` is the parameter. You can control the selected item operation by setting the `Cancel` property to `true`. You can also get the information about the `ToolbarItem`.
 
 {% tabs %} 
 
-{% highlight C# %} 
+{% highlight C# %}
 
-  private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
-        {          
-           e.Cancel = true;
-        }
+using Syncfusion.UI.Xaml.ImageEditor;
+
+private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
+{
+    e.Cancel = true;
+}
 
 {% endhighlight %}
 
-{% endtabs %} 
+{% endtabs %}
 
 ![Custom Item](Images/ToolbarCustomItem.png) 
 
@@ -117,7 +159,7 @@ You can browse images in a local folder and load them in the Image Editor using
 
 ## Commands
 
-Invoke commands from the custom toolbar to customize toolbar items of the image editor. Must set the `CommandTarget` while using the Command.
+Invoke commands from the custom toolbar to perform toolbar item operations of the image editor. The `CommandTarget` must be set when using the `Command`.
 
 <table>
 <tr>
@@ -170,23 +212,29 @@ This can be done as in the below code snippet.
 
 {% tabs %} 
 
-{% highlight xaml %} 
+{% highlight xaml %}
 
+<Window x:Class="SfImageEditorSample.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
+        Title="SfImageEditor Sample" Height="600" Width="800">
     <Grid>
         <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="200"/>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="200" />
         </Grid.ColumnDefinitions>
         <editor:SfImageEditor Grid.Column="0" x:Name="imageEditor" ImageSource="Assets\RoadView.jpeg">
             <editor:SfImageEditor.ToolbarSettings>
-                <editor:ToolbarSettings IsToolbarVisiblity="False"></editor:ToolbarSettings>
+                <editor:ToolbarSettings IsToolbarVisiblity="False" />
             </editor:SfImageEditor.ToolbarSettings>
         </editor:SfImageEditor>
-		
-          <Button  Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White"
-                    Width="Auto" CommandTarget="{Binding ElementName=imageEditor}"
-                    Content="Save" Command="{x:Static editor:ImageEditorCommands.Save}"></Button>
+
+        <Button Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White"
+                Width="Auto" CommandTarget="{Binding ElementName=imageEditor}"
+                Content="Save" Command="{x:Static editor:ImageEditorCommands.Save}" />
     </Grid>
+</Window>
 {% endhighlight %}
 
 {% endtabs %}