Merge pull request #257 from syncfusion-content/943738_UGUpdate

Add the image and update the code for the CenterButtonSettings.

Author: naveenkumar-sanjeevirayan

maui-toolkit/TabView/CenterButton-Customization.md

@@ -46,20 +46,14 @@ You can customize the center button using the properties of `CenterButtonSetting
 {% highlight xaml %}
 
 <tabView:SfTabView.CenterButtonSettings>
-     <tabView:CenterButtonSettings Title="Home" 
-                              Height="70" 
-                              Width="80"
-                              Background="White" 
-                              Stroke="HotPink" 
-                              StrokeThickness="3" 
-                              CornerRadius="10" 
-                              TextColor="Green" 
-                              ImageSource="image.png" 
-                              ImageSize="24" 
-                              DisplayMode="ImageWithText" 
-                              FontFamily="SevillanaRegular" 
-                              FontAttributes="Bold" 
-                              FontSize="16" />
+  <tabView:CenterButtonSettings Height="45"
+                                Width="45"
+                                CornerRadius="50"
+                                Background="#6750A4"
+                                ImageSize="25"
+                                DisplayMode="Image"
+                                ImageSource="image.png">
+  </tabView:CenterButtonSettings>
 </tabView:SfTabView.CenterButtonSettings>
 
 {% endhighlight %}
@@ -72,16 +66,13 @@ public MainPage()
     SfTabView tabView = new SfTabView();
     CenterButtonSettings centerButtonSettings = new CenterButtonSettings()
     {
-        Height = 80,
-        Width = 100,
-        Title = "Center Button",
-        FontAttributes = FontAttributes.Bold,
-        TextColor = Colors.Green,
-        DisplayMode = CenterButtonDisplayMode.ImageWithText,
-        ImageSource = "Home.png",
-        ImageSize = 24,
-        FontFamily = "SevillanaRegular",
-        CornerRadius = new CornerRadius(10),
+        Height = 45,
+        Width = 45,
+        DisplayMode = CenterButtonDisplayMode.Image,
+        ImageSize = 25,
+        Background = Color.FromArgb("#6750A4");
+        CornerRadius = new CornerRadius(50),
+        ImageSource = "image.png"        
     };
 
     tabView.CenterButtonSettings = centerButtonSettings;
@@ -90,6 +81,8 @@ public MainPage()
 
 {% endtabs %}
 
+![.NET MAUI Customize the center button](images/CenterButton-Customizaton.jpg) 
+
 ## Center button tapped event
 
 When the center button is tapped, the `CenterButtonTapped` event occurs. Using this event we can set alert messages.