Skip to content

Commit 4f08196

Browse files
ShanmuganSekar-SF4698ShanmuganSekar-SF4698
committed
Added UG for liquid-glass-effect support in sfdatagrid
1 parent 7259a91 commit 4f08196

File tree

2 files changed

+142
-0
lines changed

2 files changed

+142
-0
lines changed

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

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
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.
5+
platform: MAUI
6+
control: SfDataGrid
7+
documentation: ug
8+
keywords: maui datagrid, maui grid, .net maui datagrid, liquid glass, glassmorphism, acrylic, blur, sfglasseffectview, datagrid glass effect
9+
---
10+
11+
# Liquid glass support
12+
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.
14+
15+
## Availability
16+
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.
20+
21+
## Prerequisites
22+
23+
- Add the Syncfusion.Maui.Core package (for SfGlassEffectsView) and Syncfusion.Maui.DataGrid (for SfDataGrid).
24+
25+
XAML example: Wrap the SfDataGrid in an SfGlassEffectsView. For surfaces like drag views, tooltip, and context menu, set their Background to Transparent to reveal the glass effect.
26+
27+
{% 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+
HeightRequest="200"
43+
EffectType="Regular"
44+
EnableShadowEffect="True">
45+
46+
<syncfusion:SfDataGrid x:Name="dataGrid"
47+
ItemsSource="{Binding OrderInfoCollection}"
48+
EnableLiquidGlassEffect="True">
49+
<!-- Make specific surfaces transparent to reveal glass -->
50+
<syncfusion:SfDataGrid.DefaultStyle>
51+
<syncfusion:DataGridStyle RowDragViewBackgroundColor="Transparent"
52+
ColumnDragViewBackgroundColor="Transparent"/>
53+
</syncfusion:SfDataGrid.DefaultStyle>
54+
</syncfusion:SfDataGrid>
55+
</core:SfGlassEffectsView>
56+
</Grid>
57+
</ContentPage>
58+
{% endhighlight %}
59+
{% highlight c# %}
60+
using Syncfusion.Maui.Core;
61+
using Syncfusion.Maui.DataGrid;
62+
63+
var glassEffects = new SfGlassEffectsView
64+
{
65+
CornerRadius = 20,
66+
HeightRequest = 200,
67+
EffectType = LiquidGlassEffectType.Regular,
68+
EnableShadowEffect = true
69+
};
70+
71+
var dataGrid = new SfDataGrid
72+
{
73+
ItemsSource = viewModel.OrderInfoCollection,
74+
EnableLiquidGlassEffect = true
75+
};
76+
77+
78+
dataGrid.DefaultStyle.RowDragViewBackgroundColor = Colors.Transparent;
79+
dataGrid.DefaultStyle.ColumnDragViewBackgroundColor = Colors.Transparent;
80+
81+
glassEffects.Content = dataGrid;
82+
this.Content = glassEffects;
83+
{% endhighlight %}
84+
{% endtabs %}
85+
86+
## SfDataPager
87+
88+
You can also enable the liquid glass effect for the standalone [SfDataPager]() control by setting `EnableLiquidGlassEffect` to `True`. Wrapping with `SfGlassEffectsView` is optional for additional container styling.
89+
90+
{% tabs %}
91+
{% highlight xaml %}
92+
<?xml version="1.0" encoding="utf-8" ?>
93+
<ContentPage
94+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
95+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
96+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
97+
xmlns:datapager="clr-namespace:Syncfusion.Maui.DataPager;assembly=Syncfusion.Maui.DataPager"
98+
x:Class="AcrylicDataPagerPage">
99+
100+
<Grid>
101+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
102+
<core:SfGlassEffectsView
103+
CornerRadius="16"
104+
HeightRequest="56"
105+
EffectType="Regular"
106+
EnableShadowEffect="True">
107+
108+
<datapager:SfDataPager
109+
x:Name="dataPager"
110+
EnableLiquidGlassEffect="True"
111+
PageCount="20"
112+
SelectedPageIndex="0" />
113+
</core:SfGlassEffectsView>
114+
</Grid>
115+
</ContentPage>
116+
{% endhighlight %}
117+
{% highlight c# %}
118+
using Syncfusion.Maui.Core;
119+
using Syncfusion.Maui.DataPager;
120+
121+
var pagerGlass = new SfGlassEffectsView
122+
{
123+
CornerRadius = 16,
124+
HeightRequest = 56,
125+
EffectType = LiquidGlassEffectType.Regular,
126+
EnableShadowEffect = true
127+
};
128+
129+
var dataPager = new SfDataPager
130+
{
131+
EnableLiquidGlassEffect = true,
132+
PageCount = 20,
133+
SelectedPageIndex = 0
134+
};
135+
136+
pagerGlass.Content = dataPager;
137+
this.Content = pagerGlass;
138+
{% endhighlight %}
139+
{% endtabs %}
140+
141+
The following screenshot illustrates SfDataGrid within an acrylic container, with grid surfaces revealing the glass effect.

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,6 +625,7 @@
625625
<li><a href="/maui/DataGrid/export-to-excel">Export to Excel</a></li>
626626
<li><a href="/maui/DataGrid/export-to-pdf">Export to PDF</a></li>
627627
<li><a href="/maui/DataGrid/localization">Localization</a></li>
628+
<li><a href="/maui/DataGrid/liquid-glass-effect">Liquid Glass Support</a></li>
628629
</ul>
629630
</li>
630631
<li>

0 commit comments

Comments
 (0)