Added liquid glass images to UG

Author: NatarajanSF4844

MAUI/Autocomplete/Images/UICustomization/Autocomplete_liquidglass.png

@@ -9,7 +9,7 @@ documentation: ug
 
 # Liquid glass support
 
-The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) supports a liquid `glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectsView](). You can customize the effect using properties such as [EffectType](), [EnableShadowEffect](), and round the corners using [CornerRadius](). This approach improves visual depth and readability when SfAutocomplete is placed over images or colorful layouts. Additionally, the dropdown portion of SfAutocomplete applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
+The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) supports a `liquid glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectsView](). You can customize the effect using properties such as [EffectType](), [EnableShadowEffect](), and round the corners using [CornerRadius](). This approach improves visual depth and readability when SfAutocomplete is placed over images or colorful layouts. Additionally, the dropdown portion of SfAutocomplete applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
 
 ## Availability
 
@@ -24,7 +24,7 @@ The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.
 XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
 
 {% tabs %}
-{% highlight xaml hl_lines="49 52" %}
+{% highlight xaml hl_lines="19 22" %}
 
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage
@@ -45,6 +45,7 @@ XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the d
 
                 <inputs:SfAutocomplete
                     EnableLiquidGlassEffect="True"
+                    Background="Transparent"
                     ItemsSource="{Binding Employees}"
                     DisplayMemberPath="Name"
                     DropDownBackground="Transparent"
@@ -54,7 +55,7 @@ XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the d
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="14 17" %}
 
 using Syncfusion.Maui.Core;
 using Syncfusion.Maui.Inputs;
@@ -72,6 +73,7 @@ var Autocomplete = new SfAutocomplete
     EnableLiquidGlassEffect = true, // Dropdown glass effect
     ItemsSource = viewModel.Employees,
     DisplayMemberPath = "Name",
+    Background=Colors.Transparent,
     DropDownBackground= Colors.Transparent,
     Placeholder = "Select employee",
 };
@@ -82,4 +84,6 @@ glassEffects.Content = Autocomplete;
 {% endtabs %}
 
 
-The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.
+The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.
+
+![Autocomplete editor with liquid glass support](Images/UICustomization/Autocomplete_liquidglass.png)

MAUI/Autocomplete/LiquidGlassSupport.md

@@ -20,7 +20,7 @@ The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfBut
 XAML example Enable the glass effect on `SfButton`. When pressed, the button will `scale` while the effect is enabled.
 
 {% tabs %}
-{% highlight xaml hl_lines="49 52" %}
+{% highlight xaml hl_lines="16 17" %}
 
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage
@@ -38,6 +38,7 @@ XAML example Enable the glass effect on `SfButton`. When pressed, the button wil
                 x:Name="GlassButton"
                 Text="Continue"
                 EnableLiquidGlassEffect="True"
+                Background="Transparent"
                 WidthRequest="180"
                 CornerRadius="24"
                 HeightRequest="48" />
@@ -46,7 +47,7 @@ XAML example Enable the glass effect on `SfButton`. When pressed, the button wil
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="7 9" %}
 
 using Syncfusion.Maui.Buttons;
 
@@ -56,10 +57,13 @@ var glassButton = new SfButton
     AutomationId = "Acrylic Button",
     EnableLiquidGlassEffect = true, // Enables glass look and press-time scaling
     WidthRequest = 180,
+    Background=Colors.Transparent;
     HeightRequest = 48
 };
 
 {% endhighlight %}
 {% endtabs %}
 
-The following screenshot illustrates SfButton with the glass effect enabled and the pressed-state scaling behavior over a wallpaper background.
+The following screenshot illustrates SfButton with the glass effect enabled and the pressed-state scaling behavior over a wallpaper background.
+
+![button with liquid glass support](Images/customization-images/Button_liquidglass.png)

MAUI/Button/Images/customization-images/Button_liquidglass.png

@@ -19,7 +19,7 @@ The [Chips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html
 3. On platforms/versions below these requirements, the glass effect is not applied and the chips render with the standard background.
 
 {% tabs %}
-{% highlight xaml hl_lines="49 52" %}
+{% highlight xaml hl_lines="17" %}
 
 XAML example Enable the glass effect on SfChipGroup by setting EnableLiquidGlassEffect to True.
 
@@ -41,19 +41,19 @@ XAML example Enable the glass effect on SfChipGroup by setting EnableLiquidGlass
                 x:Name="FilterChips"
                 EnableLiquidGlassEffect="True">
                 <chip:SfChipGroup.Items>
-                    <chip:SfChip Text="Extra Small" Background="Blue"/>
-                    <chip:SfChip Text="Small" Background="Blue"/>
-                    <chip:SfChip Text="Medium" Background="Blue"/>
-                    <chip:SfChip Text="Large" Background="Blue"/>
-                    <chip:SfChip Text="Extra Large" Background="Blue"/>
+                    <chip:SfChip Text="Extra Small"/>
+                    <chip:SfChip Text="Small" />
+                    <chip:SfChip Text="Medium" />
+                    <chip:SfChip Text="Large"/>
+                    <chip:SfChip Text="Extra Large"/>
                 </chip:SfChipGroup.Items>
             </core:SfChipGroup>
         </StackLayout>
     </Grid>
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="5" %}
 
 using Syncfusion.Maui.Core;
 
@@ -72,4 +72,6 @@ chipGroup.Items.Add(new SfChip(){Text="Extra Large", Background = Colors.Blue })
 {% endtabs %}
 
 
-The following screenshot illustrates SfChipGroup with the built-in glass effect enabled via EnableLiquidGlassEffect, displayed over a wallpaper background.
+The following screenshot illustrates SfChipGroup with the built-in glass effect enabled via EnableLiquidGlassEffect, displayed over a wallpaper background.
+
+![chips with liquid glass support](images/customization-images/Chip_liquidglass.png)

MAUI/Button/LiquidGlassSupport.md

@@ -24,7 +24,7 @@ The [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfCo
 XAML example Wrap the SfComboBox in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
 
 {% tabs %}
-{% highlight xaml hl_lines="49 52" %}
+{% highlight xaml hl_lines="19 20 23" %}
 
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage
@@ -45,6 +45,7 @@ XAML example Wrap the SfComboBox in an SfGlassEffectsView, then enable the dropd
 
                 <inputs:SfComboBox
                     EnableLiquidGlassEffect="True"
+                    Background="Transparent"
                     ItemsSource="{Binding Employees}"
                     DisplayMemberPath="Name"
                     DropDownBackground="Transparent"
@@ -54,7 +55,7 @@ XAML example Wrap the SfComboBox in an SfGlassEffectsView, then enable the dropd
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="14 17 18" %}
 
 using Syncfusion.Maui.Core;
 using Syncfusion.Maui.Inputs;
@@ -72,6 +73,7 @@ var Combobox = new SfComboBox
     EnableLiquidGlassEffect = true, // Dropdown glass effect
     ItemsSource = viewModel.Employees,
     DisplayMemberPath = "Name",
+    Background = Colors.Transparent,
     DropDownBackground= Colors.Transparent,
     Placeholder = "Select employee",
 };
@@ -81,4 +83,6 @@ glassEffects.Content = Combobox;
 {% endhighlight %}
 {% endtabs %}
 
-The following screenshot illustrates SfComboBox within an acrylic container, with the dropdown using the glass effect.
+The following screenshot illustrates SfComboBox within an acrylic container, with the dropdown using the glass effect.
+
+![combo box editor with liquid glass support](Images/UICustomization/Combobox_liquidglass.png)

MAUI/Chips/LiquidGlassSupport.md

@@ -21,7 +21,7 @@ The  [SfDateTimeRangeSelector](https://help.syncfusion.com/cr/maui/Syncfusion.Ma
 XAML example The thumb’s glass effect appears only while it is pressed/dragged.
 
 {% tabs %}
-{% highlight xaml hl_lines="49 52" %}
+{% highlight xaml hl_lines="20" %}
 
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage
@@ -48,7 +48,7 @@ XAML example The thumb’s glass effect appears only while it is pressed/dragged
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="8" %}
 
 using Syncfusion.Maui.Sliders;
 
@@ -66,4 +66,6 @@ SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
 
 The following screenshot illustrates SfRangeSlider with the glass effect visible on the thumb while it is pressed.
 
+![date time range selector with liquid glass support](images/getting-started/rangeslider_liquidglass.gif)
+
 N> The glass effect is applied to the thumb only while it is pressed/dragged.