Skip to content

Commit 050d849

Browse files
Monika4841Monika4841
committed
Merge branch 'development' of https://github.com/syncfusion-content/maui-docs into datagrid_features
2 parents 984cf2f + 34fc682 commit 050d849

File tree

26 files changed

+628
-567
lines changed

26 files changed

+628
-567
lines changed

‎MAUI/Autocomplete/LiquidGlassSupport.md‎

Lines changed: 71 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,98 @@
11
---
22
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.
3+
title: Liquid Glass Effect for .NET MAUI Autocomplete | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Autocomplete (SfAutocomplete) control.
55
platform: MAUI
66
control: SfAutocomplete
77
documentation: ug
88
---
99

10-
# Liquid Glass Support for .NET MAUI Autocomplete
10+
# Liquid Glass Effect in .NET MAUI Autocomplete (SfAutocomplete)
1111

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 [SfGlassEffectView](). 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.
12+
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 Autocomplete (SfAutocomplete) control.
1313

14-
## Availability
14+
## Apply liquid glass effect
1515

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.
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Autocomplete control:
1917

20-
## Prerequisites
18+
### Step 1: Wrap the control inside glass effect view
2119

22-
- Add the Syncfusion.Maui.Core package (for SfGlassEffectView) and Syncfusion.Maui.Inputs (for SfAutocomplete).
20+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Autocomplete` control, wrap the control inside the `SfGlassEffectView` class.
2321

24-
XAML example Wrap the SfAutocomplete in an SfGlassEffectView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
22+
For more details, refer to the `Liquid Glass Getting Started documentation`.
23+
24+
### Step 2: Enable the liquid glass effect on Autocomplete
25+
26+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfAutocomplete` 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.
27+
28+
### Step 3: Customize the background
29+
30+
To achieve a glass like background in the Autocomplete, set the `Background` and `DropDownBackground` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
31+
32+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfAutocomplete` control:
2533

2634
{% tabs %}
27-
{% highlight xaml hl_lines="19 22" %}
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:SfGlassEffectView
41-
CornerRadius="20"
42-
HeightRequest="40"
43-
EffectType="Regular"
44-
EnableShadowEffect="True">
45-
46-
<inputs:SfAutocomplete
47-
EnableLiquidGlassEffect="True"
48-
Background="Transparent"
49-
ItemsSource="{Binding Employees}"
50-
DisplayMemberPath="Name"
51-
DropDownBackground="Transparent"
52-
Placeholder="Select employee"/>
53-
</core:SfGlassEffectView>
54-
</Grid>
55-
</ContentPage>
35+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="11" %}
36+
37+
<Grid BackgroundColor="Transparent">
38+
<Image Source="Wallpaper.png" Aspect="AspectFill">
39+
<core:SfGlassEffectView EffectType="Regular"
40+
CornerRadius="20">
41+
<Autocomplete:SfAutocomplete x:Name="Autocomplete"
42+
Background="Transparent"
43+
HeightRequest="40"
44+
WidthRequest="300"
45+
ItemSource="{Binding Names}"
46+
DropDownBackground="Transparent"
47+
EnableLiquidGlassEffect="True">
48+
</Autocomplete:SfAutocomplete>
49+
</core:SfGlassEffectView>
50+
</Grid>
5651

5752
{% endhighlight %}
58-
{% highlight c# hl_lines="14 17" %}
53+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="29" %}
5954

6055
using Syncfusion.Maui.Core;
6156
using Syncfusion.Maui.Inputs;
6257

63-
var glassEffects = new SfGlassEffectView
64-
{
65-
CornerRadius=20,
66-
HeightRequest=40,
67-
EffectType=LiquidGlassEffectType.Regular,
68-
EnableShadowEffect=True
69-
};
70-
71-
var Autocomplete = new SfAutocomplete
72-
{
73-
EnableLiquidGlassEffect = true, // Dropdown glass effect
74-
ItemsSource = viewModel.Employees,
75-
DisplayMemberPath = "Name",
76-
Background=Colors.Transparent,
77-
DropDownBackground= Colors.Transparent,
78-
Placeholder = "Select employee",
79-
};
80-
81-
glassEffects.Content = Autocomplete;
58+
var grid = new Grid
59+
{
60+
BackgroundColor = Colors.Transparent
61+
};
62+
63+
var image = new Image
64+
{
65+
Source = "Wallpaper.png",
66+
Aspect = Aspect.AspectFill
67+
};
68+
grid.Children.Add(image);
69+
70+
var glass = new SfGlassEffectView
71+
{
72+
EffectType = LiquidGlassEffectType.Regular,
73+
CornerRadius = 20
74+
};
75+
76+
var autocomplete = new SfAutocomplete
77+
{
78+
Background = Colors.Transparent,
79+
HeightRequest = 40,
80+
WidthRequest = 300,
81+
DropDownBackground = Colors.Transparent,
82+
ItemSource = new List<string>{"Jacob", "Will", "Noah", "Dustin"},
83+
EnableLiquidGlassEffect = true
84+
};
85+
86+
glass.Content = autocomplete;
87+
grid.Children.Add(glass);
88+
this.Content = grid;
8289

8390
{% endhighlight %}
8491
{% endtabs %}
8592

86-
8793
The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.
8894

89-
![Autocomplete editor with liquid glass support](Images/UICustomization/Autocomplete_liquidglass.png)
95+
![Autocomplete editor with liquid glass support](Images/UICustomization/Autocomplete_liquidglass.png)
96+
97+
N>
98+
This feature is supported only on .NET 10 along with iOS 26 and macOS 26

‎MAUI/Button/LiquidGlassSupport.md‎

Lines changed: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,75 @@
11
---
22
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.
3+
title: Liquid Glass Effect for .NET MAUI Buttons | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Buttons (SfButton) control.
55
platform: MAUI
66
control: SfButton
77
documentation: ug
88
---
99

10-
# Liquid Glass Support for .NET MAUI Buttons
10+
# Liquid Glass Effect in .NET MAUI Buttons (SfButton)
1111

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.
12+
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 Buttons (SfButton) control.
1313

14-
## Availability
14+
## Apply liquid glass effect
1515

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.
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Buttons control:
1917

20-
XAML example Enable the glass effect on `SfButton`. When pressed, the button will `scale` while the effect is enabled.
18+
### Step 1: Enable the liquid glass effect on Buttons
2119

22-
{% tabs %}
23-
{% highlight xaml hl_lines="16 17" %}
20+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfButton` 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.
21+
22+
### Step 3: Customize the background
23+
24+
To achieve a glass like background in the Buttons, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
2425

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">
26+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfButton` control:
3127

28+
{% tabs %}
29+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="6" %}
3230
<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-
Background="Transparent"
42-
WidthRequest="180"
43-
CornerRadius="24"
44-
HeightRequest="48" />
45-
</StackLayout>
31+
<Image Source="Wallpaper.png" Aspect="AspectFill">
32+
<buttons:SfButton
33+
x:Name="GlassButton"
34+
Text="GlassButton"
35+
EnableLiquidGlassEffect="True"
36+
Background="Transparent"
37+
WidthRequest="180"
38+
CornerRadius="24"
39+
HeightRequest="48" />
4640
</Grid>
47-
</ContentPage>
4841

4942
{% endhighlight %}
50-
{% highlight c# hl_lines="7 9" %}
43+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="17" %}
5144

5245
using Syncfusion.Maui.Buttons;
5346

54-
var glassButton = new SfButton
55-
{
56-
Text = "Continue",
57-
AutomationId = "Acrylic Button",
58-
EnableLiquidGlassEffect = true, // Enables glass look and press-time scaling
59-
WidthRequest = 180,
60-
Background=Colors.Transparent;
61-
HeightRequest = 48
62-
};
47+
var grid = new Grid();
48+
var image = new Image
49+
{
50+
Source = "Wallpaper.png",
51+
Aspect = Aspect.AspectFill
52+
};
53+
grid.Children.Add(image);
54+
var glassButton = new SfButton
55+
{
56+
Text = "GlassButton",
57+
Background = Colors.Transparent,
58+
WidthRequest = 180,
59+
HeightRequest = 48,
60+
CornerRadius = 24,
61+
EnableLiquidGlassEffect = true
62+
};
63+
grid.Children.Add(GlassButton);
64+
65+
this.Content = grid;
6366

6467
{% endhighlight %}
6568
{% endtabs %}
6669

67-
The following screenshot illustrates SfButton with the glass effect enabled and the pressed-state scaling behavior over a wallpaper background.
70+
The following screenshot illustrates SfButton with the glass effect enabled.
71+
72+
![button with liquid glass support](Images/customization-images/Button_liquidglass.png)
6873

69-
![button with liquid glass support](Images/customization-images/Button_liquidglass.png)
74+
N>
75+
This feature is supported only on .NET 10 along with iOS 26 and macOS 26

0 commit comments

Comments
 (0)