Skip to content

Commit 7651938

Browse files
MohamedHasan3644MohamedHasan3644
committed
996035-Updated Liquid glass UG content for calendar team controls
### Description Updated Liquid glass UG content for calendar team controls
1 parent 80c362c commit 7651938

File tree

8 files changed

+128
-834
lines changed

8 files changed

+128
-834
lines changed

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

Lines changed: 13 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -7,157 +7,33 @@ control: SfBackdropPage
77
documentation: ug
88
---
99

10-
# Liquid Glass Support
10+
# Liquid Glass Effect in .NET MAUI Backdrop Page (SfBackdropPage)
1111

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.
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 .NET MAUI Backdrop Page's Front or Back layer.
1313

14-
## Platform and Version Support
14+
## Apply liquid glass effect
1515

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.
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Front or Back Layer:
1917

20-
## Prerequisites
18+
### Step 1: Enable the liquid glass effect on Front or Back Layer
2119

22-
- Add the [Syncfusion.Maui.Backdrop](https://www.nuget.org/packages/Syncfusion.Maui.Backdrop) package (for SfBackdropPage, BackdropFrontLayer, BackdropBackLayer).
20+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfBackdropPage` control's Front or Back Layer to apply the Liquid Glass Effect.
2321

24-
## Apply Liquid Glass Effect to the back layer
22+
### Step 2: Customize the background
2523

26-
Turn on the liquid glass effect on the back layer by setting [EnableLiquidGlassEffect]() to true.
24+
To achieve a glass like background in the Front or Back Layer, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
2725

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.
26+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the Front or Back layer of the `SfBackdropPage` control:
8927

9028
{% 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>
29+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
11930

12031
{% 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-
};
32+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
14933

15034
{% endhighlight %}
15135
{% endtabs %}
15236

15337
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.
38+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
39+
* This feature is available only in `.NET 10.`

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

Lines changed: 16 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -7,143 +7,39 @@ control: SfCalendar
77
documentation: ug
88
---
99

10-
# Liquid Glass Support
10+
# Liquid Glass Effect in .NET MAUI Calendar (SfCalendar)
1111

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.
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 Calendar (SfCalendar) control.
1313

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.
14+
## Apply liquid glass effect
1515

16-
## Platform and Version Support
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Calendar control:
1717

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.
18+
### Step 1: Wrap the control inside glass effect view
2119

22-
## Prerequisites
20+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Calendar` control, wrap the control inside the `SfGlassEffectView` class.
2321

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).
22+
For more details, refer to the `Liquid Glass Getting Started documentation`.
2623

27-
## Apply Liquid Glass Effect to SfCalendar
24+
### Step 2: Enable the liquid glass effect on Image Editor
2825

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.
26+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfCalendar` 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.
3027

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 %}
28+
### Step 3: Customize the background
7729

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

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.
32+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfCalendar` control:
8533

8634
{% 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>
35+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
11336

11437
{% 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-
};
38+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
12839

12940
{% endhighlight %}
13041
{% endtabs %}
13142

13243
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.
44+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
45+
* This feature is available only in `.NET 10.`

0 commit comments

Comments
 (0)