Skip to content

Commit 4647ee5

Browse files
ShanmuganSekar-SF4698ShanmuganSekar-SF4698
committed
Changed format
1 parent 7f15907 commit 4647ee5

File tree

1 file changed

+75
-107
lines changed

1 file changed

+75
-107
lines changed

‎MAUI/DataGrid/liquid-glass-effect.md‎

Lines changed: 75 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,116 @@
11
---
22
layout: post
3-
title: Liquid Glass Support for .NET MAUI DataGrid | Syncfusion®
4-
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI DataGrid (SfDataGrid) control and more.
3+
title: Liquid Glass Effect for .NET MAUI DataGrid | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI DataGrid (SfDataGrid) control.
55
platform: MAUI
66
control: SfDataGrid
77
documentation: ug
8-
keywords: maui datagrid, maui grid, .net maui datagrid, liquid glass, glassmorphism, acrylic, blur, sfglasseffectview, datagrid glass effect
98
---
109

11-
# Liquid glass support
10+
# Liquid Glass Effect in .NET MAUI DataGrid (SfDataGrid)
1211

13-
The [SfDataGrid](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.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 SfDataGrid is placed over images or colorful layouts. Additionally, DataGrid elements such as the row/column dragging view, tooltip, popups, context menu, and editor drop-downs (e.g., ComboBox/Picker) apply the glass effect only when [EnableLiquidGlassEffect]() is set to true and the related surfaces' Background is set to Transparent.
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 DataGrid (SfDataGrid) control.
1413

15-
## Availability
14+
## Apply liquid glass effect
1615

17-
1. This feature is supported on .NET 10 or greater.
18-
2. This feature is supported on mac or iOS 26 or greater.
19-
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 DataGrid control:
2017

21-
## Prerequisites
18+
### Step 1: Wrap the control inside glass effect view
2219

23-
- Add the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package (for SfGlassEffectsView) and [Syncfusion.Maui.DataGrid](https://www.nuget.org/packages/Syncfusion.Maui.DataGrid/) (for SfDataGrid).
20+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `SfDataGrid` control, wrap the control inside the `SfGlassEffectView` class.
2421

25-
XAML example: Wrap the `SfDataGrid` in an `SfGlassEffectsView`, then enable the glass effect with `EnableLiquidGlassEffect`. For surfaces like drag views, tooltip, and context menu, set their Background to Transparent to reveal the glass effect.
22+
For more details, refer to the `Liquid Glass Getting Started documentation`.
23+
24+
### Step 2: Enable the liquid glass effect on DataGrid
25+
26+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfDataGrid` control to apply the Liquid Glass Effect. When enabled, the effect is also applied to its dependent surfaces such as the row/column dragging view, tooltip, popups, context menu, and editor drop-downs (e.g., ComboBox/Picker) when their corresponding backgrounds are set to `Transparent` for a smooth and engaging user experience.
27+
28+
### Step 3: Customize the background
29+
30+
To achieve a glass like background in the DataGrid related surfaces such as ContextMenu, Tooltip, RowDragViewBackground, and ColumnDragViewBackground, set their `Background` to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the control and its overlays.
31+
32+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDataGrid` control:
2633

2734
{% tabs %}
28-
{% highlight xaml %}
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:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
34-
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
35-
x:Class="AcrylicDataGridPage">
36-
37-
<Grid>
38-
<!-- Background to make acrylic blur visible -->
39-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
40-
<core:SfGlassEffectsView
41-
CornerRadius="20"
42-
EffectType="Regular"
43-
EnableShadowEffect="True">
44-
45-
<syncfusion:SfDataGrid x:Name="dataGrid"
46-
ItemsSource="{Binding OrderInfoCollection}"
47-
EnableLiquidGlassEffect="True">
48-
<!-- Make specific surfaces transparent to reveal glass -->
49-
<syncfusion:SfDataGrid.DefaultStyle>
50-
<syncfusion:DataGridStyle RowDragViewBackgroundColor="Transparent"
51-
ColumnDragViewBackgroundColor="Transparent"/>
52-
</syncfusion:SfDataGrid.DefaultStyle>
53-
</syncfusion:SfDataGrid>
54-
</core:SfGlassEffectsView>
55-
</Grid>
56-
</ContentPage>
35+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
36+
37+
<Grid>
38+
<Grid.Background>
39+
<LinearGradientBrush StartPoint="0,0"
40+
EndPoint="0,1">
41+
<GradientStop Color="#0F4C75"
42+
Offset="0.0"/>
43+
<GradientStop Color="#3282B8"
44+
Offset="0.5"/>
45+
<GradientStop Color="#1B262C"
46+
Offset="1.0"/>
47+
</LinearGradientBrush>
48+
</Grid.Background>
49+
50+
<core:SfGlassEffectView EffectType="Regular"
51+
CornerRadius="20">
52+
<syncfusion:SfDataGrid x:Name="dataGrid"
53+
Background="Transparent"
54+
ItemsSource="{Binding OrderInfoCollection}"
55+
EnableLiquidGlassEffect="True">
56+
<!-- Make specific surfaces transparent to reveal glass -->
57+
<syncfusion:SfDataGrid.DefaultStyle>
58+
<syncfusion:DataGridStyle RowDragViewBackgroundColor="Transparent"
59+
ColumnDragViewBackgroundColor="Transparent"/>
60+
</syncfusion:SfDataGrid.DefaultStyle>
61+
</syncfusion:SfDataGrid>
62+
</core:SfGlassEffectView>
63+
</Grid>
64+
5765
{% endhighlight %}
58-
{% highlight c# %}
66+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
67+
5968
using Syncfusion.Maui.Core;
6069
using Syncfusion.Maui.DataGrid;
6170

62-
var grid = new Grid();
63-
var background = new Image
71+
var gradientBrush = new LinearGradientBrush
6472
{
65-
Source = "wallpaper.jpg",
66-
Aspect = Aspect.AspectFill
73+
StartPoint = new Point(0, 0),
74+
EndPoint = new Point(0, 1),
75+
GradientStops = new GradientStopCollection
76+
{
77+
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
78+
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
79+
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
80+
}
6781
};
6882

69-
grid.Children.Add(background);
83+
var grid = new Grid
84+
{
85+
Background = gradientBrush
86+
};
7087

71-
var glassEffects = new SfGlassEffectsView
88+
var glassView = new SfGlassEffectsView
7289
{
7390
CornerRadius = 20,
74-
EffectType = LiquidGlassEffectType.Regular,
75-
EnableShadowEffect = true
91+
EffectType = LiquidGlassEffectType.Regular
7692
};
7793

7894
var dataGrid = new SfDataGrid
7995
{
96+
Background = Colors.Transparent,
8097
ItemsSource = viewModel.OrderInfoCollection,
81-
EnableLiquidGlassEffect = true
98+
EnableLiquidGlassEffect = true
8299
};
83100

101+
// Make specific surfaces transparent to reveal glass
84102

85103
dataGrid.DefaultStyle.RowDragViewBackgroundColor = Colors.Transparent;
86104
dataGrid.DefaultStyle.ColumnDragViewBackgroundColor = Colors.Transparent;
87105

88-
glassEffects.Content = dataGrid;
106+
107+
glassView.Content = this.dataGrid;
89108
grid.Children.Add(glassView);
90-
Content = grid;
109+
this.Content = grid;
91110

92111
{% endhighlight %}
93112
{% endtabs %}
94113

95-
## SfDataPager
96-
97-
You can also enable the liquid glass effect for the standalone [SfDataPager](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataPager.SfDataPager.html) control by setting `EnableLiquidGlassEffect` to `True`. Wrapping with `SfGlassEffectsView` is optional for additional container styling.
98-
99-
{% tabs %}
100-
{% highlight xaml %}
101-
<?xml version="1.0" encoding="utf-8" ?>
102-
<ContentPage
103-
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
104-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
105-
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
106-
xmlns:datapager="clr-namespace:Syncfusion.Maui.DataPager;assembly=Syncfusion.Maui.DataPager"
107-
x:Class="AcrylicDataPagerPage">
108-
109-
<Grid>
110-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
111-
<core:SfGlassEffectsView
112-
CornerRadius="16"
113-
HeightRequest="56"
114-
EffectType="Regular"
115-
EnableShadowEffect="True">
116-
117-
<datapager:SfDataPager
118-
x:Name="dataPager"
119-
EnableLiquidGlassEffect="True"
120-
PageCount="20"
121-
SelectedPageIndex="0" />
122-
</core:SfGlassEffectsView>
123-
</Grid>
124-
</ContentPage>
125-
{% endhighlight %}
126-
{% highlight c# %}
127-
using Syncfusion.Maui.Core;
128-
using Syncfusion.Maui.DataPager;
129-
130-
var pagerGlass = new SfGlassEffectsView
131-
{
132-
CornerRadius = 16,
133-
HeightRequest = 56,
134-
EffectType = LiquidGlassEffectType.Regular,
135-
EnableShadowEffect = true
136-
};
137-
138-
var dataPager = new SfDataPager
139-
{
140-
EnableLiquidGlassEffect = true,
141-
PageCount = 20,
142-
SelectedPageIndex = 0
143-
};
144-
145-
pagerGlass.Content = dataPager;
146-
this.Content = pagerGlass;
147-
{% endhighlight %}
148-
{% endtabs %}
114+
N>
115+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
116+
* This feature is available only in `.NET 10.`

0 commit comments

Comments
 (0)