Merge pull request #3915 from syncfusion-content/Added-liquid-glass-images

Added liquid glass images to UG

Author: Chozarajan-P

MAUI/Autocomplete/Images/UICustomization/Autocomplete_liquidglass.png

@@ -7,9 +7,9 @@ control: SfAutocomplete
 documentation: ug
 ---
 
-# Liquid glass support
+# Liquid Glass Support for .NET MAUI Autocomplete
 
-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 [SfGlassEffectView](). 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
 
@@ -19,12 +19,12 @@ The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.
 
 ## Prerequisites
 
-- Add the Syncfusion.Maui.Core package (for SfGlassEffectsView) and Syncfusion.Maui.Inputs (for SfAutocomplete).
+- Add the Syncfusion.Maui.Core package (for SfGlassEffectView) and Syncfusion.Maui.Inputs (for SfAutocomplete).
 
-XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
+XAML example Wrap the SfAutocomplete in an SfGlassEffectView, 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
@@ -37,29 +37,30 @@ XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the d
     <Grid>
         <!-- Background to make acrylic blur visible -->
         <Image Source="wallpaper.jpg" Aspect="AspectFill" />
-            <core:SfGlassEffectsView
+            <core:SfGlassEffectView
                 CornerRadius="20"
                 HeightRequest="40"
                 EffectType="Regular"
                 EnableShadowEffect="True">
 
                 <inputs:SfAutocomplete
                     EnableLiquidGlassEffect="True"
+                    Background="Transparent"
                     ItemsSource="{Binding Employees}"
                     DisplayMemberPath="Name"
                     DropDownBackground="Transparent"
                     Placeholder="Select employee"/>
-            </core:SfGlassEffectsView>
+            </core:SfGlassEffectView>
     </Grid>
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="14 17" %}
 
 using Syncfusion.Maui.Core;
 using Syncfusion.Maui.Inputs;
 
-var glassEffects = new SfGlassEffectsView
+var glassEffects = new SfGlassEffectView
 {
     CornerRadius=20,
     HeightRequest=40,
@@ -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

@@ -7,7 +7,7 @@ control: SfButton
 documentation: ug
 ---
 
-# Liquid glass support
+# Liquid Glass Support for .NET MAUI Buttons
 
 The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) provides `liquid glass` effect that gives the button a frosted, translucent appearance blending with the content behind it. When the glass effect is enabled, the button also scales while it is pressed, delivering a subtle, responsive interaction cue. This enhances visual depth and interactivity, especially when the button is placed over images or colorful layouts.
 
@@ -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

@@ -8,7 +8,7 @@ documentation: ug
 ---
 
 
-# Liquid glass support
+# Liquid Glass Support for .NET MAUI Chips
 
 The [Chips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html) provides `liquid glass` effect that can be enabled directly on the control using the public API [EnableLiquidGlassEffect](). When enabled, each chip surface adopts a frosted, translucent appearance that blends with the content behind it, improving visual depth and readability over images or colorful layouts.
 
@@ -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

@@ -7,9 +7,9 @@ control: SfComboBox
 documentation: ug
 ---
 
-# Liquid glass support
+# Liquid Glass Support for .NET MAUI ComboBox
 
-The [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.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 SfComboBox is placed over images or colorful layouts. Additionally, the dropdown portion of SfComboBox applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
+The [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) supports a `liquid glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectView](). 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 SfComboBox is placed over images or colorful layouts. Additionally, the dropdown portion of SfComboBox applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
 
 ## Availability
 
@@ -19,12 +19,12 @@ The [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfCo
 
 ## Prerequisites
 
-- Add the Syncfusion.Maui.Core package (for SfGlassEffectsView) and Syncfusion.Maui.Inputs (for SfComboBox).
+- Add the Syncfusion.Maui.Core package (for SfGlassEffectView) and Syncfusion.Maui.Inputs (for SfComboBox).
 
-XAML example Wrap the SfComboBox in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
+XAML example Wrap the SfComboBox in an SfGlassEffectView, 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
@@ -37,29 +37,30 @@ XAML example Wrap the SfComboBox in an SfGlassEffectsView, then enable the dropd
     <Grid>
         <!-- Background to make acrylic blur visible -->
         <Image Source="wallpaper.jpg" Aspect="AspectFill" />
-            <core:SfGlassEffectsView
+            <core:SfGlassEffectView
                 CornerRadius="20"
                 HeightRequest="40"
                 EffectType="Regular"
                 EnableShadowEffect="True">
 
                 <inputs:SfComboBox
                     EnableLiquidGlassEffect="True"
+                    Background="Transparent"
                     ItemsSource="{Binding Employees}"
                     DisplayMemberPath="Name"
                     DropDownBackground="Transparent"
                     Placeholder="Select employee"/>
-            </core:SfGlassEffectsView>
+            </core:SfGlassEffectView>
     </Grid>
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="14 17 18" %}
 
 using Syncfusion.Maui.Core;
 using Syncfusion.Maui.Inputs;
 
-var glassEffects = new SfGlassEffectsView
+var glassEffects = new SfGlassEffectView
 {
     CornerRadius=20,
     HeightRequest=40,
@@ -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

@@ -8,7 +8,7 @@ documentation: ug
 ---
 
 
-# Liquid glass support:
+# Liquid Glass Support for .NET MAUI DateTime Range Selector
 
 The  [SfDateTimeRangeSelector](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html) provides `liquid glass` effect for its thumbs when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the user is pressing/dragging the thumb, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the slider’s appearance at rest, and works well over images or colorful layouts.
 
@@ -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.