Merge pull request #1610 from syncfusion-content/925962-updateImageEditordocument

925962 - Update Text Settings content in Image Editor UG document.

Author: Jeyasri-Murugan

wpf/Image-Editor/Images/text-setting-toolbar-in-wpf-image-editor.gif

@@ -18,10 +18,13 @@ You can annotate an image by adding the desired text to it. This can be done in
 
 To add text, click the Text icon (T) in the toolbar. Now, the text will be added at the center of the image along with the selection handle, which helps in resizing. By default, the added text will be in pan mode, so you can position the text anywhere by dragging it. By clicking the text, it will change into typing mode, and you can edit the text directly. Click outside to exit from typing mode.
 
+![Text-settings-toolbar-in-WPF-ImageEditor](Images/text-setting-toolbar-in-wpf-image-editor.gif)   
+
 ## Customization
 
 The following properties of the added text can be customized:
 
+* Background
 * Font family
 * Font size
 * Font color
@@ -32,6 +35,10 @@ Upon selecting the Text icon in the toolbar, a sub toolbar will be generated bel
 
 >N Text needs to be selected to apply the customization from the sub toolbar.
 
+### Background
+
+You can customize the text background color by clicking on the fill icon, choosing a color from the color picker, and applying it to the background.
+
 ### Font family
 
 Font family icon lists out the predefined system font families. You can select the required font family.
@@ -52,7 +59,6 @@ You can make the text bold, italic, or underline by clicking the corresponding i
 
 Text can be aligned to the left, center, or right by clicking the corresponding icon. By default, text will be aligned at the left.
 
-
 ## Adding text programmatically
 
 You can add text to an image using the AddText method programmatically. This method requires the following parameters:
@@ -61,19 +67,30 @@ You can add text to an image using the AddText method programmatically. This met
 * TextSettings - Customizes the text.
 
 {% tabs %} 
+{% highlight XAML %} 
 
-{% highlight C# %} 
-
-editor.AddText("Hello", new TextSettings());
+<editor:SfImageEditor x:Name="editor"                         
+                      Loaded="OnImageEditorLoaded">
+</editor:SfImageEditor>
 
 {% endhighlight %}
+{% highlight C# hl_lines="5" %}
+
+this.editor.Loaded += this.OnImageEditorLoaded;
+
+private void OnImageEditorLoaded(object sender, RoutedEventArgs e)
+{
+    this.editor.AddText("Hello", new TextSettings());
+}
 
+{% endhighlight %}
 {% endtabs %} 
 
 ## Text settings
 
 Using the following properties in TextSettings, text can be customized.
 
+* [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_Background) - Specifies the background color of the text annotation. The default value is `Brush.Transparent.`
 * [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_FontFamily) - Changes the font family of the text.
 * [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_FontSize) - Changes the font size of the text.
 * [`Color`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_Color) - Modifies the font color of the text.
@@ -86,29 +103,40 @@ Using the following properties in TextSettings, text can be customized.
 >N Values of bounds will be in percentage. For example (25, 25, 25, 25) will take the position of 25 percent from the left and top.
 
 {% tabs %} 
+{% highlight XAML %}
 
-{% highlight C# %} 
-
-            TextSettings textSettings = new TextSettings();
-            textSettings.FontFamily = new FontFamily("Century Schoolbook");
-            textSettings.FontSize = 30;
-            textSettings.Color = new SolidColorBrush(Colors.Red);
-            textSettings.TextEffects = TextEffects.Bold | TextEffects.Italic;
-            textSettings.Bounds = new Rect(50, 10, 50, 15);
-            editor.AddText("Good morning", textSettings);
-
-            textSettings = new TextSettings();
-            textSettings.FontFamily = new FontFamily("Bell MT");
-            textSettings.FontSize = 22;
-            textSettings.Color = new SolidColorBrush(Colors.DarkGreen);
-            textSettings.TextEffects =  TextEffects.Italic;
-            textSettings.Bounds = new Rect(50, 23, 30, 15);
-            textSettings.TextAlignment = TextAlignment.Center;
-            editor.AddText("The happiness of your \nlife depend upon the \nquality of your thoughts.", textSettings);
-
+<editor:SfImageEditor x:Name="editor"                         
+                      Loaded="OnImageEditorLoaded">
+</editor:SfImageEditor>
 
 {% endhighlight %}
+{% highlight C# %} 
+       
+this.editor.Loaded += this.OnImageEditorLoaded;
+
+private void OnImageEditorLoaded(object sender, RoutedEventArgs e)
+{
+    TextSettings textSettings = new TextSettings();
+    textSettings.Background = new SolidColorBrush(Colors.Yellow);
+    textSettings.FontFamily = new FontFamily("Century Schoolbook");
+    textSettings.FontSize = 30;
+    textSettings.Color = new SolidColorBrush(Colors.Red);
+    textSettings.TextEffects = TextEffects.Bold | TextEffects.Italic;
+    textSettings.Bounds = new Rect(50, 10, 50, 15);
+    this.editor.AddText("Good morning", textSettings);
+
+    textSettings = new TextSettings();
+    textSettings.Background = new SolidColorBrush(Colors.Ivory);
+    textSettings.FontFamily = new FontFamily("Bell MT");
+    textSettings.FontSize = 22;
+    textSettings.Color = new SolidColorBrush(Colors.DarkGreen);
+    textSettings.TextEffects =  TextEffects.Italic;
+    textSettings.Bounds = new Rect(50, 23, 30, 15);
+    textSettings.TextAlignment = TextAlignment.Center;
+    this.editor.AddText("The happiness of your \nlife depend upon the \nquality of your thoughts.", textSettings);
+}
 
+{% endhighlight %}
 {% endtabs %} 
 
 ![Text](Images/Text.jpg)