Skip to content

Commit 583df44

Browse files
Karthickmani97Karthickmani97
authored
Merge pull request #3882 from syncfusion-content/liquid-ug-content-child
985616-[Child] Liquid Glass Effect Getting Started UG
2 parents 3a307b5 + 08dbaa3 commit 583df44

File tree

3 files changed

+336
-3
lines changed

3 files changed

+336
-3
lines changed

‎MAUI/Liquid-Glass-UI/Overview.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ documentation: UG
99

1010
# Liquid Glass UI for .NET MAUI Overview
1111

12-
Syncfusion® provides `Liquid Glass visual effect support` for all `.NET MAUI controls`, introducing a `modern UI design` with a `visually appealing`, `translucent`, `glass-like appearance`. This feature applies `blurred backgrounds`, `adaptive color tinting`, and `light refraction` to enhance the overall `look and feel` of your applications while maintaining `readability` and `accessibility` across platforms.
12+
Syncfusion® provides support for the Liquid Glass visual effect across all .NET MAUI controls. This feature introduces a modern UI design with a visually appealing, translucent, glass-like appearance. It applies blurred backgrounds, adaptive color tinting, and light refraction to enhance the overall look and feel of your applications while maintaining readability and accessibility across platforms.
1313

1414
![overview-liquid-glass-ui-in-.net-maui](images/overview-liquid-glass-ui-in-.net-maui.webp)
1515

1616
## Key Features
1717

18-
* **Adaptive Blur & Reflection:** Blurs background and reflects light for a glassy look.
18+
* **Adaptive Blur & Reflection:** Applies background blur and reflects light for a glassy look.
1919
* **Edge Depth Effect:** Adds a subtle lens effect along edges for depth.
2020
* **Interaction:** Reacts to touch and hover instantly.
21-
* **Smooth Motion:** Provides fluid animations and transitions.
21+
* **Smooth Motion:** Provides fluid animations and seamless transitions.

‎MAUI/Liquid-Glass-UI/getting-started.md‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
---
2+
layout: post
3+
title: Getting Started with Liquid Glass UI in Syncfusion® .NET MAUI Controls
4+
description: Getting started with the Liquid Glass Effect UI in Syncfusion® .NET MAUI controls and learn how to enable and customize it.
5+
platform: MAUI
6+
control: General
7+
documentation: UG
8+
---
9+
10+
# Getting Started with Liquid Glass for Modern UI
11+
12+
This section explains how to enable and customize the Liquid Glass Effect in Syncfusion® .NET MAUI controls. For detailed information on specific Syncfusion® controls and their usage, refer to the respective Getting Started documentation. Ensure the control is properly configured and functioning before applying the Liquid Glass Effect.
13+
14+
N> This feature is supported only on `.NET 10`
15+
16+
## Supported Platforms
17+
18+
* macOS 26 or higher
19+
* iOS 26 or higher
20+
21+
## Liquid Glass Effect
22+
23+
The Liquid Glass Effect provides a modern, translucent design with background blur and depth effects, enhancing the visual appearance of your UI without requiring major code changes. To apply the Liquid Glass Effect to any Syncfusion® .NET MAUI control or custom view (such as a DataTemplate), wrap the control inside the `SfGlassEffectView` class.
24+
25+
This view acts as a visual container that adds blur, translucency, and light refraction to its content, creating a realistic glass-like appearance. In this section, we will demonstrate how to use `SfGlassEffectView` with Syncfusion® controls to achieve a visually appealing glass effect.
26+
27+
The `SfGlassEffectView` class is available in [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) and provides the following properties:
28+
29+
### Effect types
30+
31+
The `EffectType` property specifies the type of glass effect to apply:
32+
33+
* **Regular:** Creates a blurred, frosted glass appearance.
34+
* **Clear:** Creates a transparent, glass-like appearance.
35+
36+
{% tabs %}
37+
{% highlight XAML hl_lines="14" %}
38+
39+
...
40+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
41+
xmlns:button="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
42+
43+
<Grid>
44+
<Grid.Background>
45+
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
46+
<GradientStop Color="#0F4C75" Offset="0.0"/>
47+
<GradientStop Color="#3282B8" Offset="0.5"/>
48+
<GradientStop Color="#1B262C" Offset="1.0"/>
49+
</LinearGradientBrush>
50+
</Grid.Background>
51+
<core:SfGlassEffectView CornerRadius="20"
52+
EffectType="Clear"
53+
Padding="16"
54+
HeightRequest="140"
55+
WidthRequest="420">
56+
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
57+
<!-- Avatar -->
58+
<core:SfGlassEffectView WidthRequest="64"
59+
HeightRequest="64"
60+
EffectType="Clear"
61+
CornerRadius="32">
62+
<core:SfAvatarView WidthRequest="64"
63+
HeightRequest="64"
64+
FontSize="24"
65+
CornerRadius="32"
66+
FontAttributes="Bold"
67+
AvatarName="SF"
68+
Background="Transparent"
69+
ContentType="Initials"
70+
InitialsType="DoubleCharacter"/>
71+
</core:SfGlassEffectView>
72+
<!-- Title / Subtitle -->
73+
<VerticalStackLayout Grid.Column="1" Spacing="2"
74+
VerticalOptions="Center">
75+
<Label Text="Syncfusion®"
76+
TextColor="White"
77+
FontAttributes="Bold"
78+
FontSize="20"/>
79+
<Label Text="Deliver innovation with ease"
80+
TextColor="#DDFFFFFF"
81+
FontSize="15"/>
82+
</VerticalStackLayout>
83+
<!-- Action Button -->
84+
<core:SfGlassEffectView CornerRadius="20"
85+
EffectType="Clear"
86+
WidthRequest="100"
87+
Grid.Column="2"
88+
HeightRequest="40">
89+
<button:SfButton Text="Follow"
90+
Background="Transparent"
91+
TextColor="White"/>
92+
</core:SfGlassEffectView>
93+
</Grid>
94+
</core:SfGlassEffectView>
95+
</Grid>
96+
97+
{% endhighlight %}
98+
{% endtabs %}
99+
100+
### Corner radius
101+
102+
Defines the corner radius for the view, enabling customization of its shape such as rounded rectangles or capsules.
103+
104+
{% tabs %}
105+
{% highlight XAML hl_lines="10" %}
106+
107+
<Grid>
108+
<Grid.Background>
109+
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
110+
<GradientStop Color="#0F4C75" Offset="0.0"/>
111+
<GradientStop Color="#3282B8" Offset="0.5"/>
112+
<GradientStop Color="#1B262C" Offset="1.0"/>
113+
</LinearGradientBrush>
114+
</Grid.Background>
115+
<core:SfGlassEffectView EffectType="Clear"
116+
CornerRadius="30"
117+
EnableShadowEffect="true"
118+
Padding="16"
119+
HeightRequest="140"
120+
WidthRequest="420">
121+
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
122+
<!-- Avatar -->
123+
<core:SfGlassEffectView WidthRequest="64"
124+
HeightRequest="64"
125+
EffectType="Clear"
126+
CornerRadius="32">
127+
<core:SfAvatarView WidthRequest="64"
128+
HeightRequest="64"
129+
FontSize="24"
130+
CornerRadius="32"
131+
FontAttributes="Bold"
132+
AvatarName="SF"
133+
Background="Transparent"
134+
ContentType="Initials"
135+
InitialsType="DoubleCharacter"/>
136+
</core:SfGlassEffectView>
137+
<!-- Title / Subtitle -->
138+
<VerticalStackLayout Grid.Column="1" Spacing="2"
139+
VerticalOptions="Center">
140+
<Label Text="Syncfusion®"
141+
TextColor="White"
142+
FontAttributes="Bold"
143+
FontSize="20"/>
144+
<Label Text="Deliver innovation with ease"
145+
TextColor="#DDFFFFFF"
146+
FontSize="15"/>
147+
</VerticalStackLayout>
148+
<!-- Action Button -->
149+
<core:SfGlassEffectView CornerRadius="20"
150+
EffectType="Clear"
151+
WidthRequest="100"
152+
Grid.Column="2"
153+
HeightRequest="40">
154+
<button:SfButton Text="Follow"
155+
Background="Transparent"
156+
TextColor="White"/>
157+
</core:SfGlassEffectView>
158+
</Grid>
159+
</core:SfGlassEffectView>
160+
</Grid>
161+
162+
{% endhighlight %}
163+
{% endtabs %}
164+
165+
### Enable shadow effect
166+
167+
Adds a soft shadow to the content within the glass view, creating depth and a more realistic appearance.
168+
169+
{% tabs %}
170+
{% highlight XAML hl_lines="11" %}
171+
172+
<Grid>
173+
<Grid.Background>
174+
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
175+
<GradientStop Color="#0F4C75" Offset="0.0"/>
176+
<GradientStop Color="#3282B8" Offset="0.5"/>
177+
<GradientStop Color="#1B262C" Offset="1.0"/>
178+
</LinearGradientBrush>
179+
</Grid.Background>
180+
<core:SfGlassEffectView EffectType="Clear"
181+
CornerRadius="20"
182+
EnableShadowEffect="true"
183+
Padding="16"
184+
HeightRequest="140"
185+
WidthRequest="420">
186+
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
187+
<!-- Avatar -->
188+
<core:SfGlassEffectView WidthRequest="64"
189+
HeightRequest="64"
190+
EffectType="Clear"
191+
CornerRadius="32">
192+
<core:SfAvatarView WidthRequest="64"
193+
HeightRequest="64"
194+
FontSize="24"
195+
CornerRadius="32"
196+
FontAttributes="Bold"
197+
AvatarName="SF"
198+
Background="Transparent"
199+
ContentType="Initials"
200+
InitialsType="DoubleCharacter"/>
201+
</core:SfGlassEffectView>
202+
<!-- Title / Subtitle -->
203+
<VerticalStackLayout Grid.Column="1" Spacing="2"
204+
VerticalOptions="Center">
205+
<Label Text="Syncfusion®"
206+
TextColor="White"
207+
FontAttributes="Bold"
208+
FontSize="20"/>
209+
<Label Text="Deliver innovation with ease"
210+
TextColor="#DDFFFFFF"
211+
FontSize="15"/>
212+
</VerticalStackLayout>
213+
<!-- Action Button -->
214+
<core:SfGlassEffectView CornerRadius="20"
215+
EffectType="Clear"
216+
WidthRequest="100"
217+
Grid.Column="2"
218+
HeightRequest="40">
219+
<button:SfButton Text="Follow"
220+
Background="Transparent"
221+
TextColor="White"/>
222+
</core:SfGlassEffectView>
223+
</Grid>
224+
</core:SfGlassEffectView>
225+
</Grid>
226+
227+
{% endhighlight %}
228+
{% endtabs %}
229+
230+
### Set background color
231+
232+
Applies a background tint color to the glass view, to enhance modern UI styling and improve
233+
readability.
234+
235+
{% tabs %}
236+
{% highlight XAML hl_lines="11" %}
237+
238+
<Grid>
239+
<Grid.Background>
240+
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
241+
<GradientStop Color="#0F4C75" Offset="0.0"/>
242+
<GradientStop Color="#3282B8" Offset="0.5"/>
243+
<GradientStop Color="#1B262C" Offset="1.0"/>
244+
</LinearGradientBrush>
245+
</Grid.Background>
246+
<core:SfGlassEffectView EffectType="Clear"
247+
CornerRadius="20"
248+
Background="Orange"
249+
Padding="16"
250+
HeightRequest="140"
251+
WidthRequest="420">
252+
<Grid ColumnDefinitions="64,*,Auto" ColumnSpacing="12">
253+
<!-- Avatar -->
254+
<core:SfGlassEffectView WidthRequest="64"
255+
HeightRequest="64"
256+
EffectType="Clear"
257+
CornerRadius="32">
258+
<core:SfAvatarView WidthRequest="64"
259+
HeightRequest="64"
260+
FontSize="24"
261+
CornerRadius="32"
262+
FontAttributes="Bold"
263+
AvatarName="SF"
264+
Background="Transparent"
265+
ContentType="Initials"
266+
InitialsType="DoubleCharacter"/>
267+
</core:SfGlassEffectView>
268+
<!-- Title / Subtitle -->
269+
<VerticalStackLayout Grid.Column="1" Spacing="2"
270+
VerticalOptions="Center">
271+
<Label Text="Syncfusion®"
272+
TextColor="White"
273+
FontAttributes="Bold"
274+
FontSize="20"/>
275+
<Label Text="Deliver innovation with ease"
276+
TextColor="#DDFFFFFF"
277+
FontSize="15"/>
278+
</VerticalStackLayout>
279+
<!-- Action Button -->
280+
<core:SfGlassEffectView CornerRadius="20"
281+
EffectType="Clear"
282+
WidthRequest="100"
283+
Grid.Column="2"
284+
HeightRequest="40">
285+
<button:SfButton Text="Follow"
286+
Background="Transparent"
287+
TextColor="White"/>
288+
</core:SfGlassEffectView>
289+
</Grid>
290+
</core:SfGlassEffectView>
291+
</Grid>
292+
293+
{% endhighlight %}
294+
{% endtabs %}
295+
296+
## Interactive Glass Effects
297+
298+
Enable glass effects that respond to user interactions with clear transparency and dynamic lighting for an engaging UI. To enable this feature, set the `EnableLiquidGlassEffect` property to `true` on the Syncfusion `SfSwitch` control. This activates interaction-based visual effects.
299+
300+
{% tabs %}
301+
{% highlight XAML %}
302+
303+
<Grid>
304+
<Grid.Background>
305+
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
306+
<GradientStop Color="#0F4C75" Offset="0.0"/>
307+
<GradientStop Color="#3282B8" Offset="0.5"/>
308+
<GradientStop Color="#1B262C" Offset="1.0"/>
309+
</LinearGradientBrush>
310+
</Grid.Background>
311+
<core:SfGlassEffectView EffectType="Clear"
312+
CornerRadius="20"
313+
HeightRequest="140"
314+
WidthRequest="380">
315+
<button:SfButton Text="Regular Glass"
316+
EnableLiquidGlassEffect="True"
317+
FontSize="16"
318+
WidthRequest="150"
319+
HeightRequest="40"
320+
Background="Transparent"
321+
TextColor="Black"/>
322+
</core:SfGlassEffectView>
323+
</Grid>
324+
325+
{% endhighlight %}
326+
{% endtabs %}
327+
328+
## Controls list
329+
330+
For control specific usage of the Liquid Glass Effect on individual Syncfusion® controls, including availability, and configuration details, please refer to the respective control documentation.
331+
332+
N> View sample in GitHub.

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@
179179
Liquid Glass UI
180180
<ul>
181181
<li><a href="/maui/Liquid-Glass-UI/overview">Overview</a></li>
182+
<li><a href="/maui/Liquid-Glass-UI/getting-started">Getting Started</a></li>
182183
</ul>
183184
</li>
184185
<li>

0 commit comments

Comments
 (0)