Skip to content

Commit 3a307b5

Browse files
MuniappanSubramanianMuniappanSubramanian
authored
Merge pull request #3899 from syncfusion-content/UGContentForCalendarLiquidGlass
996035-Added the liquid glass UG for the Calendar team controls
2 parents d5b7c09 + 56b0719 commit 3a307b5

File tree

9 files changed

+1062
-0
lines changed

9 files changed

+1062
-0
lines changed

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

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Backdrop Page | Syncfusion®
4+
description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI Backdrop Page using the EnableLiquidGlassEffect property.
5+
platform: MAUI
6+
control: SfBackdropPage
7+
documentation: ug
8+
---
9+
10+
# Liquid Glass Support
11+
12+
The [SfBackdropPage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html) supports a liquid glass appearance on both layers. Enable the effect directly on the [BackdropBackLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropBackLayer.html) and [BackdropFrontLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropFrontLayer.html) by setting their [EnableLiquidGlassEffect]() properties to true. This improves visual depth and readability when the backdrop layers are placed over images or colorful layouts.
13+
14+
## Platform and Version Support
15+
16+
1. This feature is supported on .NET 10 or greater.
17+
2. This feature is supported on macOS 26 and iOS 26 or later.
18+
3. On platforms or versions below these requirements, the layers render without the acrylic blur effect and fall back to a standard background.
19+
20+
## Prerequisites
21+
22+
- Add the [Syncfusion.Maui.Backdrop](https://www.nuget.org/packages/Syncfusion.Maui.Backdrop) package (for SfBackdropPage, BackdropFrontLayer, BackdropBackLayer).
23+
24+
## Apply Liquid Glass Effect to the back layer
25+
26+
Turn on the liquid glass effect on the back layer by setting [EnableLiquidGlassEffect]() to true.
27+
28+
{% tabs %}
29+
{% highlight xaml %}
30+
31+
<?xml version="1.0" encoding="utf-8" ?>
32+
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
34+
x:Class="AcrylicBackdropPage"
35+
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">
36+
37+
<backdrop:SfBackdropPage.BackLayer>
38+
<backdrop:BackdropBackLayer EnableLiquidGlassEffect="True">
39+
<Grid>
40+
<!-- Optional: colorful/image background to visualize acrylic -->
41+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
42+
<StackLayout Padding="16">
43+
<Label Text="Back layer content" FontSize="16"/>
44+
</StackLayout>
45+
</Grid>
46+
</backdrop:BackdropBackLayer>
47+
</backdrop:SfBackdropPage.BackLayer>
48+
49+
<backdrop:SfBackdropPage.FrontLayer>
50+
<backdrop:BackdropFrontLayer>
51+
<Grid BackgroundColor="WhiteSmoke" />
52+
</backdrop:BackdropFrontLayer>
53+
</backdrop:SfBackdropPage.FrontLayer>
54+
</backdrop:SfBackdropPage>
55+
56+
{% endhighlight %}
57+
{% highlight c# %}
58+
59+
using Syncfusion.Maui.Backdrop;
60+
61+
this.BackLayer = new BackdropBackLayer
62+
{
63+
EnableLiquidGlassEffect = true,
64+
Content = new Grid
65+
{
66+
Children =
67+
{
68+
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
69+
new VerticalStackLayout
70+
{
71+
Padding = 16,
72+
Children = { new Label { Text = "Back layer content", FontSize = 16 } }
73+
}
74+
}
75+
}
76+
};
77+
78+
this.FrontLayer = new BackdropFrontLayer
79+
{
80+
Content = new Grid { BackgroundColor = Colors.WhiteSmoke }
81+
};
82+
83+
{% endhighlight %}
84+
{% endtabs %}
85+
86+
## Apply Liquid Glass Effect to the front layer
87+
88+
You can enable the liquid glass effect for the front layer as well by setting [EnableLiquidGlassEffect]() to true.
89+
90+
{% tabs %}
91+
{% highlight xaml %}
92+
93+
<?xml version="1.0" encoding="utf-8" ?>
94+
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
95+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
96+
x:Class="AcrylicBackdropFrontPage"
97+
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">
98+
99+
<backdrop:SfBackdropPage.BackLayer>
100+
<backdrop:BackdropBackLayer>
101+
<Grid>
102+
<Label Text="Menu" HorizontalOptions="Center" VerticalOptions="Center"/>
103+
</Grid>
104+
</backdrop:BackdropBackLayer>
105+
</backdrop:SfBackdropPage.BackLayer>
106+
107+
<backdrop:SfBackdropPage.FrontLayer>
108+
<backdrop:BackdropFrontLayer EnableLiquidGlassEffect="True">
109+
<Grid>
110+
<!-- Optional: place bright imagery behind the surface to visualize blur -->
111+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
112+
<StackLayout Padding="16">
113+
<Label Text="Front layer content" FontSize="16"/>
114+
</StackLayout>
115+
</Grid>
116+
</backdrop:BackdropFrontLayer>
117+
</backdrop:SfBackdropPage.FrontLayer>
118+
</backdrop:SfBackdropPage>
119+
120+
{% endhighlight %}
121+
{% highlight c# %}
122+
123+
using Syncfusion.Maui.Backdrop;
124+
125+
this.BackLayer = new BackdropBackLayer
126+
{
127+
Content = new Grid
128+
{
129+
Children = { new Label { Text = "Menu", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center } }
130+
}
131+
};
132+
133+
this.FrontLayer = new BackdropFrontLayer
134+
{
135+
EnableLiquidGlassEffect = true,
136+
Content = new Grid
137+
{
138+
Children =
139+
{
140+
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
141+
new VerticalStackLayout
142+
{
143+
Padding = 16,
144+
Children = { new Label { Text = "Front layer content", FontSize = 16 } }
145+
}
146+
}
147+
}
148+
};
149+
150+
{% endhighlight %}
151+
{% endtabs %}
152+
153+
N>
154+
* Liquid Glass effects are most visible over images or colorful backgrounds.
155+
* You can enable the effect independently on either the back layer, the front layer, or both as needed.
156+
157+
## Best Practices and Tips
158+
159+
- The back and front layers use built-in acrylic when their [EnableLiquidGlassEffect]() property is true.
160+
- Place imagery or vibrant backgrounds beneath the layer surface to see the blur clearly.
161+
- Combine with existing layout properties (RevealedHeight, EdgeShape, etc.) to achieve the desired design while using the effect.
162+
163+
The following screenshots illustrate the back and front layers with the liquid glass effect enabled over colorful backgrounds.

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Calendar | Syncfusion®
4+
description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI Calendar using SfGlassEffectsView.
5+
platform: MAUI
6+
control: SfCalendar
7+
documentation: ug
8+
---
9+
10+
# Liquid Glass Support
11+
12+
The [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.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 the calendar is placed over images or colorful layouts.
13+
14+
Additionally, when the calendar is shown in [Dialog](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMode.html#Syncfusion_Maui_Calendar_CalendarMode_Dialog) mode, you can apply the glass effect to the pop-up by enabling the [EnableLiquidGlassEffect]() property on the calendar.
15+
16+
## Platform and Version Support
17+
18+
1. This feature is supported on .NET 10 or greater.
19+
2. This feature is supported on macOS 26 and iOS 26 or later.
20+
3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
21+
22+
## Prerequisites
23+
24+
- Add the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package (for SfGlassEffectsView).
25+
- Add the [Syncfusion.Maui.Calendar](https://www.nuget.org/packages/Syncfusion.Maui.Calendar/) package (for SfCalendar).
26+
27+
## Apply Liquid Glass Effect to SfCalendar
28+
29+
Wrap the [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html) inside an [SfGlassEffectsView]() to give the calendar surface a glass (blurred or clear) appearance.
30+
31+
{% tabs %}
32+
{% highlight xaml %}
33+
34+
<?xml version="1.0" encoding="utf-8" ?>
35+
<ContentPage
36+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
37+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
38+
xmlns:calendar="clr-namespace:Syncfusion.Maui.Calendar;assembly=Syncfusion.Maui.Calendar"
39+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
40+
x:Class="AcrylicCalendarPage">
41+
42+
<Grid>
43+
<!-- Background to make acrylic blur visible -->
44+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
45+
46+
<core:SfGlassEffectsView
47+
CornerRadius="20"
48+
Padding="12"
49+
EffectType="Regular"
50+
EnableShadowEffect="True">
51+
52+
<calendar:SfCalendar />
53+
</core:SfGlassEffectsView>
54+
</Grid>
55+
</ContentPage>
56+
57+
{% endhighlight %}
58+
{% highlight c# %}
59+
60+
using Syncfusion.Maui.Core;
61+
using Syncfusion.Maui.Calendar;
62+
63+
var glassView = new SfGlassEffectsView
64+
{
65+
CornerRadius = 20,
66+
Padding = new Thickness(12),
67+
EffectType = LiquidGlassEffectType.Regular,
68+
EnableShadowEffect = true
69+
};
70+
71+
var calendar = new SfCalendar();
72+
73+
glassView.Content = calendar;
74+
75+
{% endhighlight %}
76+
{% endtabs %}
77+
78+
N>
79+
* Liquid Glass effects are most visible over images or colorful backgrounds.
80+
* Use EffectType="Regular" for a blurrier look and "Clear" for a glassy look.
81+
82+
## Enable Glass Effect in Dialog Mode
83+
84+
When the calendar is displayed in [Dialog](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.CalendarMode.html#Syncfusion_Maui_Calendar_CalendarMode_Dialog) mode, enable the liquid glass effect by setting [EnableLiquidGlassEffect]() to true.
85+
86+
{% tabs %}
87+
{% highlight xaml %}
88+
89+
<?xml version="1.0" encoding="utf-8" ?>
90+
<ContentPage
91+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
92+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
93+
xmlns:calendar="clr-namespace:Syncfusion.Maui.Calendar;assembly=Syncfusion.Maui.Calendar"
94+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
95+
x:Class="CalendarDialogGlassPage">
96+
97+
<Grid>
98+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
99+
100+
<!-- Optional: host the launcher/control within a glass view as well -->
101+
<core:SfGlassEffectsView
102+
CornerRadius="16"
103+
Padding="10"
104+
EffectType="Clear"
105+
EnableShadowEffect="True">
106+
107+
<calendar:SfCalendar
108+
Mode="Dialog"
109+
EnableLiquidGlassEffect="True" />
110+
</core:SfGlassEffectsView>
111+
</Grid>
112+
</ContentPage>
113+
114+
{% endhighlight %}
115+
{% highlight c# %}
116+
117+
using Syncfusion.Maui.Core;
118+
using Syncfusion.Maui.Calendar;
119+
120+
var calendar = new SfCalendar
121+
{
122+
// Shows the calendar in a dialog surface when invoked
123+
Mode = CalendarMode.Dialog,
124+
125+
// Applies acrylic/glass effect to the dialog surface
126+
EnableLiquidGlassEffect = true
127+
};
128+
129+
{% endhighlight %}
130+
{% endtabs %}
131+
132+
N>
133+
* The dialog gains the glass effect only when EnableLiquidGlassEffect is true.
134+
135+
## Key Properties
136+
137+
- [EffectType](): Choose between Regular (blurry) and Clear (glassy) effects.
138+
- [EnableShadowEffect](): Enables a soft shadow around the acrylic container.
139+
- [CornerRadius](): Rounds the corners of the acrylic container.
140+
- Padding/Height/Width: Adjust layout around the embedded calendar.
141+
- [EnableLiquidGlassEffect]() (dialog): Enables the glass effect for the calendar’s dialog mode.
142+
143+
## Best Practices and Tips
144+
145+
- Hosting the calendar inside [SfGlassEffectsView]() gives the calendar body an acrylic look.
146+
- In dialog mode, the dialog surface applies the glass effect only when [EnableLiquidGlassEffect]() is true.
147+
- For the most noticeable effect, place the control over images or vibrant backgrounds.
148+
149+
The following screenshot illustrates [SfCalendar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html) hosted within an acrylic container, and the dialog mode using the glass effect.

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Cards | Syncfusion®
4+
description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI Card view using the EnableLiquidGlassEffect property.
5+
platform: MAUI
6+
control: SfCardView
7+
documentation: ug
8+
---
9+
10+
# Liquid Glass Support
11+
12+
The [SfCardView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cards.SfCardView.html) supports a liquid glass effect by setting the [EnableLiquidGlassEffect]() property to true. This enhances visual depth and readability when cards are placed over images or colorful layouts.
13+
14+
## Platform and Version Support
15+
16+
1. This feature is supported on .NET 10 or greater.
17+
2. This feature is supported on macOS 26 and iOS 26 or later.
18+
3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
19+
20+
## Apply Liquid Glass Effect to SfCardView
21+
22+
Turn on the liquid glass effect on a card view by setting [EnableLiquidGlassEffect]() to true.
23+
24+
{% tabs %}
25+
{% highlight xaml %}
26+
27+
<?xml version="1.0" encoding="utf-8" ?>
28+
<ContentPage
29+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
30+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
31+
xmlns:cards="clr-namespace:Syncfusion.Maui.Cards;assembly=Syncfusion.Maui.Cards"
32+
x:Class="AcrylicCardsPage">
33+
34+
<Grid>
35+
<!-- Background to make acrylic blur visible -->
36+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
37+
38+
<cards:SfCardView
39+
EnableLiquidGlassEffect="True">
40+
<VerticalStackLayout Spacing="8">
41+
<Label Text="Glass Card" FontSize="18" FontAttributes="Bold"/>
42+
<Label Text="This card uses the built-in liquid glass effect."/>
43+
</VerticalStackLayout>
44+
</cards:SfCardView>
45+
</Grid>
46+
</ContentPage>
47+
48+
{% endhighlight %}
49+
{% highlight c# %}
50+
51+
using Syncfusion.Maui.Cards;
52+
53+
var card = new SfCardView
54+
{
55+
EnableLiquidGlassEffect = true,
56+
};
57+
58+
card.Content = new VerticalStackLayout
59+
{
60+
Spacing = 8,
61+
Children =
62+
{
63+
new Label { Text = "Glass Card", FontSize = 18, FontAttributes = FontAttributes.Bold },
64+
new Label { Text = "This card uses the built-in liquid glass effect." },
65+
}
66+
};
67+
68+
{% endhighlight %}
69+
{% endtabs %}
70+
71+
N>
72+
* Liquid Glass effects are most visible over images or colorful backgrounds.
73+
74+
The following screenshot illustrates [SfCardView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cards.SfCardView.html) with the liquid glass effect enabled over a colorful background.

0 commit comments

Comments
 (0)