From 499dde624a8b16e4fafe30657ea8a81000e9bcc7 Mon Sep 17 00:00:00 2001 From: MohamedHasan3644 <102596726+MohamedHasan3644@users.noreply.github.com> Date: Mon, 15 Dec 2025 18:44:02 +0530 Subject: [PATCH 1/5] 996035-Updated Liquid glass UG content for calendar team controls ### Description Updated Liquid glass UG content for calendar team controls --- MAUI/Backdrop/liquid-glass-effect.md | 150 ++------------------- MAUI/Calendar/liquid-glass-effect.md | 136 +++---------------- MAUI/Cards/liquid-glass-effect.md | 63 ++------- MAUI/DatePicker/liquid-glass-effect.md | 132 +++--------------- MAUI/DateTimePicker/liquid-glass-effect.md | 132 +++--------------- MAUI/Picker/liquid-glass-effect.md | 132 +++--------------- MAUI/TimePicker/liquid-glass-effect.md | 132 +++--------------- MAUI/Toolbar/liquid-glass-effect.md | 85 +++--------- 8 files changed, 128 insertions(+), 834 deletions(-) diff --git a/MAUI/Backdrop/liquid-glass-effect.md b/MAUI/Backdrop/liquid-glass-effect.md index 08bb282ba..5e358d51d 100644 --- a/MAUI/Backdrop/liquid-glass-effect.md +++ b/MAUI/Backdrop/liquid-glass-effect.md @@ -7,157 +7,33 @@ 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` property to `true` in the `SfBackdropPage` 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. -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Backdrop; - -this.BackLayer = new BackdropBackLayer -{ - EnableLiquidGlassEffect = true, - Content = new Grid - { - Children = - { - new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill }, - new VerticalStackLayout - { - Padding = 16, - Children = { new Label { Text = "Back layer content", FontSize = 16 } } - } - } - } -}; - -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. +The following code snippet demonstrates how to apply the Liquid Glass Effect to the Front or Back layer of the `SfBackdropPage` control: {% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} {% 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 - { - Children = - { - new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill }, - new VerticalStackLayout - { - Padding = 16, - Children = { new Label { Text = "Front layer content", FontSize = 16 } } - } - } - } -}; +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% 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..3dff7478e 100644 --- a/MAUI/Calendar/liquid-glass-effect.md +++ b/MAUI/Calendar/liquid-glass-effect.md @@ -7,143 +7,39 @@ 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` control, wrap the control inside the `SfGlassEffectView` 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`. -## Apply Liquid Glass Effect to SfCalendar +### Step 2: Enable the liquid glass effect on Image Editor -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` property to `true` in the `SfCalendar` 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. -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.Calendar; - -var glassView = new SfGlassEffectsView -{ - CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true -}; - -var calendar = new SfCalendar(); - -glassView.Content = calendar; - -{% endhighlight %} -{% endtabs %} +### Step 3: Customize the background -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 +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. -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. +The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfCalendar` control: {% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} {% 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 -}; +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% 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..5b5128081 100644 --- a/MAUI/Cards/liquid-glass-effect.md +++ b/MAUI/Cards/liquid-glass-effect.md @@ -7,68 +7,33 @@ 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` property to `true` in the card view to apply the Liquid Glass Effect. -{% tabs %} -{% highlight xaml %} +### 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 card view: - - - - - - +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} {% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Cards; - -var card = new SfCardView -{ - EnableLiquidGlassEffect = true, -}; - -card.Content = new VerticalStackLayout -{ - 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." }, - } -}; +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% 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..3b8cfd269 100644 --- a/MAUI/DatePicker/liquid-glass-effect.md +++ b/MAUI/DatePicker/liquid-glass-effect.md @@ -7,139 +7,39 @@ 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` control, wrap the control inside the `SfGlassEffectView` 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`. -## 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` property to `true` in the `SfDatePicker` 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. -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.Picker; - -var glassView = new SfGlassEffectsView -{ - CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true -}; +### Step 3: Customize the background -var datePicker = new SfDatePicker(); +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. -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. +The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDatePicker` control: {% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} {% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.Picker; - -var datePicker = new SfDatePicker -{ - // Applies acrylic/glass effect to the dialog surface - EnableLiquidGlassEffect = true -}; +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% 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..a1c6f2f9e 100644 --- a/MAUI/DateTimePicker/liquid-glass-effect.md +++ b/MAUI/DateTimePicker/liquid-glass-effect.md @@ -7,139 +7,39 @@ 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` control, wrap the control inside the `SfGlassEffectView` 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`. -## 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` property to `true` in the `SfDateTimePicker` 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. -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.Picker; - -var glassView = new SfGlassEffectsView -{ - CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true -}; +### Step 3: Customize the background -var dateTimePicker = new SfDateTimePicker(); +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. -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. +The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimePicker` control: {% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} {% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.Picker; - -var dateTimePicker = new SfDateTimePicker -{ - // Applies acrylic/glass effect to the dialog surface - EnableLiquidGlassEffect = true -}; +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% 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..0159b84c7 100644 --- a/MAUI/Picker/liquid-glass-effect.md +++ b/MAUI/Picker/liquid-glass-effect.md @@ -7,139 +7,39 @@ 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` control, wrap the control inside the `SfGlassEffectView` 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`. -## 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` property to `true` in the `SfPicker` 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. -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.Picker; - -var glassView = new SfGlassEffectsView -{ - CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true -}; +### Step 3: Customize the background -var picker = new SfPicker(); +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. -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. +The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfPicker` control: {% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} {% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.Picker; - -var picker = new SfPicker -{ - // Applies acrylic/glass effect to the dialog surface - EnableLiquidGlassEffect = true -}; +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% 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 picker. -- [EnableLiquidGlassEffect]() (dialog): Enables the glass effect for the picker’s dialog surface. - -## Best Practices and Tips - -- Hosting the picker inside [SfGlassEffectsView]() gives the picker body an acrylic look. -- In dialog usage, 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 [SfPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfPicker.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/TimePicker/liquid-glass-effect.md b/MAUI/TimePicker/liquid-glass-effect.md index d62d3513f..cec6303a8 100644 --- a/MAUI/TimePicker/liquid-glass-effect.md +++ b/MAUI/TimePicker/liquid-glass-effect.md @@ -7,139 +7,39 @@ control: SfTimePicker documentation: ug --- -# Liquid Glass Support +# Liquid Glass Effect in .NET MAUI Time Picker (SfTimePicker) -The [SfTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TimePicker.SfTimePicker.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 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 Time Picker (SfTimePicker) control. -Additionally, when the time selection is shown in a dialog, you can apply the glass effect to the pop-up by enabling the [EnableLiquidGlassEffect]() property on the time picker. +## Apply liquid glass effect -## Platform and Version Support +Follow these steps to enable and configure the Liquid Glass Effect in the 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 `Time Picker` control, wrap the control inside the `SfGlassEffectView` 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 SfTimePicker). +For more details, refer to the `Liquid Glass Getting Started documentation`. -## Apply Liquid Glass Effect to SfTimePicker +### Step 2: Enable the liquid glass effect on Time Picker -Wrap the [SfTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TimePicker.SfTimePicker.html) inside an [SfGlassEffectsView]() to give the picker surface a glass (blurred or clear) appearance. +Set the `EnableLiquidGlassEffect` property to `true` in the `SfTimePicker` 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. -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.TimePicker; - -var glassView = new SfGlassEffectsView -{ - CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true -}; +### Step 3: Customize the background -var timePicker = new SfTimePicker(); +To achieve a glass like background in the 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. -glassView.Content = timePicker; - -{% 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 time picker displays its dialog surface, enable the liquid glass effect by setting [EnableLiquidGlassEffect]() to true. +The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfTimePicker` control: {% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} {% endhighlight %} -{% highlight c# %} - -using Syncfusion.Maui.Core; -using Syncfusion.Maui.TimePicker; - -var timePicker = new SfTimePicker -{ - // Applies acrylic/glass effect to the dialog surface - EnableLiquidGlassEffect = true -}; +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% 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 time picker. -- [EnableLiquidGlassEffect]() (dialog): Enables the glass effect for the time picker’s dialog surface. - -## Best Practices and Tips - -- Hosting the 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 [SfTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TimePicker.SfTimePicker.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/Toolbar/liquid-glass-effect.md b/MAUI/Toolbar/liquid-glass-effect.md index 09e840077..94312a9a2 100644 --- a/MAUI/Toolbar/liquid-glass-effect.md +++ b/MAUI/Toolbar/liquid-glass-effect.md @@ -7,82 +7,39 @@ control: Toolbar (SfToolbar) documentation: ug --- -# Liquid Glass Support +# Liquid Glass Effect in .NET MAUI Toolbar (SfToolbar) -The [SfToolbar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html) supports a liquid glass effect by setting the [EnableLiquidGlassEffect]() property to true. This enhances visual depth and readability when toolbars 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 Toolbar (SfToolbar) 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 Toolbar control: -## Apply Liquid Glass Effect to SfToolbar +### Step 1: Wrap the control inside glass effect view -Turn on the liquid glass effect on the toolbar by setting [EnableLiquidGlassEffect]() to true. +To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Toolbar` control, wrap the control inside the `SfGlassEffectView` class. -{% tabs %} -{% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +For more details, refer to the `Liquid Glass Getting Started documentation`. -{% endhighlight %} -{% highlight c# %} +### Step 2: Enable the liquid glass effect on Toolbar + +Set the `EnableLiquidGlassEffect` property to `true` in the `SfToolbar` 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 -using Syncfusion.Maui.Toolbar; +To achieve a glass like background in the Toolbar, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls. -var toolbar = new SfToolbar -{ - EnableLiquidGlassEffect = true, - HeightRequest = 56, - WidthRequest = 320 -}; +The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfToolbar` control: -toolbar.Items = new ObservableCollection -{ - new SfToolbarItem { Name = "Bold", ToolTipText = "Bold", Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" } }, - new SfToolbarItem { Name = "Italic", ToolTipText = "Italic", Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" } }, - new SfToolbarItem { Name = "Underline", ToolTipText = "Underline", Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" } } -}; +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} {% endhighlight %} {% endtabs %} N> -* Liquid Glass effects are most visible over images or colorful backgrounds. - -The following screenshot illustrates [SfToolbar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.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.` From f932a3c24bb224034bf875bd3e342320af5fa3bf Mon Sep 17 00:00:00 2001 From: MohamedHasan3644 <102596726+MohamedHasan3644@users.noreply.github.com> Date: Mon, 15 Dec 2025 20:26:21 +0530 Subject: [PATCH 2/5] Updated code snippet --- MAUI/Backdrop/liquid-glass-effect.md | 68 +++++++++++++++++++++- MAUI/Calendar/liquid-glass-effect.md | 40 ++++++++++++- MAUI/Cards/liquid-glass-effect.md | 40 ++++++++++++- MAUI/DatePicker/liquid-glass-effect.md | 40 ++++++++++++- MAUI/DateTimePicker/liquid-glass-effect.md | 40 ++++++++++++- MAUI/Picker/liquid-glass-effect.md | 40 ++++++++++++- MAUI/TimePicker/liquid-glass-effect.md | 41 ++++++++++++- MAUI/Toolbar/liquid-glass-effect.md | 55 ++++++++++++++++- 8 files changed, 348 insertions(+), 16 deletions(-) diff --git a/MAUI/Backdrop/liquid-glass-effect.md b/MAUI/Backdrop/liquid-glass-effect.md index 5e358d51d..a96cc3454 100644 --- a/MAUI/Backdrop/liquid-glass-effect.md +++ b/MAUI/Backdrop/liquid-glass-effect.md @@ -26,10 +26,74 @@ To achieve a glass like background in the Front or Back Layer, set the `Backgrou The following code snippet demonstrates how to apply the Liquid Glass Effect to the Front or Back layer of the `SfBackdropPage` control: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Backdrop; + +this.BackLayer = new BackdropBackLayer +{ + EnableLiquidGlassEffect = true, + Content = new Grid + { + Children = + { + new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill }, + new VerticalStackLayout + { + Padding = 16, + Children = { new Label { Text = "Back layer content", FontSize = 16 } } + } + } + } +}; + +this.FrontLayer = new BackdropFrontLayer +{ + EnableLiquidGlassEffect = true, + Content = new Grid + { + Children = + { + new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill }, + new VerticalStackLayout + { + Padding = 16, + Children = { new Label { Text = "Front layer content", FontSize = 16 } } + } + } + } +}; {% endhighlight %} {% endtabs %} diff --git a/MAUI/Calendar/liquid-glass-effect.md b/MAUI/Calendar/liquid-glass-effect.md index 3dff7478e..7e66749b0 100644 --- a/MAUI/Calendar/liquid-glass-effect.md +++ b/MAUI/Calendar/liquid-glass-effect.md @@ -32,10 +32,46 @@ To achieve a glass like background in the Calendar, set the `Background` propert The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfCalendar` control: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Core; +using Syncfusion.Maui.Calendar; + +var glassView = new SfGlassEffectsView +{ + CornerRadius = 20, + Padding = new Thickness(12), + EffectType = LiquidGlassEffectType.Regular, + EnableShadowEffect = true +}; + +var calendar = new SfCalendar(); + +glassView.Content = calendar; {% endhighlight %} {% endtabs %} diff --git a/MAUI/Cards/liquid-glass-effect.md b/MAUI/Cards/liquid-glass-effect.md index 5b5128081..fe60a6693 100644 --- a/MAUI/Cards/liquid-glass-effect.md +++ b/MAUI/Cards/liquid-glass-effect.md @@ -26,10 +26,46 @@ To achieve a glass like background in the card view, set the `Background` proper The following code snippet demonstrates how to apply the Liquid Glass Effect to the card view: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} +using Syncfusion.Maui.Cards; + +var card = new SfCardView +{ + EnableLiquidGlassEffect = true, +}; + +card.Content = new VerticalStackLayout +{ + 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." }, + } +}; {% endhighlight %} {% endtabs %} diff --git a/MAUI/DatePicker/liquid-glass-effect.md b/MAUI/DatePicker/liquid-glass-effect.md index 3b8cfd269..c7833a66c 100644 --- a/MAUI/DatePicker/liquid-glass-effect.md +++ b/MAUI/DatePicker/liquid-glass-effect.md @@ -32,10 +32,46 @@ To achieve a glass like background in the Date Picker, set the `Background` prop The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDatePicker` control: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Core; +using Syncfusion.Maui.Picker; + +var glassView = new SfGlassEffectsView +{ + CornerRadius = 20, + Padding = new Thickness(12), + EffectType = LiquidGlassEffectType.Regular, + EnableShadowEffect = true +}; + +var datePicker = new SfDatePicker(); + +glassView.Content = datePicker; {% endhighlight %} {% endtabs %} diff --git a/MAUI/DateTimePicker/liquid-glass-effect.md b/MAUI/DateTimePicker/liquid-glass-effect.md index a1c6f2f9e..51d25c04e 100644 --- a/MAUI/DateTimePicker/liquid-glass-effect.md +++ b/MAUI/DateTimePicker/liquid-glass-effect.md @@ -32,10 +32,46 @@ To achieve a glass like background in the Date Time Picker, set the `Background` The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimePicker` control: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Core; +using Syncfusion.Maui.Picker; + +var glassView = new SfGlassEffectsView +{ + CornerRadius = 20, + Padding = new Thickness(12), + EffectType = LiquidGlassEffectType.Regular, + EnableShadowEffect = true +}; + +var dateTimePicker = new SfDateTimePicker(); + +glassView.Content = dateTimePicker; {% endhighlight %} {% endtabs %} diff --git a/MAUI/Picker/liquid-glass-effect.md b/MAUI/Picker/liquid-glass-effect.md index 0159b84c7..7cb17200a 100644 --- a/MAUI/Picker/liquid-glass-effect.md +++ b/MAUI/Picker/liquid-glass-effect.md @@ -32,10 +32,46 @@ To achieve a glass like background in the Picker, set the `Background` property The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfPicker` control: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Core; +using Syncfusion.Maui.Picker; + +var glassView = new SfGlassEffectsView +{ + CornerRadius = 20, + Padding = new Thickness(12), + EffectType = LiquidGlassEffectType.Regular, + EnableShadowEffect = true +}; + +var picker = new SfPicker(); + +glassView.Content = picker; {% endhighlight %} {% endtabs %} diff --git a/MAUI/TimePicker/liquid-glass-effect.md b/MAUI/TimePicker/liquid-glass-effect.md index cec6303a8..1ffdd15f4 100644 --- a/MAUI/TimePicker/liquid-glass-effect.md +++ b/MAUI/TimePicker/liquid-glass-effect.md @@ -32,10 +32,47 @@ To achieve a glass like background in the Time Picker, set the `Background` prop The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfTimePicker` control: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Core; +using Syncfusion.Maui.TimePicker; + +var glassView = new SfGlassEffectsView +{ + CornerRadius = 20, + Padding = new Thickness(12), + EffectType = LiquidGlassEffectType.Regular, + EnableShadowEffect = true +}; + +var timePicker = new SfTimePicker(); + +glassView.Content = timePicker; {% endhighlight %} {% endtabs %} diff --git a/MAUI/Toolbar/liquid-glass-effect.md b/MAUI/Toolbar/liquid-glass-effect.md index 94312a9a2..91437ea60 100644 --- a/MAUI/Toolbar/liquid-glass-effect.md +++ b/MAUI/Toolbar/liquid-glass-effect.md @@ -32,10 +32,61 @@ To achieve a glass like background in the Toolbar, set the `Background` property The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfToolbar` control: {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +using Syncfusion.Maui.Toolbar; + +var toolbar = new SfToolbar +{ + EnableLiquidGlassEffect = true, + HeightRequest = 56, + WidthRequest = 320 +}; + +toolbar.Items = new ObservableCollection +{ + new SfToolbarItem { Name = "Bold", ToolTipText = "Bold", Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" } }, + new SfToolbarItem { Name = "Italic", ToolTipText = "Italic", Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" } }, + new SfToolbarItem { Name = "Underline", ToolTipText = "Underline", Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" } } +}; {% endhighlight %} {% endtabs %} From 890c8994f176a66cd022b28a12569232de426e6c Mon Sep 17 00:00:00 2001 From: MohamedHasan3644 <102596726+MohamedHasan3644@users.noreply.github.com> Date: Wed, 17 Dec 2025 12:08:05 +0530 Subject: [PATCH 3/5] Updated API Link and content --- MAUI/Backdrop/liquid-glass-effect.md | 4 ++-- MAUI/Calendar/liquid-glass-effect.md | 8 ++++---- MAUI/Cards/liquid-glass-effect.md | 4 ++-- MAUI/DatePicker/liquid-glass-effect.md | 8 ++++---- MAUI/DateTimePicker/liquid-glass-effect.md | 8 ++++---- MAUI/Picker/liquid-glass-effect.md | 8 ++++---- MAUI/TimePicker/liquid-glass-effect.md | 8 ++++---- MAUI/Toolbar/liquid-glass-effect.md | 14 ++++---------- 8 files changed, 28 insertions(+), 34 deletions(-) diff --git a/MAUI/Backdrop/liquid-glass-effect.md b/MAUI/Backdrop/liquid-glass-effect.md index a96cc3454..3d03b0789 100644 --- a/MAUI/Backdrop/liquid-glass-effect.md +++ b/MAUI/Backdrop/liquid-glass-effect.md @@ -17,13 +17,13 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Front ### Step 1: Enable the liquid glass effect on Front or Back Layer -Set the `EnableLiquidGlassEffect` property to `true` in the `SfBackdropPage` control's Front or Back Layer to apply the Liquid Glass Effect. +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. ### Step 2: Customize the background 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` control: +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 tabtitle="MainPage.xaml" %} diff --git a/MAUI/Calendar/liquid-glass-effect.md b/MAUI/Calendar/liquid-glass-effect.md index 7e66749b0..ca8380615 100644 --- a/MAUI/Calendar/liquid-glass-effect.md +++ b/MAUI/Calendar/liquid-glass-effect.md @@ -17,19 +17,19 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Calend ### Step 1: Wrap the control inside glass effect view -To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Calendar` control, wrap the control inside the `SfGlassEffectView` class. +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. -For more details, refer to the `Liquid Glass Getting Started documentation`. +For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started). ### Step 2: Enable the liquid glass effect on Image Editor -Set the `EnableLiquidGlassEffect` property to `true` in the `SfCalendar` 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. +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` control: +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 tabtitle="MainPage.xaml" %} diff --git a/MAUI/Cards/liquid-glass-effect.md b/MAUI/Cards/liquid-glass-effect.md index fe60a6693..9a71dc386 100644 --- a/MAUI/Cards/liquid-glass-effect.md +++ b/MAUI/Cards/liquid-glass-effect.md @@ -17,13 +17,13 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Card V ### Step 1: Enable the liquid glass effect on Card View -Set the `EnableLiquidGlassEffect` property to `true` in the card view to apply the Liquid Glass Effect. +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 card view: +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 tabtitle="MainPage.xaml" %} diff --git a/MAUI/DatePicker/liquid-glass-effect.md b/MAUI/DatePicker/liquid-glass-effect.md index c7833a66c..b1ff17e41 100644 --- a/MAUI/DatePicker/liquid-glass-effect.md +++ b/MAUI/DatePicker/liquid-glass-effect.md @@ -17,19 +17,19 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Date P ### Step 1: Wrap the control inside glass effect view -To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Date Picker` control, wrap the control inside the `SfGlassEffectView` class. +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. -For more details, refer to the `Liquid Glass Getting Started documentation`. +For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started). ### Step 2: Enable the liquid glass effect on Date Picker -Set the `EnableLiquidGlassEffect` property to `true` in the `SfDatePicker` 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. +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` control: +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 tabtitle="MainPage.xaml" %} diff --git a/MAUI/DateTimePicker/liquid-glass-effect.md b/MAUI/DateTimePicker/liquid-glass-effect.md index 51d25c04e..e47cb0242 100644 --- a/MAUI/DateTimePicker/liquid-glass-effect.md +++ b/MAUI/DateTimePicker/liquid-glass-effect.md @@ -17,19 +17,19 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Date T ### Step 1: Wrap the control inside glass effect view -To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Date Time Picker` control, wrap the control inside the `SfGlassEffectView` class. +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. -For more details, refer to the `Liquid Glass Getting Started documentation`. +For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started). ### Step 2: Enable the liquid glass effect on Date Time Picker -Set the `EnableLiquidGlassEffect` property to `true` in the `SfDateTimePicker` 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. +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` control: +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 tabtitle="MainPage.xaml" %} diff --git a/MAUI/Picker/liquid-glass-effect.md b/MAUI/Picker/liquid-glass-effect.md index 7cb17200a..5bb9dab26 100644 --- a/MAUI/Picker/liquid-glass-effect.md +++ b/MAUI/Picker/liquid-glass-effect.md @@ -17,19 +17,19 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Picker ### Step 1: Wrap the control inside glass effect view -To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Picker` control, wrap the control inside the `SfGlassEffectView` class. +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. -For more details, refer to the `Liquid Glass Getting Started documentation`. +For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started). ### Step 2: Enable the liquid glass effect on Picker -Set the `EnableLiquidGlassEffect` property to `true` in the `SfPicker` 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. +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` control: +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 tabtitle="MainPage.xaml" %} diff --git a/MAUI/TimePicker/liquid-glass-effect.md b/MAUI/TimePicker/liquid-glass-effect.md index 1ffdd15f4..837d0471f 100644 --- a/MAUI/TimePicker/liquid-glass-effect.md +++ b/MAUI/TimePicker/liquid-glass-effect.md @@ -17,19 +17,19 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Time P ### Step 1: Wrap the control inside glass effect view -To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Time Picker` control, wrap the control inside the `SfGlassEffectView` class. +To apply the Liquid Glass Effect to Syncfusion® .NET MAUI [Time Picker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfTimePicker.html) control, wrap the control inside the [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) class. -For more details, refer to the `Liquid Glass Getting Started documentation`. +For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started). ### Step 2: Enable the liquid glass effect on Time Picker -Set the `EnableLiquidGlassEffect` property to `true` in the `SfTimePicker` 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. +Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.PickerBase.html#Syncfusion_Maui_Picker_PickerBase_EnableLiquidGlassEffect) property to `true` in the [SfTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfTimePicker.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 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 `SfTimePicker` control: +The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfTimePicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Picker.SfTimePicker.html) control: {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} diff --git a/MAUI/Toolbar/liquid-glass-effect.md b/MAUI/Toolbar/liquid-glass-effect.md index 91437ea60..a38ec9b78 100644 --- a/MAUI/Toolbar/liquid-glass-effect.md +++ b/MAUI/Toolbar/liquid-glass-effect.md @@ -15,21 +15,15 @@ The Liquid Glass Effect introduces a modern, translucent design with adaptive co Follow these steps to enable and configure the Liquid Glass Effect in the Toolbar control: -### Step 1: Wrap the control inside glass effect view +### Step 1: Enable the liquid glass effect on Toolbar -To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Toolbar` control, wrap the control inside the `SfGlassEffectView` class. +Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html#Syncfusion_Maui_Toolbar_SfToolbar_EnableLiquidGlassEffect) property to `true` in the [SfToolbar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.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. -For more details, refer to the `Liquid Glass Getting Started documentation`. - -### Step 2: Enable the liquid glass effect on Toolbar - -Set the `EnableLiquidGlassEffect` property to `true` in the `SfToolbar` 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 +### Step 2: Customize the background To achieve a glass like background in the Toolbar, 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 `SfToolbar` control: +The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfToolbar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfToolbar.html) control: {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} From 1d2aff23d4cd962bc7cc7d8f9cdf0e5fa9250971 Mon Sep 17 00:00:00 2001 From: MohamedHasan3644 <102596726+MohamedHasan3644@users.noreply.github.com> Date: Wed, 17 Dec 2025 22:48:54 +0530 Subject: [PATCH 4/5] Updated Codes for liquid glass --- MAUI/Backdrop/liquid-glass-effect.md | 85 ++++++----- MAUI/Calendar/liquid-glass-effect.md | 64 ++++++-- MAUI/Cards/liquid-glass-effect.md | 73 +++++++--- MAUI/DatePicker/liquid-glass-effect.md | 79 +++++++--- MAUI/DateTimePicker/liquid-glass-effect.md | 87 ++++++++--- MAUI/Picker/liquid-glass-effect.md | 102 ++++++++++--- MAUI/TimePicker/liquid-glass-effect.md | 81 ++++++++--- MAUI/Toolbar/liquid-glass-effect.md | 162 ++++++++++++++++----- 8 files changed, 554 insertions(+), 179 deletions(-) diff --git a/MAUI/Backdrop/liquid-glass-effect.md b/MAUI/Backdrop/liquid-glass-effect.md index 3d03b0789..8ffe5afe5 100644 --- a/MAUI/Backdrop/liquid-glass-effect.md +++ b/MAUI/Backdrop/liquid-glass-effect.md @@ -32,69 +32,78 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AcrylicBackdropPage" xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop"> - + - + - - - + + + + + + + + + + + + + + Appetizers + Soups + Desserts + Salads + + + - + - - - - - - - + {% endhighlight %} {% 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 -{ - 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 %} diff --git a/MAUI/Calendar/liquid-glass-effect.md b/MAUI/Calendar/liquid-glass-effect.md index ca8380615..6076c208c 100644 --- a/MAUI/Calendar/liquid-glass-effect.md +++ b/MAUI/Calendar/liquid-glass-effect.md @@ -40,38 +40,70 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:calendar="clr-namespace:Syncfusion.Maui.Calendar;assembly=Syncfusion.Maui.Calendar" xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" x:Class="AcrylicCalendarPage"> - - - - - - - + + + + + + + + + + + + {% endhighlight %} {% 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 } + } + } +}; + +// 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 }; 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 %} diff --git a/MAUI/Cards/liquid-glass-effect.md b/MAUI/Cards/liquid-glass-effect.md index 9a71dc386..c19b7d344 100644 --- a/MAUI/Cards/liquid-glass-effect.md +++ b/MAUI/Cards/liquid-glass-effect.md @@ -33,40 +33,73 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:cards="clr-namespace:Syncfusion.Maui.Cards;assembly=Syncfusion.Maui.Cards" x:Class="AcrylicCardsPage"> - - - - - - - + + + + + + + + + + + - {% endhighlight %} {% highlight c# tabtitle="MainPage.xaml.cs" %} -using Syncfusion.Maui.Cards; -var card = new SfCardView +// 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() { 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 %} diff --git a/MAUI/DatePicker/liquid-glass-effect.md b/MAUI/DatePicker/liquid-glass-effect.md index b1ff17e41..e895f5009 100644 --- a/MAUI/DatePicker/liquid-glass-effect.md +++ b/MAUI/DatePicker/liquid-glass-effect.md @@ -40,38 +40,83 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:datepicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker" xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" x:Class="AcrylicDatePickerPage"> - - - - - - - + + + + + + + + + + + + + + + + {% endhighlight %} {% 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(); +var datePicker = new SfDatePicker() +{ + 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 %} diff --git a/MAUI/DateTimePicker/liquid-glass-effect.md b/MAUI/DateTimePicker/liquid-glass-effect.md index e47cb0242..68710ae80 100644 --- a/MAUI/DateTimePicker/liquid-glass-effect.md +++ b/MAUI/DateTimePicker/liquid-glass-effect.md @@ -40,38 +40,89 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:datetimepicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker" xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" x:Class="AcrylicDateTimePickerPage"> - - - - - - - + + + + + + + + + + + + + + + + + + + {% endhighlight %} {% 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 SfGlassEffectView() { + EffectType = GlassEffectType.Regular, CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true + WidthRequest = 350, + HeightRequest = 350 }; -var dateTimePicker = new SfDateTimePicker(); +var dateTimePicker = new SfDateTimePicker() +{ + 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 %} diff --git a/MAUI/Picker/liquid-glass-effect.md b/MAUI/Picker/liquid-glass-effect.md index 5bb9dab26..0bf286279 100644 --- a/MAUI/Picker/liquid-glass-effect.md +++ b/MAUI/Picker/liquid-glass-effect.md @@ -40,38 +40,104 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker" xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" x:Class="AcrylicPickerPage"> - - - - - - - + + + + + + + + + + + + + + + + + {% endhighlight %} {% 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 SfGlassEffectView() { + EffectType = GlassEffectType.Regular, CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true + WidthRequest = 350, + HeightRequest = 350 +}; + +var picker = new SfPicker() +{ + EnableLiquidGlassEffect = true, + Background = Colors.Transparent, + HeaderView = new PickerHeaderView() + { + HeightRequest = 40, + Text = "Select City", + Background = Colors.Transparent + } +}; + +ObservableCollection cityName = new ObservableCollection(); +cityName.Add("Chennai"); +cityName.Add("Mumbai"); +cityName.Add("Delhi"); +cityName.Add("Kolkata"); +cityName.Add("Bangalore"); +cityName.Add("Hyderabad"); +cityName.Add("Pune"); +cityName.Add("Ahmedabad"); +cityName.Add("Jaipur"); +cityName.Add("Lucknow"); +cityName.Add("Chandigarh"); +PickerColumn pickerColumn = new PickerColumn() +{ + ItemsSource = cityName, }; -var picker = new SfPicker(); +picker.Columns.Add(pickerColumn); glassView.Content = picker; +innerGrid.Children.Add(glassView); +mainGrid.Children.Add(innerGrid); +this.Content = mainGrid; {% endhighlight %} {% endtabs %} diff --git a/MAUI/TimePicker/liquid-glass-effect.md b/MAUI/TimePicker/liquid-glass-effect.md index 837d0471f..2ecc58255 100644 --- a/MAUI/TimePicker/liquid-glass-effect.md +++ b/MAUI/TimePicker/liquid-glass-effect.md @@ -40,39 +40,82 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:timepicker="clr-namespace:Syncfusion.Maui.TimePicker;assembly=Syncfusion.Maui.TimePicker" xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" x:Class="AcrylicTimePickerPage"> - - - - - - - - + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# tabtitle="MainPage.xaml.cs" %} -using Syncfusion.Maui.Core; -using Syncfusion.Maui.TimePicker; +// 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 SfGlassEffectView() { + EffectType = GlassEffectType.Regular, CornerRadius = 20, - Padding = new Thickness(12), - EffectType = LiquidGlassEffectType.Regular, - EnableShadowEffect = true + WidthRequest = 350, + HeightRequest = 350 }; -var timePicker = new SfTimePicker(); +var timePicker = new SfTimePicker() +{ + EnableLiquidGlassEffect = true, + Background = Colors.Transparent, + WidthRequest = 350, + HeightRequest = 350, + ColumnHeaderView = new TimePickerColumnHeaderView() + { + Background = Colors.Transparent + } +}; glassView.Content = timePicker; +innerGrid.Children.Add(glassView); +mainGrid.Children.Add(innerGrid); +this.Content = mainGrid; {% endhighlight %} {% endtabs %} diff --git a/MAUI/Toolbar/liquid-glass-effect.md b/MAUI/Toolbar/liquid-glass-effect.md index a38ec9b78..dbacb9566 100644 --- a/MAUI/Toolbar/liquid-glass-effect.md +++ b/MAUI/Toolbar/liquid-glass-effect.md @@ -33,54 +33,150 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:toolbar="clr-namespace:Syncfusion.Maui.Toolbar;assembly=Syncfusion.Maui.Toolbar" x:Class="AcrylicToolbarPage"> - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# tabtitle="MainPage.xaml.cs" %} -using Syncfusion.Maui.Toolbar; +// 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 toolbar = new SfToolbar +// Inner grid with fixed width +var innerGrid = new Grid(); + +// Toolbar with liquid glass effect +var toolbar = new SfToolbar() { EnableLiquidGlassEffect = true, HeightRequest = 56, - WidthRequest = 320 + CornerRadius = 25, + SelectionCornerRadius = 25, + Background = Colors.Transparent, }; -toolbar.Items = new ObservableCollection +// Toolbar items +ObservableCollection itemCollection = new ObservableCollection() { - new SfToolbarItem { Name = "Bold", ToolTipText = "Bold", Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" } }, - new SfToolbarItem { Name = "Italic", ToolTipText = "Italic", Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" } }, - new SfToolbarItem { Name = "Underline", ToolTipText = "Underline", Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" } } + new SfToolbarItem() + { + Name = "Bold", + Icon = new FontImageSource { Glyph = "\uE770", FontFamily = "MauiMaterialAssets" } + }, + new SfToolbarItem() + { + Name = "Underline", + Icon = new FontImageSource { Glyph = "\uE762", FontFamily = "MauiMaterialAssets" } + }, + new SfToolbarItem() + { + Name = "Italic", + Icon = new FontImageSource { Glyph = "\uE771", FontFamily = "MauiMaterialAssets" } + }, + new SfToolbarItem() + { + Name = "AlignLeft", + Icon = new FontImageSource { Glyph = "\uE751", FontFamily = "MauiMaterialAssets" } + }, + new SfToolbarItem() + { + Name = "AlignRight", + Icon = new FontImageSource { Glyph = "\uE753", FontFamily = "MauiMaterialAssets" } + }, + new SfToolbarItem() + { + Name = "AlignCenter", + Icon = new FontImageSource { Glyph = "\uE752", FontFamily = "MauiMaterialAssets" } + }, + new SfToolbarItem() + { + Name = "AlignJustify", + Icon = new FontImageSource { Glyph = "\uE74F", FontFamily = "MauiMaterialAssets" } + } }; +toolbar.Items = itemCollection; + +innerGrid.Children.Add(toolbar); +mainGrid.Children.Add(innerGrid); +this.Content = mainGrid; {% endhighlight %} {% endtabs %} From e3a4ce51c97c577ac5d0d17141a427c91aed8084 Mon Sep 17 00:00:00 2001 From: MohamedHasan3644 <102596726+MohamedHasan3644@users.noreply.github.com> Date: Wed, 17 Dec 2025 22:52:56 +0530 Subject: [PATCH 5/5] Resolved review concerns --- MAUI/Calendar/liquid-glass-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/Calendar/liquid-glass-effect.md b/MAUI/Calendar/liquid-glass-effect.md index 6076c208c..fac2b0bda 100644 --- a/MAUI/Calendar/liquid-glass-effect.md +++ b/MAUI/Calendar/liquid-glass-effect.md @@ -21,7 +21,7 @@ To apply the Liquid Glass Effect to Syncfusion® .NET MAUI [Calendar](https://he For more details, refer to the [Liquid Glass Getting Started documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started). -### Step 2: Enable the liquid glass effect on Image Editor +### Step 2: Enable the liquid glass effect on Calendar 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.