diff --git a/MAUI/Backdrop/liquid-glass-effect.md b/MAUI/Backdrop/liquid-glass-effect.md
index 08bb282ba..8ffe5afe5 100644
--- a/MAUI/Backdrop/liquid-glass-effect.md
+++ b/MAUI/Backdrop/liquid-glass-effect.md
@@ -7,157 +7,106 @@ control: SfBackdropPage
documentation: ug
---
-# Liquid Glass Support
+# Liquid Glass Effect in .NET MAUI Backdrop Page (SfBackdropPage)
-The [SfBackdropPage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html) supports a liquid glass appearance on both layers. Enable the effect directly on the [BackdropBackLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropBackLayer.html) and [BackdropFrontLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropFrontLayer.html) by setting their [EnableLiquidGlassEffect]() properties to true. This improves visual depth and readability when the backdrop layers are placed over images or colorful layouts.
+The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in .NET MAUI Backdrop Page's Front or Back layer.
-## Platform and Version Support
+## Apply liquid glass effect
-1. This feature is supported on .NET 10 or greater.
-2. This feature is supported on macOS 26 and iOS 26 or later.
-3. On platforms or versions below these requirements, the layers render without the acrylic blur effect and fall back to a standard background.
+Follow these steps to enable and configure the Liquid Glass Effect in the Front or Back Layer:
-## Prerequisites
+### Step 1: Enable the liquid glass effect on Front or Back Layer
-- Add the [Syncfusion.Maui.Backdrop](https://www.nuget.org/packages/Syncfusion.Maui.Backdrop) package (for SfBackdropPage, BackdropFrontLayer, BackdropBackLayer).
+Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropBackLayer.html#Syncfusion_Maui_Backdrop_BackdropBackLayer_EnableLiquidGlassEffect) property to `true` in the [SfBackdropPage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html) control's Front or Back Layer to apply the Liquid Glass Effect.
-## Apply Liquid Glass Effect to the back layer
+### Step 2: Customize the background
-Turn on the liquid glass effect on the back layer by setting [EnableLiquidGlassEffect]() to true.
+To achieve a glass like background in the Front or Back Layer, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
+
+The following code snippet demonstrates how to apply the Liquid Glass Effect to the Front or Back layer of the [SfBackdropPage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html) control:
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
-
-
+
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Appetizers
+ Soups
+ Desserts
+ Salads
+
+
+
-
+
-
-
-
+
{% endhighlight %}
-{% highlight c# %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
-using Syncfusion.Maui.Backdrop;
-
-this.BackLayer = new BackdropBackLayer
+this.BackLayer = new BackdropBackLayer()
{
- EnableLiquidGlassEffect = true,
- Content = new Grid
+ Content = new Grid()
{
- Children =
+ Background = new LinearGradientBrush()
{
- new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
- new VerticalStackLayout
+ StartPoint = new Point(0, 0),
+ EndPoint = new Point(0, 1),
+ GradientStops =
{
- Padding = 16,
- Children = { new Label { Text = "Back layer content", FontSize = 16 } }
+ new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
+ new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
+ new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
}
- }
- }
-};
-
-this.FrontLayer = new BackdropFrontLayer
-{
- Content = new Grid { BackgroundColor = Colors.WhiteSmoke }
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-## Apply Liquid Glass Effect to the front layer
-
-You can enable the liquid glass effect for the front layer as well by setting [EnableLiquidGlassEffect]() to true.
-
-{% tabs %}
-{% highlight xaml %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight c# %}
-
-using Syncfusion.Maui.Backdrop;
-
-this.BackLayer = new BackdropBackLayer
-{
- Content = new Grid
- {
- Children = { new Label { Text = "Menu", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center } }
- }
-};
-
-this.FrontLayer = new BackdropFrontLayer
-{
- EnableLiquidGlassEffect = true,
- Content = new Grid
- {
+ },
+ RowDefinitions =
+ {
+ new RowDefinition () { Height = GridLength.Auto}
+ },
Children =
{
- new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
- new VerticalStackLayout
+ new ListView()
{
- Padding = 16,
- Children = { new Label { Text = "Front layer content", FontSize = 16 } }
+ ItemsSource = new string[] { "Appetizers", "Soups", "Desserts" ,"Salads"}
}
}
}
};
+this.FrontLayer = new BackdropFrontLayer();
+this.FrontLayer.EnableLiquidGlassEffect = true;
+
{% endhighlight %}
{% endtabs %}
N>
-* Liquid Glass effects are most visible over images or colorful backgrounds.
-* You can enable the effect independently on either the back layer, the front layer, or both as needed.
-
-## Best Practices and Tips
-
-- The back and front layers use built-in acrylic when their [EnableLiquidGlassEffect]() property is true.
-- Place imagery or vibrant backgrounds beneath the layer surface to see the blur clearly.
-- Combine with existing layout properties (RevealedHeight, EdgeShape, etc.) to achieve the desired design while using the effect.
-
-The following screenshots illustrate the back and front layers with the liquid glass effect enabled over colorful backgrounds.
+* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
+* This feature is available only in `.NET 10.`
\ No newline at end of file
diff --git a/MAUI/Calendar/liquid-glass-effect.md b/MAUI/Calendar/liquid-glass-effect.md
index 78d1a49a6..fac2b0bda 100644
--- a/MAUI/Calendar/liquid-glass-effect.md
+++ b/MAUI/Calendar/liquid-glass-effect.md
@@ -7,143 +7,107 @@ control: SfCalendar
documentation: ug
---
-# Liquid Glass Support
+# Liquid Glass Effect in .NET MAUI Calendar (SfCalendar)
-The [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.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 the calendar is placed over images or colorful layouts.
+The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI Calendar (SfCalendar) control.
-Additionally, when the calendar is shown in [Dialog](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMode.html#Syncfusion_Maui_Calendar_CalendarMode_Dialog) mode, you can apply the glass effect to the pop-up by enabling the [EnableLiquidGlassEffect]() property on the calendar.
+## Apply liquid glass effect
-## Platform and Version Support
+Follow these steps to enable and configure the Liquid Glass Effect in the Calendar control:
-1. This feature is supported on .NET 10 or greater.
-2. This feature is supported on macOS 26 and iOS 26 or later.
-3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
+### Step 1: Wrap the control inside glass effect view
-## Prerequisites
+To apply the Liquid Glass Effect to Syncfusion® .NET MAUI [Calendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html) control, wrap the control inside the [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) class.
-- Add the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package (for SfGlassEffectsView).
-- Add the [Syncfusion.Maui.Calendar](https://www.nuget.org/packages/Syncfusion.Maui.Calendar/) package (for SfCalendar).
+For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
-## Apply Liquid Glass Effect to SfCalendar
+### Step 2: Enable the liquid glass effect on Calendar
-Wrap the [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html) inside an [SfGlassEffectsView]() to give the calendar surface a glass (blurred or clear) appearance.
+Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html#Syncfusion_Maui_Calendar_SfCalendar_EnableLiquidGlassEffect) property to `true` in the [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html) control to apply the Liquid Glass Effect. When enabled, the effect is also applied to its dependent controls and provides responsive interaction for a smooth and engaging user experience.
+
+### Step 3: Customize the background
+
+To achieve a glass like background in the Calendar, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
+
+The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html) control:
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
{% endhighlight %}
-{% highlight c# %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Calendar;
+// Outer grid with gradient background
+var mainGrid = new Grid()
+{
+ Background = new LinearGradientBrush()
+ {
+ StartPoint = new Point(0, 0),
+ EndPoint = new Point(0, 1),
+ GradientStops =
+ {
+ new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
+ new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
+ new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
+ }
+ }
+};
-var glassView = new SfGlassEffectsView
+// Inner grid container
+var innerGrid = new Grid();
+
+var glassView = new SfGlassEffectsView()
{
CornerRadius = 20,
- Padding = new Thickness(12),
EffectType = LiquidGlassEffectType.Regular,
- EnableShadowEffect = true
};
var calendar = new SfCalendar();
+calendar.EnableLiquidGlassEffect = true;
+calendar.Background = Colors.Transparent;
+calendar.WidthRequest = 350;
+calendar.HeightRequest = 350;
glassView.Content = calendar;
+innerGrid.Children.Add(glassView);
+mainGrid.Children.Add(innerGrid);
+this.Content = mainGrid;
{% endhighlight %}
{% endtabs %}
N>
-* Liquid Glass effects are most visible over images or colorful backgrounds.
-* Use EffectType="Regular" for a blurrier look and "Clear" for a glassy look.
-
-## Enable Glass Effect in Dialog Mode
-
-When the calendar is displayed in [Dialog](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMode.html#Syncfusion_Maui_Calendar_CalendarMode_Dialog) mode, enable the liquid glass effect by setting [EnableLiquidGlassEffect]() to true.
-
-{% tabs %}
-{% highlight xaml %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight c# %}
-
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Calendar;
-
-var calendar = new SfCalendar
-{
- // Shows the calendar in a dialog surface when invoked
- Mode = CalendarMode.Dialog,
-
- // Applies acrylic/glass effect to the dialog surface
- EnableLiquidGlassEffect = true
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-N>
-* The dialog gains the glass effect only when EnableLiquidGlassEffect is true.
-
-## Key Properties
-
-- [EffectType](): Choose between Regular (blurry) and Clear (glassy) effects.
-- [EnableShadowEffect](): Enables a soft shadow around the acrylic container.
-- [CornerRadius](): Rounds the corners of the acrylic container.
-- Padding/Height/Width: Adjust layout around the embedded calendar.
-- [EnableLiquidGlassEffect]() (dialog): Enables the glass effect for the calendar’s dialog mode.
-
-## Best Practices and Tips
-
-- Hosting the calendar inside [SfGlassEffectsView]() gives the calendar body an acrylic look.
-- In dialog mode, the dialog surface applies the glass effect only when [EnableLiquidGlassEffect]() is true.
-- For the most noticeable effect, place the control over images or vibrant backgrounds.
-
-The following screenshot illustrates [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html) hosted within an acrylic container, and the dialog mode using the glass effect.
\ No newline at end of file
+* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
+* This feature is available only in `.NET 10.`
\ No newline at end of file
diff --git a/MAUI/Cards/liquid-glass-effect.md b/MAUI/Cards/liquid-glass-effect.md
index 1a41e3f5e..c19b7d344 100644
--- a/MAUI/Cards/liquid-glass-effect.md
+++ b/MAUI/Cards/liquid-glass-effect.md
@@ -7,68 +7,102 @@ control: SfCardView
documentation: ug
---
-# Liquid Glass Support
+# Liquid Glass Effect in .NET MAUI Cards (SfCards)
-The [SfCardView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cards.SfCardView.html) supports a liquid glass effect by setting the [EnableLiquidGlassEffect]() property to true. This enhances visual depth and readability when cards are placed over images or colorful layouts.
+The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI Cards (SfCards) control.
-## Platform and Version Support
+## Apply liquid glass effect
-1. This feature is supported on .NET 10 or greater.
-2. This feature is supported on macOS 26 and iOS 26 or later.
-3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
+Follow these steps to enable and configure the Liquid Glass Effect in the Card View:
-## Apply Liquid Glass Effect to SfCardView
+### Step 1: Enable the liquid glass effect on Card View
-Turn on the liquid glass effect on a card view by setting [EnableLiquidGlassEffect]() to true.
+Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cards.SfCardView.html#Syncfusion_Maui_Cards_SfCardView_EnableLiquidGlassEffect) property to `true` in the [SfCardView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cards.SfCardView.html) to apply the Liquid Glass Effect.
+
+### Step 2: Customize the background
+
+To achieve a glass like background in the card view, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
+
+The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfCardView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cards.SfCardView.html):
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
{% endhighlight %}
-{% highlight c# %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
-using Syncfusion.Maui.Cards;
+// Outer grid with gradient background
+var mainGrid = new Grid()
+{
+ Background = new LinearGradientBrush()
+ {
+ StartPoint = new Point(0, 0),
+ EndPoint = new Point(0, 1),
+ GradientStops =
+ {
+ new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
+ new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
+ new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
+ }
+ }
+};
+
+var innerGrid = new Grid();
-var card = new SfCardView
+var card = new SfCardView()
{
EnableLiquidGlassEffect = true,
+ Background = Colors.Transparent,
+ BorderColor = Colors.Transparent,
+ WidthRequest = 350,
+ HeightRequest = 200,
};
-card.Content = new VerticalStackLayout
+card.Content = new Label()
{
- Spacing = 8,
- Children =
- {
- new Label { Text = "Glass Card", FontSize = 18, FontAttributes = FontAttributes.Bold },
- new Label { Text = "This card uses the built-in liquid glass effect." },
- }
+ Text = "SfCardView",
+ HorizontalOptions = LayoutOptions.Center,
+ VerticalOptions = LayoutOptions.Center
};
+innerGrid.Add(card);
+mainGrid.Add(innerGrid);
+this.Content = mainGrid;
+
{% endhighlight %}
{% endtabs %}
N>
-* Liquid Glass effects are most visible over images or colorful backgrounds.
-
-The following screenshot illustrates [SfCardView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cards.SfCardView.html) with the liquid glass effect enabled over a colorful background.
+* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
+* This feature is available only in `.NET 10.`
\ No newline at end of file
diff --git a/MAUI/DatePicker/liquid-glass-effect.md b/MAUI/DatePicker/liquid-glass-effect.md
index 142d619cd..e895f5009 100644
--- a/MAUI/DatePicker/liquid-glass-effect.md
+++ b/MAUI/DatePicker/liquid-glass-effect.md
@@ -7,139 +7,120 @@ control: SfDatePicker
documentation: ug
---
-# Liquid Glass Support
+# Liquid Glass Effect in .NET MAUI Date Picker (SfDatePicker)
-The [SfDatePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DatePicker.SfDatePicker.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 the date picker is placed over images or colorful layouts.
+The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI Date Picker (SfDatePicker) control.
-Additionally, when the date picker is shown in [Dialog]() mode, you can apply the glass effect to the pop-up by enabling the [EnableLiquidGlassEffect]() property on the SfDatePicker.
+## Apply liquid glass effect
-## Platform and Version Support
+Follow these steps to enable and configure the Liquid Glass Effect in the Date Picker control:
-1. This feature is supported on .NET 10 or greater.
-2. This feature is supported on macOS 26 and iOS 26 or later.
-3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
+### Step 1: Wrap the control inside glass effect view
-## Prerequisites
+To apply the Liquid Glass Effect to Syncfusion® .NET MAUI [Date Picker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDatePicker.html) control, wrap the control inside the [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) class.
-- Add the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package (for SfGlassEffectsView).
-- Add the [Syncfusion.Maui.Picker](https://www.nuget.org/packages/Syncfusion.Maui.Picker/) package (for SfDatePicker).
+For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
-## Apply Liquid Glass Effect to SfDatePicker
+### Step 2: Enable the liquid glass effect on Date Picker
-Wrap the [SfDatePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDatePicker.html) inside an [SfGlassEffectsView]() to give the picker surface a glass (blurred or clear) appearance.
+Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_EnableLiquidGlassEffect) property to `true` in the [SfDatePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDatePicker.html) control to apply the Liquid Glass Effect. When enabled, the effect is also applied to its dependent controls and provides responsive interaction for a smooth and engaging user experience.
+
+### Step 3: Customize the background
+
+To achieve a glass like background in the Date Picker, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
+
+The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfDatePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDatePicker.html) control:
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endhighlight %}
-{% highlight c# %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Picker;
+// Outer grid with gradient background
+var mainGrid = new Grid()
+{
+ Background = new LinearGradientBrush()
+ {
+ StartPoint = new Point(0, 0),
+ EndPoint = new Point(0, 1),
+ GradientStops =
+ {
+ new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
+ new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
+ new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
+ }
+ }
+};
+
+// Inner grid container
+var innerGrid = new Grid();
-var glassView = new SfGlassEffectsView
+var glassView = new SfGlassEffectsView()
{
CornerRadius = 20,
- Padding = new Thickness(12),
EffectType = LiquidGlassEffectType.Regular,
- EnableShadowEffect = true
+ WidthRequest = 350,
+ HeightRequest = 350,
+ Background = Colors.Transparent
};
-var datePicker = new SfDatePicker();
-
-glassView.Content = datePicker;
-
-{% endhighlight %}
-{% endtabs %}
-
-N>
-* Liquid Glass effects are most visible over images or colorful backgrounds.
-* Use EffectType="Regular" for a blurrier look and "Clear" for a glassy look.
-
-## Enable Glass Effect in Dialog Mode
-
-When the date picker displays its dialog surface, enable the liquid glass effect by setting [EnableLiquidGlassEffect]() to true.
-
-{% tabs %}
-{% highlight xaml %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight c# %}
-
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Picker;
-
-var datePicker = new SfDatePicker
+var datePicker = new SfDatePicker()
{
- // Applies acrylic/glass effect to the dialog surface
- EnableLiquidGlassEffect = true
+ EnableLiquidGlassEffect = true,
+ Background = Colors.Transparent,
+ WidthRequest = 350,
+ HeightRequest = 350,
+ ColumnHeaderView = new DatePickerColumnHeaderView()
+ {
+ Background = Colors.Transparent,
+ }
};
+glassView.Content = datePicker;
+innerGrid.Children.Add(glassView);
+mainGrid.Children.Add(innerGrid);
+this.Content = mainGrid;
+
{% endhighlight %}
{% endtabs %}
N>
-* The dialog gains the glass effect only when [EnableLiquidGlassEffect]() is true.
-
-## Key Properties
-
-- [EffectType](): Choose between Regular (blurry) and Clear (glassy) effects.
-- [EnableShadowEffect](): Enables a soft shadow around the acrylic container.
-- [CornerRadius](): Rounds the corners of the acrylic container.
-- Padding/Height/Width: Adjust layout around the embedded date picker.
-- [EnableLiquidGlassEffect]() (dialog): Enables the glass effect for the date picker’s dialog surface.
-
-## Best Practices and Tips
-
-- Hosting the date picker inside [SfGlassEffectsView]() gives the picker body an acrylic look.
-- The dialog surface applies the glass effect only when [EnableLiquidGlassEffect]() is true.
-- For the most noticeable effect, place the control over images or vibrant backgrounds.
-
-The following screenshot illustrates [SfDatePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDatePicker.html) hosted within an acrylic container, and the dialog surface using the glass effect.
+* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
+* This feature is available only in `.NET 10.`
diff --git a/MAUI/DateTimePicker/liquid-glass-effect.md b/MAUI/DateTimePicker/liquid-glass-effect.md
index 4952f03a1..68710ae80 100644
--- a/MAUI/DateTimePicker/liquid-glass-effect.md
+++ b/MAUI/DateTimePicker/liquid-glass-effect.md
@@ -7,139 +7,126 @@ control: SfDateTimePicker
documentation: ug
---
-# Liquid Glass Support
+# Liquid Glass Effect in .NET MAUI Date Time Picker (SfDateTimePicker)
-The [SfDateTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DateTimePicker.SfDateTimePicker.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 the date-time picker is placed over images or colorful layouts.
+The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI Date Time Picker (SfDateTimePicker) control.
-Additionally, when the datetime picker is shown in [Dialog]() mode, you can apply the glass effect to the pop-up by enabling the [EnableLiquidGlassEffect]() property on the SfDateTimePicker.
+## Apply liquid glass effect
-## Platform and Version Support
+Follow these steps to enable and configure the Liquid Glass Effect in the Date Time Picker control:
-1. This feature is supported on .NET 10 or greater.
-2. This feature is supported on macOS 26 and iOS 26 or later.
-3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
+### Step 1: Wrap the control inside glass effect view
-## Prerequisites
+To apply the Liquid Glass Effect to Syncfusion® .NET MAUI [Date Time Picker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDateTimePicker.html) control, wrap the control inside the [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) class.
-- Add the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package (for SfGlassEffectsView).
-- Add the [Syncfusion.Maui.Picker](https://www.nuget.org/packages/Syncfusion.Maui.Picker/) package (for SfDateTimePicker).
+For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
-## Apply Liquid Glass Effect to SfDateTimePicker
+### Step 2: Enable the liquid glass effect on Date Time Picker
-Wrap the [SfDateTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DateTimePicker.SfDateTimePicker.html) inside an [SfGlassEffectsView]() to give the picker surface a glass (blurred or clear) appearance.
+Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_EnableLiquidGlassEffect) property to `true` in the [SfDateTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDateTimePicker.html) control to apply the Liquid Glass Effect. When enabled, the effect is also applied to its dependent controls and provides responsive interaction for a smooth and engaging user experience.
+
+### Step 3: Customize the background
+
+To achieve a glass like background in the Date Time Picker, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
+
+The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfDateTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfDateTimePicker.html) control:
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endhighlight %}
-{% highlight c# %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Picker;
-
-var glassView = new SfGlassEffectsView
+// Outer grid with gradient background
+var mainGrid = new Grid()
{
- CornerRadius = 20,
- Padding = new Thickness(12),
- EffectType = LiquidGlassEffectType.Regular,
- EnableShadowEffect = true
+ Background = new LinearGradientBrush()
+ {
+ StartPoint = new Point(0, 0),
+ EndPoint = new Point(0, 1),
+ GradientStops =
+ {
+ new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
+ new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
+ new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
+ }
+ }
};
-var dateTimePicker = new SfDateTimePicker();
+// Inner grid container
+var innerGrid = new Grid();
-glassView.Content = dateTimePicker;
-
-{% endhighlight %}
-{% endtabs %}
-
-N>
-* Liquid Glass effects are most visible over images or colorful backgrounds.
-* Use EffectType="Regular" for a blurrier look and "Clear" for a glassy look.
-
-## Enable Glass Effect in Dialog Mode
-
-When the [SfDateTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DateTimePicker.SfDateTimePicker.html) displays its dialog surface, enable the liquid glass effect by setting [EnableLiquidGlassEffect]() to true.
-
-{% tabs %}
-{% highlight xaml %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight c# %}
-
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Picker;
+var glassView = new SfGlassEffectView()
+{
+ EffectType = GlassEffectType.Regular,
+ CornerRadius = 20,
+ WidthRequest = 350,
+ HeightRequest = 350
+};
-var dateTimePicker = new SfDateTimePicker
+var dateTimePicker = new SfDateTimePicker()
{
- // Applies acrylic/glass effect to the dialog surface
- EnableLiquidGlassEffect = true
+ EnableLiquidGlassEffect = true,
+ Background = Colors.Transparent,
+ WidthRequest = 350,
+ HeightRequest = 350,
+ ColumnHeaderView = new DateTimePickerColumnHeaderView()
+ {
+ Background = Colors.Transparent
+ },
+ HeaderView = new DateTimePickerHeaderView()
+ {
+ Background = Colors.Transparent
+ }
};
+glassView.Content = dateTimePicker;
+innerGrid.Children.Add(glassView);
+mainGrid.Children.Add(innerGrid);
+this.Content = mainGrid;
+
{% endhighlight %}
{% endtabs %}
N>
-* The dialog gains the glass effect only when EnableLiquidGlassEffect is true.
-
-## Key Properties
-
-- [EffectType](): Choose between Regular (blurry) and Clear (glassy) effects.
-- [EnableShadowEffect](): Enables a soft shadow around the acrylic container.
-- [CornerRadius](): Rounds the corners of the acrylic container.
-- Padding/Height/Width: Adjust layout around the embedded date-time picker.
-- [EnableLiquidGlassEffect]() (dialog): Enables the glass effect for the date-time picker’s dialog surface.
-
-## Best Practices and Tips
-
-- Hosting the date-time picker inside [SfGlassEffectsView]() gives the picker body an acrylic look.
-- The dialog surface applies the glass effect only when [EnableLiquidGlassEffect]() is true.
-- For the most noticeable effect, place the control over images or vibrant backgrounds.
-
-The following screenshot illustrates [SfDateTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DateTimePicker.SfDateTimePicker.html) hosted within an acrylic container, and the dialog surface using the glass effect.
+* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
+* This feature is available only in `.NET 10.`
\ No newline at end of file
diff --git a/MAUI/Picker/liquid-glass-effect.md b/MAUI/Picker/liquid-glass-effect.md
index a3ac4e18e..0bf286279 100644
--- a/MAUI/Picker/liquid-glass-effect.md
+++ b/MAUI/Picker/liquid-glass-effect.md
@@ -7,139 +7,141 @@ control: SfPicker
documentation: ug
---
-# Liquid Glass Support
+# Liquid Glass Effect in .NET MAUI Picker (SfPicker)
-The [SfPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.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 the picker is placed over images or colorful layouts.
+The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI Picker (SfPicker) control.
-Additionally, when the picker is shown in [Dialog]() mode, you can apply the glass effect to the pop-up by enabling the [EnableLiquidGlassEffect]() property on the SfPicker.
+## Apply liquid glass effect
-## Platform and Version Support
+Follow these steps to enable and configure the Liquid Glass Effect in the Picker control:
-1. This feature is supported on .NET 10 or greater.
-2. This feature is supported on macOS 26 and iOS 26 or later.
-3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
+### Step 1: Wrap the control inside glass effect view
-## Prerequisites
+To apply the Liquid Glass Effect to Syncfusion® .NET MAUI [Picker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.html) control, wrap the control inside the [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) class.
-- Add the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package (for SfGlassEffectsView).
-- Add the [Syncfusion.Maui.Picker](https://www.nuget.org/packages/Syncfusion.Maui.Picker/) package (for SfPicker).
+For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
-## Apply Liquid Glass Effect to SfPicker
+### Step 2: Enable the liquid glass effect on Picker
-Wrap the [SfPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.html) inside an [SfGlassEffectsView]() to give the picker surface a glass (blurred or clear) appearance.
+Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_EnableLiquidGlassEffect) property to `true` in the [SfPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.html) control to apply the Liquid Glass Effect. When enabled, the effect is also applied to its dependent controls and provides responsive interaction for a smooth and engaging user experience.
+
+### Step 3: Customize the background
+
+To achieve a glass like background in the Picker, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
+
+The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.html) control:
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml tabtitle="MainPage.xaml" %}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endhighlight %}
-{% highlight c# %}
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Picker;
-
-var glassView = new SfGlassEffectsView
+// Outer grid with gradient background
+var mainGrid = new Grid()
{
- CornerRadius = 20,
- Padding = new Thickness(12),
- EffectType = LiquidGlassEffectType.Regular,
- EnableShadowEffect = true
+ Background = new LinearGradientBrush()
+ {
+ StartPoint = new Point(0, 0),
+ EndPoint = new Point(0, 1),
+ GradientStops =
+ {
+ new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
+ new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
+ new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
+ }
+ }
};
-var picker = new SfPicker();
-
-glassView.Content = picker;
-
-{% endhighlight %}
-{% endtabs %}
-
-N>
-* Liquid Glass effects are most visible over images or colorful backgrounds.
-* Use EffectType="Regular" for a blurrier look and "Clear" for a glassy look.
-
-## Enable Glass Effect in Dialog Mode
-
-When the picker displays in a dialog surface, enable the liquid glass effect by setting [EnableLiquidGlassEffect]() to true.
+// Inner grid container
+var innerGrid = new Grid();
-{% tabs %}
-{% highlight xaml %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight c# %}
+var glassView = new SfGlassEffectView()
+{
+ EffectType = GlassEffectType.Regular,
+ CornerRadius = 20,
+ WidthRequest = 350,
+ HeightRequest = 350
+};
-using Syncfusion.Maui.Core;
-using Syncfusion.Maui.Picker;
+var picker = new SfPicker()
+{
+ EnableLiquidGlassEffect = true,
+ Background = Colors.Transparent,
+ HeaderView = new PickerHeaderView()
+ {
+ HeightRequest = 40,
+ Text = "Select City",
+ Background = Colors.Transparent
+ }
+};
-var picker = new SfPicker
+ObservableCollection