Skip to content

Commit 0d03ba8

Browse files
aarthisf3966aarthisf3966
committed
997111 - Addressed review changes.
1 parent ded48d4 commit 0d03ba8

File tree

2 files changed

+42
-41
lines changed

2 files changed

+42
-41
lines changed

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

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,61 @@
11
---
22
layout: post
3-
title: Liquid Glass Support for .NET MAUI Image Editor Control | Syncfusion®
4-
description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI ImageEditor(SfImageEditor) control using SfGlassEffectsView.
3+
title: Liquid Glass Support for .NET MAUI Image Editor | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Image Editor (SfImageEditor) control.
55
platform: MAUI
66
control: SfImageEditor
77
documentation: ug
88
---
99

10-
# Liquid Glass Support
10+
# Liquid glass effect
1111

12-
The `SfImageEditor` 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 Image Editor 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 Image Editor (SfImageEditor) control.
1313

14-
Additionally, you can apply the glass effect to the ImageEditor control by enabling the [EnableLiquidGlassEffect]() property.
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 Image Editor 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 `ImageEditor` 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.ImageEditor](https://www.nuget.org/packages/Syncfusion.Maui.ImageEditor/) package (for SfImageEditor).
22+
For more details, refer to the Liquid Glass Getting Started documentation.
2623

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

29-
Wrap the `SfImageEditor` inside an [SfGlassEffectsView]() to give the Image Editor surface a glass (blurred or clear) appearance.
26+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfImageEditor` 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.
27+
28+
### Step 3: Customize the background
29+
30+
To achieve a glass like background in the Image Editor and its Toolbar, set the `Background` property to `Transparent`.
31+
32+
The background will then be treated as a tinted color, ensuring a consistent glass effect across the control.
33+
34+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the SfImageEditor control:
3035

3136
{% tabs %}
32-
{% highlight xaml %}
37+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 15 16 21" %}
3338

3439
<Grid>
35-
<Image Source="liquidglassimage.jpg"
36-
Aspect="AspectFill" />
37-
38-
<core:SfGlassEffectView>
40+
<Grid.Background>
41+
<LinearGradientBrush StartPoint="0,0"
42+
EndPoint="0,1">
43+
<GradientStop Color="#0F4C75"
44+
Offset="0.0"/>
45+
<GradientStop Color="#3282B8"
46+
Offset="0.5"/>
47+
<GradientStop Color="#1B262C"
48+
Offset="1.0"/>
49+
</LinearGradientBrush>
50+
</Grid.Background>
51+
52+
<core:SfGlassEffectView EffectType="Regular"
53+
EnableShadowEffect="True"
54+
CornerRadius="20">
3955
<imageEditor:SfImageEditor x:Name="imageEditor"
4056
Background="Transparent"
4157
SelectionStroke="#AE97FF"
42-
Source="{converters:SfImageResource Source={OnPlatform Default=imageeditordesktop.png, Android=imageeditormobile.png, iOS=imageeditormobile.png}}"
58+
Source="editorimage.png"
4359
EnableLiquidGlassEffect="True">
4460
<imageEditor:SfImageEditor.ToolbarSettings>
4561
<imageEditor:ImageEditorToolbarSettings Background="Transparent"
@@ -50,15 +66,14 @@ Wrap the `SfImageEditor` inside an [SfGlassEffectsView]() to give the Image Edit
5066
</Grid>
5167

5268
{% endhighlight %}
53-
{% highlight c# %}
69+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="4 6 7 8 11" %}
5470

5571
using Syncfusion.Maui.Core;
5672
using Syncfusion.Maui.ImageEditor;
5773

5874
var glassView = new SfGlassEffectsView
5975
{
6076
CornerRadius = 20,
61-
Padding = new Thickness(12),
6277
EffectType = LiquidGlassEffectType.Regular,
6378
EnableShadowEffect = true
6479
};
@@ -69,20 +84,6 @@ glassView.Content = this.imageEditor;
6984
{% endhighlight %}
7085
{% endtabs %}
7186

72-
N>
73-
* Liquid Glass effects are most visible over images or colorful backgrounds.
74-
* Use EffectType="Regular" for a blurrier look and "Clear" for a glassy look.
75-
76-
## Key Properties
77-
78-
- [EffectType](): Choose between Regular (blurry) and Clear (glassy) effects.
79-
- [EnableShadowEffect](): Enables a soft shadow around the acrylic container.
80-
- [CornerRadius](): Rounds the corners of the acrylic container.
81-
- Padding/Height/Width: Adjust layout around the ImageEditor control.
82-
83-
## Best Practices and Tips
84-
85-
- Hosting the Image Editor control inside [SfGlassEffectsView]() gives the control body an acrylic look.
86-
- For the most noticeable effect, place the control over images or vibrant backgrounds.
87-
88-
The following screenshot illustrates `SfImageEditor` hosted within an acrylic container, and the dialog mode using the glass effect.
87+
Note>
88+
* Supported on macOS 26 or higher and iOS 16 or higher.
89+
* This feature is available only in .NET 10.

‎MAUI/Kanban-Board/liquid-glass-effect.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Liquid Glass Support
1111

12-
The `SfKanban` supports a liquid glass effect by setting the [EnableLiquidGlassEffect]() property to true. This enhances visual depth and readability when kanban control placed over images or colorful layouts.
12+
The [SfKanban](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html) supports a liquid glass effect by setting the [EnableLiquidGlassEffect]() property to true. This enhances visual depth and readability when kanban control placed over images or colorful layouts.
1313

1414
## Platform and Version Support
1515

@@ -357,4 +357,4 @@ public class KanbanViewModel
357357
N>
358358
* Liquid Glass effects are most visible over images or colorful backgrounds.
359359

360-
The following screenshot illustrates `SfCardView` with the liquid glass effect enabled over a colorful background.
360+
The following screenshot illustrates [SfKanban](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Kanban.SfKanban.html) with the liquid glass effect enabled over a colorful background.

0 commit comments

Comments
 (0)