diff --git a/MAUI/Segmented-Control/liquid-glass-effect.md b/MAUI/Segmented-Control/liquid-glass-effect.md new file mode 100644 index 0000000000..ef7dc05522 --- /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 (SfSegmentedControl) control. +platform: maui +control: SfSegmentedControl +documentation: ug +--- + +# 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. + +## 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® [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](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started). + +### Step 2: Enable the liquid glass effect on Segmented control + +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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html) 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), + Background = 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 f02ad51d02..ac14c080eb 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -1255,6 +1255,7 @@
  • Events
  • Right To Left
  • Accessibility
  • +
  • Liquid Glass Support