Skip to content

Commit d5b7c09

Browse files
Chozarajan-PChozarajan-P
authored
Merge pull request #3885 from syncfusion-content/ToolsLiquidGlassUG
Create LiquidGlassSupoort.md
2 parents f2263ea + ea9b925 commit d5b7c09

File tree

14 files changed

+998
-1
lines changed

14 files changed

+998
-1
lines changed

‎MAUI/Autocomplete/LiquidGlassSupport.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Autocomplete entry | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI Autocomplete (SfAutocomplete) control and more.
5+
platform: MAUI
6+
control: SfAutocomplete
7+
documentation: ug
8+
---
9+
10+
# Liquid glass support
11+
12+
The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) supports a liquid `glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectsView](). You can customize the effect using properties such as [EffectType](), [EnableShadowEffect](), and round the corners using [CornerRadius](). This approach improves visual depth and readability when SfAutocomplete is placed over images or colorful layouts. Additionally, the dropdown portion of SfAutocomplete applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
13+
14+
## Availability
15+
16+
1. This feature is supported on .NET 10 or greater.
17+
2. This feature is supported on mac or iOS 26 or greater.
18+
3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
19+
20+
## Prerequisites
21+
22+
- Add the Syncfusion.Maui.Core package (for SfGlassEffectsView) and Syncfusion.Maui.Inputs (for SfAutocomplete).
23+
24+
XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
25+
26+
{% tabs %}
27+
{% highlight xaml hl_lines="49 52" %}
28+
29+
<?xml version="1.0" encoding="utf-8" ?>
30+
<ContentPage
31+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
32+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
33+
xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
34+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
35+
x:Class="AcrylicAutocompleteBoxPage">
36+
37+
<Grid>
38+
<!-- Background to make acrylic blur visible -->
39+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
40+
<core:SfGlassEffectsView
41+
CornerRadius="20"
42+
HeightRequest="40"
43+
EffectType="Regular"
44+
EnableShadowEffect="True">
45+
46+
<inputs:SfAutocomplete
47+
EnableLiquidGlassEffect="True"
48+
ItemsSource="{Binding Employees}"
49+
DisplayMemberPath="Name"
50+
DropDownBackground="Transparent"
51+
Placeholder="Select employee"/>
52+
</core:SfGlassEffectsView>
53+
</Grid>
54+
</ContentPage>
55+
56+
{% endhighlight %}
57+
{% highlight c# hl_lines="74 77" %}
58+
59+
using Syncfusion.Maui.Core;
60+
using Syncfusion.Maui.Inputs;
61+
62+
var glassEffects = new SfGlassEffectsView
63+
{
64+
CornerRadius=20,
65+
HeightRequest=40,
66+
EffectType=LiquidGlassEffectType.Regular,
67+
EnableShadowEffect=True
68+
};
69+
70+
var Autocomplete = new SfAutocomplete
71+
{
72+
EnableLiquidGlassEffect = true, // Dropdown glass effect
73+
ItemsSource = viewModel.Employees,
74+
DisplayMemberPath = "Name",
75+
DropDownBackground= Colors.Transparent,
76+
Placeholder = "Select employee",
77+
};
78+
79+
glassEffects.Content = Autocomplete;
80+
81+
{% endhighlight %}
82+
{% endtabs %}
83+
84+
85+
The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.

‎MAUI/Button/LiquidGlassSupport.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Button | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI Button (SfButton) control and more.
5+
platform: MAUI
6+
control: SfButton
7+
documentation: ug
8+
---
9+
10+
# Liquid glass support
11+
12+
The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) provides `liquid glass` effect that gives the button a frosted, translucent appearance blending with the content behind it. When the glass effect is enabled, the button also scales while it is pressed, delivering a subtle, responsive interaction cue. This enhances visual depth and interactivity, especially when the button is placed over images or colorful layouts.
13+
14+
## Availability
15+
16+
1. Supported on .NET 10 or greater.
17+
2. Supported on mac or iOS 26 or greater.
18+
3. On platforms/versions below these requirements, the glass effect and scaling feedback are not applied; the button renders with the standard appearance.
19+
20+
XAML example Enable the glass effect on `SfButton`. When pressed, the button will `scale` while the effect is enabled.
21+
22+
{% tabs %}
23+
{% highlight xaml hl_lines="49 52" %}
24+
25+
<?xml version="1.0" encoding="utf-8" ?>
26+
<ContentPage
27+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
28+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
29+
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
30+
x:Class="ButtonGlassEffectPage">
31+
32+
<Grid>
33+
<!-- Background to showcase the glass and scaling effects -->
34+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
35+
36+
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center" HorizontalOptions="Center">
37+
<buttons:SfButton
38+
x:Name="GlassButton"
39+
Text="Continue"
40+
EnableLiquidGlassEffect="True"
41+
WidthRequest="180"
42+
CornerRadius="24"
43+
HeightRequest="48" />
44+
</StackLayout>
45+
</Grid>
46+
</ContentPage>
47+
48+
{% endhighlight %}
49+
{% highlight c# hl_lines="74 77" %}
50+
51+
using Syncfusion.Maui.Buttons;
52+
53+
var glassButton = new SfButton
54+
{
55+
Text = "Continue",
56+
AutomationId = "Acrylic Button",
57+
EnableLiquidGlassEffect = true, // Enables glass look and press-time scaling
58+
WidthRequest = 180,
59+
HeightRequest = 48
60+
};
61+
62+
{% endhighlight %}
63+
{% endtabs %}
64+
65+
The following screenshot illustrates SfButton with the glass effect enabled and the pressed-state scaling behavior over a wallpaper background.

‎MAUI/Chips/LiquidGlassSupport.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
layout: post
3+
title: Provide Liquid Glass Support for .NET MAUI Chips | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI Chips (SfChip) control and more.
5+
platform: MAUI
6+
control: SfChip
7+
documentation: ug
8+
---
9+
10+
11+
# Liquid glass support
12+
13+
The [Chips](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfChip.html) provides `liquid glass` effect that can be enabled directly on the control using the public API [EnableLiquidGlassEffect](). When enabled, each chip surface adopts a frosted, translucent appearance that blends with the content behind it, improving visual depth and readability over images or colorful layouts.
14+
15+
## Availability
16+
17+
1. Supported on .NET 10 or greater.
18+
2. Supported on mac or iOS 26 or greater.
19+
3. On platforms/versions below these requirements, the glass effect is not applied and the chips render with the standard background.
20+
21+
{% tabs %}
22+
{% highlight xaml hl_lines="49 52" %}
23+
24+
XAML example Enable the glass effect on SfChipGroup by setting EnableLiquidGlassEffect to True.
25+
26+
<?xml version="1.0" encoding="utf-8" ?>
27+
<ContentPage
28+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
29+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
30+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
31+
x:Class="ChipGroupGlassPage">
32+
33+
<Grid>
34+
<!-- Background to showcase glass effect -->
35+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36+
37+
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
38+
<Label Text="Filters" FontSize="18" TextColor="White" />
39+
40+
<core:SfChipGroup
41+
x:Name="FilterChips"
42+
EnableLiquidGlassEffect="True">
43+
<chip:SfChipGroup.Items>
44+
<chip:SfChip Text="Extra Small" Background="Blue"/>
45+
<chip:SfChip Text="Small" Background="Blue"/>
46+
<chip:SfChip Text="Medium" Background="Blue"/>
47+
<chip:SfChip Text="Large" Background="Blue"/>
48+
<chip:SfChip Text="Extra Large" Background="Blue"/>
49+
</chip:SfChipGroup.Items>
50+
</core:SfChipGroup>
51+
</StackLayout>
52+
</Grid>
53+
</ContentPage>
54+
55+
{% endhighlight %}
56+
{% highlight c# hl_lines="74 77" %}
57+
58+
using Syncfusion.Maui.Core;
59+
60+
SfChipGroup chipGroup = new SfChipGroup
61+
{
62+
EnableLiquidGlassEffect = true, // Enables built-in glassy look on chips
63+
};
64+
65+
chipGroup.Items.Add(new SfChip(){Text="Extra Small", Background = Colors.Blue });
66+
chipGroup.Items.Add(new SfChip(){Text="Small", Background = Colors.Blue });
67+
chipGroup.Items.Add(new SfChip(){Text="Medium", Background = Colors.Blue });
68+
chipGroup.Items.Add(new SfChip(){Text="Large", Background = Colors.Blue });
69+
chipGroup.Items.Add(new SfChip(){Text="Extra Large", Background = Colors.Blue });
70+
71+
{% endhighlight %}
72+
{% endtabs %}
73+
74+
75+
The following screenshot illustrates SfChipGroup with the built-in glass effect enabled via EnableLiquidGlassEffect, displayed over a wallpaper background.

‎MAUI/ComboBox/LiquidGlassSupport.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Combobox entry | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI Combobox (SfComboBox) control and more.
5+
platform: MAUI
6+
control: SfComboBox
7+
documentation: ug
8+
---
9+
10+
# Liquid glass support
11+
12+
The [SfComboBox](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfComboBox.html) supports a `liquid glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectsView](). You can customize the effect using properties such as [EffectType](), [EnableShadowEffect](), and round the corners using [CornerRadius](). This approach improves visual depth and readability when SfComboBox is placed over images or colorful layouts. Additionally, the dropdown portion of SfComboBox applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
13+
14+
## Availability
15+
16+
1. This feature is supported on .NET 10 or greater.
17+
2. This feature is supported on mac or iOS 26 or greater.
18+
3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
19+
20+
## Prerequisites
21+
22+
- Add the Syncfusion.Maui.Core package (for SfGlassEffectsView) and Syncfusion.Maui.Inputs (for SfComboBox).
23+
24+
XAML example Wrap the SfComboBox in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
25+
26+
{% tabs %}
27+
{% highlight xaml hl_lines="49 52" %}
28+
29+
<?xml version="1.0" encoding="utf-8" ?>
30+
<ContentPage
31+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
32+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
33+
xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
34+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
35+
x:Class="AcrylicComboboxBoxPage">
36+
37+
<Grid>
38+
<!-- Background to make acrylic blur visible -->
39+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
40+
<core:SfGlassEffectsView
41+
CornerRadius="20"
42+
HeightRequest="40"
43+
EffectType="Regular"
44+
EnableShadowEffect="True">
45+
46+
<inputs:SfComboBox
47+
EnableLiquidGlassEffect="True"
48+
ItemsSource="{Binding Employees}"
49+
DisplayMemberPath="Name"
50+
DropDownBackground="Transparent"
51+
Placeholder="Select employee"/>
52+
</core:SfGlassEffectsView>
53+
</Grid>
54+
</ContentPage>
55+
56+
{% endhighlight %}
57+
{% highlight c# hl_lines="74 77" %}
58+
59+
using Syncfusion.Maui.Core;
60+
using Syncfusion.Maui.Inputs;
61+
62+
var glassEffects = new SfGlassEffectsView
63+
{
64+
CornerRadius=20,
65+
HeightRequest=40,
66+
EffectType=LiquidGlassEffectType.Regular,
67+
EnableShadowEffect=True
68+
};
69+
70+
var Combobox = new SfComboBox
71+
{
72+
EnableLiquidGlassEffect = true, // Dropdown glass effect
73+
ItemsSource = viewModel.Employees,
74+
DisplayMemberPath = "Name",
75+
DropDownBackground= Colors.Transparent,
76+
Placeholder = "Select employee",
77+
};
78+
79+
glassEffects.Content = Combobox;
80+
81+
{% endhighlight %}
82+
{% endtabs %}
83+
84+
The following screenshot illustrates SfComboBox within an acrylic container, with the dropdown using the glass effect.

‎MAUI/DateTime-Range-Selector/LiquidGlassSupport.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI DateTimeRangeSelector | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI DateTimeRangeSelector (SfDateTimeRangeSelector) control and more.
5+
platform: MAUI
6+
control: SfDateTimeRangeSelector
7+
documentation: ug
8+
---
9+
10+
11+
# Liquid glass support:
12+
13+
The [SfDateTimeRangeSelector](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html) provides `liquid glass` effect for its thumbs when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the user is pressing/dragging the thumb, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the slider’s appearance at rest, and works well over images or colorful layouts.
14+
15+
## Availability
16+
17+
1. Supported on .NET 10 or greater.
18+
2. Supported on mac or iOS 26 or greater.
19+
3. On platforms/versions below these requirements, the glass effect is not applied and the slider thumbs render with the standard appearance.
20+
21+
XAML example The thumb’s glass effect appears only while it is pressed/dragged.
22+
23+
{% tabs %}
24+
{% highlight xaml hl_lines="49 52" %}
25+
26+
<?xml version="1.0" encoding="utf-8" ?>
27+
<ContentPage
28+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
29+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
30+
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
31+
x:Class="SliderGlassEffectPage">
32+
33+
<Grid>
34+
<!-- Background to make the glass effect visible while pressing the thumb -->
35+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36+
37+
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
38+
<Label Text="Volume" FontSize="18" TextColor="White" />
39+
40+
<sliders:SfDateTimeRangeSelector
41+
Minimum="2010-01-01"
42+
Maximum="2018-01-01"
43+
RangeStart="2012-01-01"
44+
RangeEnd="2016-01-01"
45+
EnableLiquidGlassEffect="True"/>
46+
</StackLayout>
47+
</Grid>
48+
</ContentPage>
49+
50+
{% endhighlight %}
51+
{% highlight c# hl_lines="74 77" %}
52+
53+
using Syncfusion.Maui.Sliders;
54+
55+
SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
56+
{
57+
Minimum = new DateTime(2010, 01, 01),
58+
Maximum = new DateTime(2018, 01, 01),
59+
RangeStart = new DateTime(2012, 01, 01),
60+
RangeEnd = new DateTime(2016, 01, 01),
61+
EnableLiquidGlassEffect = true
62+
};
63+
64+
{% endhighlight %}
65+
{% endtabs %}
66+
67+
The following screenshot illustrates SfRangeSlider with the glass effect visible on the thumb while it is pressed.
68+
69+
N> The glass effect is applied to the thumb only while it is pressed/dragged.

0 commit comments

Comments
 (0)