Skip to content

996035-Updated Liquid glass UG content for calendar team controls #3923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MuniappanSubramanian merged 5 commits into from
Dec 18, 2025
Merged

996035-Updated Liquid glass UG content for calendar team controls #3923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
499dde6
996035-Updated Liquid glass UG content for calendar team controls
MohamedHasan3644 Dec 15, 2025
f932a3c
Updated code snippet
MohamedHasan3644 Dec 15, 2025
890c899
Updated API Link and content
MohamedHasan3644 Dec 17, 2025
1d2aff2
Updated Codes for liquid glass
MohamedHasan3644 Dec 17, 2025
e3a4ce5
Resolved review concerns
MohamedHasan3644 Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 61 additions & 112 deletions MAUI/Backdrop/liquid-glass-effect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,157 +7,106 @@ control: SfBackdropPage
documentation: ug
---

# Liquid Glass Support
# Liquid Glass Effect in .NET MAUI Backdrop Page (SfBackdropPage)

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.
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.

## Platform and Version Support
## Apply liquid glass effect

1. This feature is supported on .NET 10 or greater.
2. This feature is supported on macOS 26 and iOS 26 or later.
3. On platforms or versions below these requirements, the layers render without the acrylic blur effect and fall back to a standard background.
Follow these steps to enable and configure the Liquid Glass Effect in the Front or Back Layer:

## Prerequisites
### Step 1: Enable the liquid glass effect on Front or Back Layer

- Add the [Syncfusion.Maui.Backdrop](https://www.nuget.org/packages/Syncfusion.Maui.Backdrop) package (for SfBackdropPage, BackdropFrontLayer, BackdropBackLayer).
Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropBackLayer.html#Syncfusion_Maui_Backdrop_BackdropBackLayer_EnableLiquidGlassEffect) property to `true` in the [SfBackdropPage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html) control's Front or Back Layer to apply the Liquid Glass Effect.

## Apply Liquid Glass Effect to the back layer
### Step 2: Customize the background

Turn on the liquid glass effect on the back layer by setting [EnableLiquidGlassEffect]() to true.
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.

The following code snippet demonstrates how to apply the Liquid Glass Effect to the Front or Back layer of the [SfBackdropPage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html) control:

{% tabs %}
{% highlight xaml %}
{% highlight xaml tabtitle="MainPage.xaml" %}

<?xml version="1.0" encoding="utf-8" ?>
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AcrylicBackdropPage"
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">

<!-- Back Layer -->
<backdrop:SfBackdropPage.BackLayer>
<backdrop:BackdropBackLayer EnableLiquidGlassEffect="True">
<backdrop:BackdropBackLayer>
<Grid>
<!-- Optional: colorful/image background to visualize acrylic -->
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
<StackLayout Padding="16">
<Label Text="Back layer content" FontSize="16"/>
</StackLayout>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="#0F4C75"
Offset="0.0"/>
<GradientStop Color="#3282B8"
Offset="0.5"/>
<GradientStop Color="#1B262C"
Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Background="Transparent">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Appetizers</x:String>
<x:String>Soups</x:String>
<x:String>Desserts</x:String>
<x:String>Salads</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</Grid>
</backdrop:BackdropBackLayer>
</backdrop:SfBackdropPage.BackLayer>

<!-- Front Layer -->
<backdrop:SfBackdropPage.FrontLayer>
<backdrop:BackdropFrontLayer>
<Grid BackgroundColor="WhiteSmoke" />
</backdrop:BackdropFrontLayer>
<backdrop:BackdropFrontLayer EnableLiquidGlassEffect="True"/>
</backdrop:SfBackdropPage.FrontLayer>
</backdrop:SfBackdropPage>

{% endhighlight %}
{% highlight c# %}
{% highlight c# tabtitle="MainPage.xaml.cs" %}

using Syncfusion.Maui.Backdrop;

this.BackLayer = new BackdropBackLayer
this.BackLayer = new BackdropBackLayer()
{
EnableLiquidGlassEffect = true,
Content = new Grid
Content = new Grid()
{
Children =
Background = new LinearGradientBrush()
{
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
new VerticalStackLayout
StartPoint = new Point(0, 0),
EndPoint = new Point(0, 1),
GradientStops =
{
Padding = 16,
Children = { new Label { Text = "Back layer content", FontSize = 16 } }
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
}
}
}
};

this.FrontLayer = new BackdropFrontLayer
{
Content = new Grid { BackgroundColor = Colors.WhiteSmoke }
};

{% endhighlight %}
{% endtabs %}

## Apply Liquid Glass Effect to the front layer

You can enable the liquid glass effect for the front layer as well by setting [EnableLiquidGlassEffect]() to true.

{% tabs %}
{% highlight xaml %}

<?xml version="1.0" encoding="utf-8" ?>
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AcrylicBackdropFrontPage"
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">

<backdrop:SfBackdropPage.BackLayer>
<backdrop:BackdropBackLayer>
<Grid>
<Label Text="Menu" HorizontalOptions="Center" VerticalOptions="Center"/>
</Grid>
</backdrop:BackdropBackLayer>
</backdrop:SfBackdropPage.BackLayer>

<backdrop:SfBackdropPage.FrontLayer>
<backdrop:BackdropFrontLayer EnableLiquidGlassEffect="True">
<Grid>
<!-- Optional: place bright imagery behind the surface to visualize blur -->
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
<StackLayout Padding="16">
<Label Text="Front layer content" FontSize="16"/>
</StackLayout>
</Grid>
</backdrop:BackdropFrontLayer>
</backdrop:SfBackdropPage.FrontLayer>
</backdrop:SfBackdropPage>

{% endhighlight %}
{% highlight c# %}

using Syncfusion.Maui.Backdrop;

this.BackLayer = new BackdropBackLayer
{
Content = new Grid
{
Children = { new Label { Text = "Menu", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center } }
}
};

this.FrontLayer = new BackdropFrontLayer
{
EnableLiquidGlassEffect = true,
Content = new Grid
{
},
RowDefinitions =
{
new RowDefinition () { Height = GridLength.Auto}
},
Children =
{
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
new VerticalStackLayout
new ListView()
{
Padding = 16,
Children = { new Label { Text = "Front layer content", FontSize = 16 } }
ItemsSource = new string[] { "Appetizers", "Soups", "Desserts" ,"Salads"}
}
}
}
};

this.FrontLayer = new BackdropFrontLayer();
this.FrontLayer.EnableLiquidGlassEffect = true;

{% endhighlight %}
{% endtabs %}

N>
* Liquid Glass effects are most visible over images or colorful backgrounds.
* You can enable the effect independently on either the back layer, the front layer, or both as needed.

## Best Practices and Tips

- The back and front layers use built-in acrylic when their [EnableLiquidGlassEffect]() property is true.
- Place imagery or vibrant backgrounds beneath the layer surface to see the blur clearly.
- Combine with existing layout properties (RevealedHeight, EdgeShape, etc.) to achieve the desired design while using the effect.

The following screenshots illustrate the back and front layers with the liquid glass effect enabled over colorful backgrounds.
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
* This feature is available only in `.NET 10.`
Loading