From 3a97232b2510a1c1496cc5f182e6db00936fb4f4 Mon Sep 17 00:00:00 2001 From: Harish-4429 Date: Tue, 16 Dec 2025 12:59:58 +0530 Subject: [PATCH 1/5] Added liguid gass effect md files for scheduler and segmented control --- MAUI/Scheduler/liquid-glass-effect.md | 111 ++++++++++++++++ MAUI/Segmented-Control/liquid-glass-effect.md | 120 ++++++++++++++++++ maui-toc.html | 2 + 3 files changed, 233 insertions(+) create mode 100644 MAUI/Scheduler/liquid-glass-effect.md create mode 100644 MAUI/Segmented-Control/liquid-glass-effect.md diff --git a/MAUI/Scheduler/liquid-glass-effect.md b/MAUI/Scheduler/liquid-glass-effect.md new file mode 100644 index 0000000000..77c8a0640e --- /dev/null +++ b/MAUI/Scheduler/liquid-glass-effect.md @@ -0,0 +1,111 @@ +--- +layout: post +title: Liquid Glass Effect for .NET MAUI Scheduler | Syncfusion® +description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Scheduler (SfScheduler) control. +platform: MAUI +control: SfScheduler +documentation: ug +--- + +# Liquid Glass Effect in .NET MAUI Scheduler + +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 Scheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html) control. + +## Apply liquid glass effect + +Follow these steps to enable and configure the Liquid Glass Effect in the Scheduler control: + +### Step 1: Wrap the control inside glass effect view + +To apply the Liquid Glass Effect to the Syncfusion® [.NET MAUI Scheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html) control, wrap the control inside the `SfGlassEffectView` class. + +For more details, refer to the `Liquid Glass Getting Started documentation`. + +### Step 2: Enable the liquid glass effect on Image Editor + +Set the `EnableLiquidGlassEffect` property to `true` in the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.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 Scheduler, 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 [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html) control: + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +var gradientBrush = new LinearGradientBrush +{ + StartPoint = new Point(0, 0), + EndPoint = new Point(0, 1), + GradientStops = new GradientStopCollection + { + 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 grid = new Grid +{ + Background = gradientBrush +}; + +var stackLayout = new StackLayout(); +var glassView = new SfGlassEffectView +{ + HeightRequest = 18, + CornerRadius = 9, + EffectType = LiquidGlassEffectType.Clear +}; + +var scheduler = new SfScheduler +{ + Margin = new Thickness(5), + BackgroundColor = Colors.Transparent, + HeaderView = new SchedulerHeaderView() + { + EnableLiquidGlassEffect = true, + Background = Colors.Transparent + } +}; + +glassView.Content = scheduler; +stackLayout.Children.Add(glassView); +grid.Children.Add(stackLayout); +this.Content = grid; + +{% endhighlight %} +{% endtabs %} + +N> +* 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/Segmented-Control/liquid-glass-effect.md b/MAUI/Segmented-Control/liquid-glass-effect.md new file mode 100644 index 0000000000..1e88fbe093 --- /dev/null +++ b/MAUI/Segmented-Control/liquid-glass-effect.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Liquid Glass Support for .NET MAUI Segmented control | Syncfusion® +description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI Segmented control. +platform: maui +control: SfSegmentedControl +documentation: ug +--- + +# Liquid Glass Effect in .NET MAUI Segmented control (SfSegmentedControl) + +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 Segmented control (SfSegmentedControl)](https://www.syncfusion.com/maui-controls/maui-segmented-control) control. + +## Apply liquid glass effect + +Follow these steps to enable and configure the Liquid Glass Effect in the Segmented control control: + +### Step 1: Wrap the control inside glass effect view + +To apply the Liquid Glass Effect to Syncfusion® [.NET MAUI Segmented control (SfSegmentedControl)](https://www.syncfusion.com/maui-controls/maui-segmented-control) control, wrap the control inside the `SfGlassEffectView` class. + +For more details, refer to the `Liquid Glass Getting Started documentation`. + +### Step 2: Enable the liquid glass effect on Segmented control + +Set the `EnableLiquidGlassEffect` property to `true` in the [SfSegmentedControl](https://www.syncfusion.com/maui-controls/maui-segmented-control) 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 Segmented Control, 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 `SfSegmentedControl` control: + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + Day + Week + Month + Year + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +var gradientBrush = new LinearGradientBrush +{ + StartPoint = new Point(0, 0), + EndPoint = new Point(0, 1), + GradientStops = new GradientStopCollection + { + 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 grid = new Grid +{ + Background = gradientBrush +}; + +var stackLayout = new StackLayout(); +var glassView = new SfGlassEffectView +{ + CornerRadius = 9, + EffectType = LiquidGlassEffectType.Clear +}; + +var segmentedControl = new SfSegmentedControl +{ + Margin = new Thickness(5), + BackgroundColor = Colors.Transparent, + ItemsSource = new List + { + new SfSegmentItem() {Text = "Day"}, + new SfSegmentItem() {Text = "Week"}, + new SfSegmentItem() {Text = "Month"}, + new SfSegmentItem() {Text = "Year"}, + } +}; + +glassView.Content = segmentedControl; +stackLayout.Children.Add(glassView); +grid.Children.Add(stackLayout); +this.Content = grid; + +{% endhighlight %} +{% endtabs %} + +N> +* Supported on `macOS 26 or higher` and `iOS 26 or higher`. +* This feature is available only in `.NET 10.` diff --git a/maui-toc.html b/maui-toc.html index 0798f9ff70..c22a3f6a14 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -1239,6 +1239,7 @@
  • Localization
  • Accessibility
  • AI powered Smart Appointment Booking
    • +
  • Liquid Glass Support
  • @@ -1255,6 +1256,7 @@
  • Events
  • Right To Left
  • Accessibility
    • +
  • Liquid Glass Support
  • From 72a9016819c57df28867390b2e433b9e53080afb Mon Sep 17 00:00:00 2001 From: Harish-4429 Date: Tue, 16 Dec 2025 13:01:50 +0530 Subject: [PATCH 2/5] Updated the proper name --- MAUI/Scheduler/liquid-glass-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MAUI/Scheduler/liquid-glass-effect.md b/MAUI/Scheduler/liquid-glass-effect.md index 77c8a0640e..752986704d 100644 --- a/MAUI/Scheduler/liquid-glass-effect.md +++ b/MAUI/Scheduler/liquid-glass-effect.md @@ -21,7 +21,7 @@ To apply the Liquid Glass Effect to the Syncfusion® [.NET MAUI Scheduler](https For more details, refer to the `Liquid Glass Getting Started documentation`. -### Step 2: Enable the liquid glass effect on Image Editor +### Step 2: Enable the liquid glass effect on Scheduler Set the `EnableLiquidGlassEffect` property to `true` in the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.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. From 046be87409edcedf8967b5dc0844a72df7ddb4fd Mon Sep 17 00:00:00 2001 From: Harish-4429 Date: Tue, 16 Dec 2025 13:10:14 +0530 Subject: [PATCH 3/5] Cleared ci issues --- MAUI/Segmented-Control/liquid-glass-effect.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MAUI/Segmented-Control/liquid-glass-effect.md b/MAUI/Segmented-Control/liquid-glass-effect.md index 1e88fbe093..55d555f9b1 100644 --- a/MAUI/Segmented-Control/liquid-glass-effect.md +++ b/MAUI/Segmented-Control/liquid-glass-effect.md @@ -1,13 +1,13 @@ --- layout: post title: Liquid Glass Support for .NET MAUI Segmented control | Syncfusion® -description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI Segmented control. +description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI Segmented (SfSegmentedControl) control. platform: maui control: SfSegmentedControl documentation: ug --- -# Liquid Glass Effect in .NET MAUI Segmented control (SfSegmentedControl) +# Liquid Glass Effect in .NET MAUI Segmented control 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 Segmented control (SfSegmentedControl)](https://www.syncfusion.com/maui-controls/maui-segmented-control) control. From 5f4bbfb1d28210860872b18688e485afba2b0b5e Mon Sep 17 00:00:00 2001 From: Harish-4429 Date: Tue, 16 Dec 2025 16:47:16 +0530 Subject: [PATCH 4/5] Removed Scheduler liquid glass content --- MAUI/Scheduler/liquid-glass-effect.md | 111 -------------------------- maui-toc.html | 1 - 2 files changed, 112 deletions(-) delete mode 100644 MAUI/Scheduler/liquid-glass-effect.md diff --git a/MAUI/Scheduler/liquid-glass-effect.md b/MAUI/Scheduler/liquid-glass-effect.md deleted file mode 100644 index 752986704d..0000000000 --- a/MAUI/Scheduler/liquid-glass-effect.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -layout: post -title: Liquid Glass Effect for .NET MAUI Scheduler | Syncfusion® -description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Scheduler (SfScheduler) control. -platform: MAUI -control: SfScheduler -documentation: ug ---- - -# Liquid Glass Effect in .NET MAUI Scheduler - -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 Scheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html) control. - -## Apply liquid glass effect - -Follow these steps to enable and configure the Liquid Glass Effect in the Scheduler control: - -### Step 1: Wrap the control inside glass effect view - -To apply the Liquid Glass Effect to the Syncfusion® [.NET MAUI Scheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html) control, wrap the control inside the `SfGlassEffectView` class. - -For more details, refer to the `Liquid Glass Getting Started documentation`. - -### Step 2: Enable the liquid glass effect on Scheduler - -Set the `EnableLiquidGlassEffect` property to `true` in the [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.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 Scheduler, 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 [SfScheduler](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html) control: - -{% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" %} - -var gradientBrush = new LinearGradientBrush -{ - StartPoint = new Point(0, 0), - EndPoint = new Point(0, 1), - GradientStops = new GradientStopCollection - { - 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 grid = new Grid -{ - Background = gradientBrush -}; - -var stackLayout = new StackLayout(); -var glassView = new SfGlassEffectView -{ - HeightRequest = 18, - CornerRadius = 9, - EffectType = LiquidGlassEffectType.Clear -}; - -var scheduler = new SfScheduler -{ - Margin = new Thickness(5), - BackgroundColor = Colors.Transparent, - HeaderView = new SchedulerHeaderView() - { - EnableLiquidGlassEffect = true, - Background = Colors.Transparent - } -}; - -glassView.Content = scheduler; -stackLayout.Children.Add(glassView); -grid.Children.Add(stackLayout); -this.Content = grid; - -{% endhighlight %} -{% endtabs %} - -N> -* 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-toc.html b/maui-toc.html index c22a3f6a14..1ce5c5fc55 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -1239,7 +1239,6 @@
  • Localization
  • Accessibility
  • AI powered Smart Appointment Booking
    • -
  • Liquid Glass Support
  • From 991f6cd999ab009e48698ec069ab422629436983 Mon Sep 17 00:00:00 2001 From: Harish-4429 Date: Tue, 16 Dec 2025 20:54:52 +0530 Subject: [PATCH 5/5] Added api links --- MAUI/Segmented-Control/liquid-glass-effect.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/MAUI/Segmented-Control/liquid-glass-effect.md b/MAUI/Segmented-Control/liquid-glass-effect.md index 55d555f9b1..ef7dc05522 100644 --- a/MAUI/Segmented-Control/liquid-glass-effect.md +++ b/MAUI/Segmented-Control/liquid-glass-effect.md @@ -17,19 +17,19 @@ Follow these steps to enable and configure the Liquid Glass Effect in the Segmen ### Step 1: Wrap the control inside glass effect view -To apply the Liquid Glass Effect to Syncfusion® [.NET MAUI Segmented control (SfSegmentedControl)](https://www.syncfusion.com/maui-controls/maui-segmented-control) control, wrap the control inside the `SfGlassEffectView` class. +To apply the Liquid Glass Effect to Syncfusion® [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.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 Segmented control -Set the `EnableLiquidGlassEffect` property to `true` in the [SfSegmentedControl](https://www.syncfusion.com/maui-controls/maui-segmented-control) 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.Buttons.SfSegmentedControl.html#Syncfusion_Maui_Buttons_SfSegmentedControl_EnableLiquidGlassEffect). property to `true` in the [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.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 Segmented Control, 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 `SfSegmentedControl` control: +The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html) control: {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} @@ -53,7 +53,7 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to + Background="Transparent" > Day @@ -97,7 +97,7 @@ var glassView = new SfGlassEffectView var segmentedControl = new SfSegmentedControl { Margin = new Thickness(5), - BackgroundColor = Colors.Transparent, + Background = Colors.Transparent, ItemsSource = new List { new SfSegmentItem() {Text = "Day"},