Skip to content

Commit b10f3ee

Browse files
NatarajanSF4844NatarajanSF4844
committed
Chips, buttons and combobox modified
1 parent 0e748fe commit b10f3ee

File tree

3 files changed

+87
-111
lines changed

3 files changed

+87
-111
lines changed

‎MAUI/Button/LiquidGlassSupport.md‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,34 @@
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.
2421

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">
22+
### Step 3: Customize the background
3123

32-
<Grid>
33-
<!-- Background to showcase the glass and scaling effects -->
34-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
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.
3525

26+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfButton` control:
27+
28+
{% tabs %}
29+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
30+
31+
<Grid>
3632
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center" HorizontalOptions="Center">
3733
<buttons:SfButton
3834
x:Name="GlassButton"
@@ -44,17 +40,15 @@ XAML example Enable the glass effect on `SfButton`. When pressed, the button wil
4440
HeightRequest="48" />
4541
</StackLayout>
4642
</Grid>
47-
</ContentPage>
4843

4944
{% endhighlight %}
50-
{% highlight c# hl_lines="7 9" %}
45+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
5146

5247
using Syncfusion.Maui.Buttons;
5348

5449
var glassButton = new SfButton
5550
{
56-
Text = "Continue",
57-
AutomationId = "Acrylic Button",
51+
Text = "GlassButton",
5852
EnableLiquidGlassEffect = true, // Enables glass look and press-time scaling
5953
WidthRequest = 180,
6054
Background=Colors.Transparent;
@@ -64,6 +58,6 @@ var glassButton = new SfButton
6458
{% endhighlight %}
6559
{% endtabs %}
6660

67-
The following screenshot illustrates SfButton with the glass effect enabled and the pressed-state scaling behavior over a wallpaper background.
68-
69-
![button with liquid glass support](Images/customization-images/Button_liquidglass.png)
61+
N>
62+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
63+
* This feature is available only in `.NET 10.`

‎MAUI/Chips/LiquidGlassSupport.md‎

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

10+
# Liquid Glass Effect in .NET MAUI Chips (SfChip)
1011

11-
# Liquid Glass Support for .NET MAUI Chips
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 Chips (SfChip) control.
1213

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+
## Apply liquid glass effect
1415

15-
## Availability
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Chips control:
1617

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.
18+
### Step 1: Enable the liquid glass effect on Chips
2019

21-
{% tabs %}
22-
{% highlight xaml hl_lines="17" %}
20+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfChip` 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.
2321

24-
XAML example Enable the glass effect on SfChipGroup by setting EnableLiquidGlassEffect to True.
22+
### Step 3: Customize the background
2523

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">
24+
To achieve a glass like background in the Chips, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
3225

26+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfChip` control:
27+
{% tabs %}
28+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
3329
<Grid>
34-
<!-- Background to showcase glass effect -->
35-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36-
3730
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
3831
<Label Text="Filters" FontSize="18" TextColor="White" />
39-
4032
<core:SfChipGroup
4133
x:Name="FilterChips"
4234
EnableLiquidGlassEffect="True">
@@ -50,10 +42,8 @@ XAML example Enable the glass effect on SfChipGroup by setting EnableLiquidGlass
5042
</core:SfChipGroup>
5143
</StackLayout>
5244
</Grid>
53-
</ContentPage>
54-
5545
{% endhighlight %}
56-
{% highlight c# hl_lines="5" %}
46+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
5747

5848
using Syncfusion.Maui.Core;
5949

@@ -71,7 +61,6 @@ chipGroup.Items.Add(new SfChip(){Text="Extra Large", Background = Colors.Blue })
7161
{% endhighlight %}
7262
{% endtabs %}
7363

74-
75-
The following screenshot illustrates SfChipGroup with the built-in glass effect enabled via EnableLiquidGlassEffect, displayed over a wallpaper background.
76-
77-
![chips with liquid glass support](images/customization-images/Chip_liquidglass.png)
64+
N>
65+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
66+
* This feature is available only in `.NET 10.`

‎MAUI/ComboBox/LiquidGlassSupport.md‎

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

10-
# Liquid Glass Support for .NET MAUI ComboBox
10+
# Liquid Glass Effect in .NET MAUI Combo Box (SfComboBox)
1111

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 [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 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.
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 Combo Box (SfComboBox) 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 Combo Box 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 SfComboBox).
20+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Combo Box` control, wrap the control inside the `SfGlassEffectView` class.
2321

24-
XAML example Wrap the SfComboBox 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 Combo Box
25+
26+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfComboBox` 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 Combo Box, 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 `SfComboBox` control:
2533

2634
{% tabs %}
27-
{% highlight xaml hl_lines="19 20 23" %}
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:SfGlassEffectView
41-
CornerRadius="20"
42-
HeightRequest="40"
43-
EffectType="Regular"
44-
EnableShadowEffect="True">
45-
46-
<inputs:SfComboBox
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="14 16 20" %}
36+
37+
<Grid BackgroundColor="Transparent">
38+
<core:SfGlassEffectView EffectType="Regular"
39+
CornerRadius="20">
40+
<ComboBox:SfComboBox x:Name="ComboBox"
41+
Background="Transparent"
42+
DropDownBackground="Transparent"
43+
EnableLiquidGlassEffect="True">
44+
</ComboBox:SfComboBox>
45+
</core:SfGlassEffectView>
46+
</Grid>
5647

5748
{% endhighlight %}
58-
{% highlight c# hl_lines="14 17 18" %}
49+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
5950

6051
using Syncfusion.Maui.Core;
6152
using Syncfusion.Maui.Inputs;
6253

63-
var glassEffects = new SfGlassEffectView
54+
var grid = new Grid
6455
{
65-
CornerRadius=20,
66-
HeightRequest=40,
67-
EffectType=LiquidGlassEffectType.Regular,
68-
EnableShadowEffect=True
56+
BackgroundColor = Colors.Transparent
6957
};
7058

71-
var Combobox = new SfComboBox
59+
var glassView = new SfGlassEffectView
60+
{
61+
CornerRadius = 20,
62+
EffectType = LiquidGlassEffectType.Regular
63+
};
64+
65+
var comboBox = new SfComboBox
7266
{
73-
EnableLiquidGlassEffect = true, // Dropdown glass effect
74-
ItemsSource = viewModel.Employees,
75-
DisplayMemberPath = "Name",
7667
Background = Colors.Transparent,
77-
DropDownBackground= Colors.Transparent,
78-
Placeholder = "Select employee",
68+
EnableLiquidGlassEffect = true,
69+
DropDownBackground = Colors.Transparent
7970
};
8071

81-
glassEffects.Content = Combobox;
72+
glassView.Content = this.comboBox;
73+
grid.Children.Add(glassView);
74+
this.Content = grid;
8275

8376
{% endhighlight %}
8477
{% endtabs %}
8578

86-
The following screenshot illustrates SfComboBox within an acrylic container, with the dropdown using the glass effect.
87-
88-
![combo box editor with liquid glass support](Images/UICustomization/Combobox_liquidglass.png)
79+
N>
80+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
81+
* This feature is available only in `.NET 10.`

0 commit comments

Comments
 (0)