Revamp and Standardize User Guide (UG) Structure for .NET MAUI Tools Controls

MAUI/Button/Customization.md

@@ -49,7 +49,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with text color](images/customization-images/Button_textcolor.png)
+![SfButton with text color](Images/customization-images/Button_textcolor.png)
 
 ### Font Size
 
@@ -77,7 +77,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with font size](images/customization-images/Button_fontsize.png)
+![SfButton with font size](Images/customization-images/Button_fontsize.png)
 
 ### Font Attributes
 
@@ -105,7 +105,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with fontattributes](images/customization-images/Button_fontattributes.png)
+![SfButton with fontattributes](Images/customization-images/Button_fontattributes.png)
 
 ### Font Family
 
@@ -133,7 +133,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with fontfamily](images/customization-images/Button_fontfamily.jpg)
+![SfButton with fontfamily](Images/customization-images/Button_fontfamily.jpg)
 
 ### Text Alignment
 
@@ -191,10 +191,10 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![.NET MAUI Button Text Transform](images/customization-images/Button_texttransform.png)
+![.NET MAUI Button Text Transform](Images/customization-images/Button_texttransform.png)
 
 ## LineBreakMode
-The [LineBreakMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_LineBreakMode) allows you to wrap or truncate the text. The default value of this property is `NoWrap`. The following options are available in `LineBreakMode`:
+The [LineBreakMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html#Syncfusion_Maui_Buttons_SfButton_LineBreakMode) allows you to wrap or truncate the text. The default value of this property is `WordWrap`. The following options are available in `LineBreakMode`:
 
  * `NoWrap` - Avoids the text wrap.
  * `WordWrap` - Wraps the text by words.
@@ -230,7 +230,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with LineBreakMode](images/customization-images/Button_linebreakmode.png)
+![SfButton with LineBreakMode](Images/customization-images/Button_linebreakmode.png)
 
 ## Background Customization
 
@@ -262,7 +262,7 @@ this.Content = button;
 
 N> When defining the background colors of the SfButton control, always use the `Background` property instead of the `BackgroundColor` property.
 
-![SfButton with background color](images/customization-images/Button_backgroundcolor.png)
+![SfButton with background color](Images/customization-images/Button_backgroundcolor.png)
 
 ### Background Image
 
@@ -294,7 +294,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![.NET MAUI Button with background image](images/customization-images/Button_backgroundimage.png)
+![.NET MAUI Button with background image](Images/customization-images/Button_backgroundimage.png)
 
 ### Stroke
 
@@ -324,7 +324,7 @@ this.Content = button;
 
 N> To display the `Stroke` color, you must also define the `StrokeThickness` property (default value is `0`).
 
-![SfButton with stroke](images/customization-images/Button_border.png)
+![SfButton with stroke](Images/customization-images/Button_border.png)
 
 ### StrokeThickness
 
@@ -352,7 +352,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with strokethickness](images/customization-images/Button_borderthickness.png)
+![SfButton with strokethickness](Images/customization-images/Button_borderthickness.png)
 
 ### CornerRadius
 
@@ -378,7 +378,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with cornerradius](images/customization-images/Button_cornerradius.png)
+![SfButton with cornerradius](Images/customization-images/Button_cornerradius.png)
 
 ## Image Customization
 
@@ -412,7 +412,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image](images/customization-images/Button_icon.png)
+![SfButton with image](Images/customization-images/Button_icon.png)
 
 ### ShowIcon
 
@@ -524,7 +524,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image with icon image with end alignment](images/customization-images/Button_imagealignment_end.png)
+![SfButton with image with icon image with end alignment](Images/customization-images/Button_imagealignment_end.png)
 
 **Start image alignment in `Button`**
 
@@ -567,7 +567,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image with icon image with start alignment](images/customization-images/Button_imagealignment_start.png)
+![SfButton with image with icon image with start alignment](Images/customization-images/Button_imagealignment_start.png)
 
 **Top image alignment in `Button`**
 
@@ -610,7 +610,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image with icon image with top alignment](images/customization-images/Button_imagealignment_top.png)
+![SfButton with image with icon image with top alignment](Images/customization-images/Button_imagealignment_top.png)
 
 **Bottom image alignment in `Button`**
 
@@ -653,7 +653,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image at the bottom of the text](images/customization-images/Button_imagealignment_bottom.png)
+![SfButton with image at the bottom of the text](Images/customization-images/Button_imagealignment_bottom.png)
 
 **Default image alignment in `Button`**
 
@@ -696,7 +696,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image with icon image with default alignment](images/customization-images/Button_imagealignment_default.png)
+![SfButton with image with icon image with default alignment](Images/customization-images/Button_imagealignment_default.png)
 
 **Left image alignment in `Button`**
 
@@ -741,7 +741,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image with icon image with left alignment](images/customization-images/Button_imagealignment_left.png)
+![SfButton with image with icon image with left alignment](Images/customization-images/Button_imagealignment_left.png)
 
 **Right image alignment in `Button`**
 
@@ -785,11 +785,11 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![SfButton with image with icon image with right alignment](images/customization-images/Button_imagealignment_right.png)
+![SfButton with image with icon image with right alignment](Images/customization-images/Button_imagealignment_right.png)
 
 ## EnableRippleEffect
 
-The [EnableRippleEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_EnableRippleEffect) property is used to control the presence of the ripple effect. The default value is `false`.
+The [EnableRippleEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_EnableRippleEffect) property is used to control the presence of the ripple effect. The default value is `true`.
 
 {% tabs %}
 {% highlight xaml %}
@@ -811,7 +811,7 @@ this.Content = button;
 {% endhighlight %}
 {% endtabs %}
 
-![.NET MAUI RippleEffect support](images/customization-images/Button_EnableRippleEffect.gif)
+![.NET MAUI RippleEffect support](Images/customization-images/Button_EnableRippleEffect.gif)
 
 ## Gradient Background
 
@@ -896,7 +896,7 @@ this.Content = radialButton;
 {% endhighlight %}
 {% endtabs %}
 
-![.NET MAUI gradient support](images/customization-images/Button_gradient.jpg)
+![.NET MAUI gradient support](Images/customization-images/Button_gradient.jpg)
 
 ## Command
 
@@ -962,4 +962,4 @@ public class CommandDemoViewModel : INotifyPropertyChanged
 ## See also
 
 - [Events](https://help.syncfusion.com/maui/button/events)
-- [Visual States](https://help.syncfusion.com/maui/button/visual-states)
+- [Visual States](https://help.syncfusion.com/maui/button/visual-states)

MAUI/Button/Getting-Started.md

@@ -143,7 +143,7 @@ button.TextColor = Colors.White;
 
 The following screenshot illustrates the result of the above code.
 
-![.NET MAUI Button](images/customization-images/Button_textcolor.png)
+![.NET MAUI Button](Images/customization-images/Button_textcolor.png)
 
 You can download the Button Getting Started sample from [GitHub](https://github.com/SyncfusionExamples/maui-button-samples)
 

MAUI/Button/Right-To-Left.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Right-to-Left in .NET MAUI Button
 
-The [.NET MAUI Button`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) supports right-to-left (RTL) layout by setting [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.flowdirection?view=net-maui-11.0) to `RightToLeft`, or by changing the device language to an RTL language such as Arabic or Hebrew.
+The [`.NET MAUI Button`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) supports right-to-left (RTL) layout by setting [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.flowdirection?view=net-maui-11.0) to `RightToLeft`, or by changing the device language to an RTL language such as Arabic or Hebrew.
 
 ## Prerequisites
 
@@ -51,10 +51,10 @@ this.Content = button;
 
 The following image shows the result of the code above:
 
-![.NET MAUI Button with right-to-left layout](images/right-to-left/RTL.png)
+![.NET MAUI Button with right-to-left layout](Images/right-to-left/RTL.png)
 
 ## See Also
 
 - [Customization](https://help.syncfusion.com/maui/button/customization)
-- [Right-to-Left](https://help.syncfusion.com/maui/button/right-to-left)
-- [Visual States](https://help.syncfusion.com/maui/button/visual-states)
+- [Visual States](https://help.syncfusion.com/maui/button/visual-states)
+- [Liquid Glass Effect](https://help.syncfusion.com/maui/button/liquidglasssupport)

MAUI/Carousel-View/LoadMore.md

@@ -336,8 +336,6 @@ The following image shows the custom LoadMore view rendered after the last carou
 
 Call the [LoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel.SfCarousel.html#Syncfusion_Maui_Carousel_SfCarousel_LoadMore) method to load the next set of items programmatically. The number of items loaded is determined by `LoadMoreItemsCount`.
 
-### XAML
-
 {% tabs %}
 
 {% highlight xaml %}
@@ -361,9 +359,6 @@ Call the [LoadMore](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Carousel
 </Grid>
 
 {% endhighlight %}
-
-### C#
-
 {% highlight C# %}
 
 CarouselViewModel carouselViewModel = new CarouselViewModel();

MAUI/Carousel-View/how-to.md

@@ -103,7 +103,7 @@ private void Carousel_SelectionChanged(object sender, SelectionChangedEventArgs
     if (sender is SfCarousel sfCarousel)
     {
         int count = sfCarousel.SelectedIndex + 1;
-        this.DisplayAlert("SelectionChanged", "Carousel item " + count + " has been selected.", "OK");
+        this.DisplayAlertAsync("SelectionChanged", "Carousel item " + count + " has been selected.", "OK");
     }
 }
 

MAUI/Effects-View/Methods.md

@@ -159,7 +159,7 @@ The [Reset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsVi
 {% highlight xaml %}
 
 <VerticalStackLayout Padding="10" 
-                     Spacing="10" >
+                     Spacing="10">
     <syncEffectsView:SfEffectsView x:Name="effectsView"
                                    HorizontalOptions="Center" 
                                    VerticalOptions="Center"
@@ -172,9 +172,9 @@ The [Reset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfEffectsVi
             <Grid.Background>
                 <LinearGradientBrush EndPoint="1,1">
                     <GradientStop Color="#FF6B6B" 
-                                  Offset="0.0" />
+                                  Offset="0.0"/>
                     <GradientStop Color="#4ECDC4" 
-                                  Offset="1.0" />
+                                  Offset="1.0"/>
                 </LinearGradientBrush>
             </Grid.Background>
         </Grid>

MAUI/Radial-Menu/Events.md

@@ -80,12 +80,12 @@ The `Navigating` and `Navigated` events can be handled in C# as follows:
 
 private async void SfRadialMenu_Navigating(object sender, NavigatingEventArgs e)
 {
-    await DisplayAlert("Alert", "ItemNavigating", "Ok");
+    await DisplayAlertAsync("Alert", "ItemNavigating", "Ok");
 }
 
 private async void SfRadialMenu_Navigated(object sender, NavigatedEventArgs e)
 {
-    await DisplayAlert("Alert", "ItemNavigated", "Ok");
+    await DisplayAlertAsync("Alert", "ItemNavigated", "Ok");
 }
 
 {% endhighlight %}
@@ -139,12 +139,12 @@ The `Opening` and `Opened` events can be handled in C# as follows:
 
 private async void SfRadialMenu_Opening(object sender, OpeningEventArgs e)
 {
-    await DisplayAlert("Alert", "ItemOpening", "Ok");
+    await DisplayAlertAsync("Alert", "ItemOpening", "Ok");
 }
 
 private async void SfRadialMenu_Opened(object sender, OpenedEventArgs e)
 {
-    await DisplayAlert("Alert", "ItemOpened", "Ok");
+    await DisplayAlertAsync("Alert", "ItemOpened", "Ok");
 }
 
 {% endhighlight %}
@@ -196,12 +196,12 @@ The `Closing` and `Closed` events can be handled in C# as follows:
 
 private async void SfRadialMenu_Closing(object sender, ClosingEventArgs e)
 {
-    await DisplayAlert("Alert", "ItemClosing", "Ok");
+    await DisplayAlertAsync("Alert", "ItemClosing", "Ok");
 }
 
 private async void SfRadialMenu_Closed(object sender, ClosedEventArgs e)
 {
-    await DisplayAlert("Alert", "ItemClosed", "Ok");
+    await DisplayAlertAsync("Alert", "ItemClosed", "Ok");
 }
 
 {% endhighlight %}
@@ -251,7 +251,7 @@ The `CenterButtonBackTapped` event can be handled in C# as follows:
 
 private async void SfRadialMenu_CenterButtonBackTapped(object sender, CenterButtonBackTappedEventArgs e)
 {
-    await DisplayAlert("Alert", "CenterButtonTapped", "Ok");
+    await DisplayAlertAsync("Alert", "CenterButtonTapped", "Ok");
 }
 
 {% endhighlight %}
@@ -302,7 +302,7 @@ The `ItemTapped` event can be handled in C# as follows:
 
 private async void SfRadialMenuItem_ItemTapped(object sender, Syncfusion.Maui.RadialMenu.ItemTappedEventArgs e)
 {
-    await DisplayAlert("Alert", "ItemTapped", "Ok");
+    await DisplayAlertAsync("Alert", "ItemTapped", "Ok");
 }
 
 {% endhighlight %}
@@ -355,12 +355,12 @@ The `TouchDown` and `TouchUp` events can be handled in C# as follows:
 
 private async void SfRadialMenuItemTouchDown(object? sender, RadialMenuItemEventArgs e)
 {
-    await DisplayAlert("Alert", "The RadialMenuItem is pressed.", "Ok");
+    await DisplayAlertAsync("Alert", "The RadialMenuItem is pressed.", "Ok");
 }
 
 private async void SfRadialMenuItemTouchUp(object? sender, RadialMenuItemEventArgs e)
 {
-    await DisplayAlert("Alert", "The RadialMenuItem is released.", "Ok");
+    await DisplayAlertAsync("Alert", "The RadialMenuItem is released.", "Ok");
 }
 
 {% endhighlight %}

MAUI/Radial-Menu/SfRadialMenuItem-Customization.md

@@ -484,7 +484,7 @@ public partial class ViewModel : ObservableObject
             return;
         }
 
-        await page.DisplayAlert("Alert", message, "OK");
+        await page.DisplayAlertAsync("Alert", message, "OK");
     }
 }