Skip to content

Commit dd19aa7

Browse files
committed
Committing the liquid glass effect feature UG
1 parent eff8ae9 commit dd19aa7

File tree

2 files changed

+104
-0
lines changed

2 files changed

+104
-0
lines changed
-12 KB
Loading
Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Effect for .NET MAUI PDF Viewer control | Syncfusion
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion<sup>®</sup> .NET MAUI PDF Viewer (SfPdfViewer) control.
5+
platform: document-processing
6+
control: SfPdfViewer
7+
documentation: ug
8+
keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
9+
---
10+
11+
# Liquid Glass Effect in .NET MAUI PDF Viewer (SfPdfViewer)
12+
13+
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 [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control.
14+
15+
## Apply liquid glass effect
16+
17+
Follow these steps to enable and configure the Liquid Glass Effect in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control:
18+
19+
### Step 1: Wrap the control inside glass effect view
20+
21+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control, wrap the control inside the `SfGlassEffectView` class.
22+
23+
For more details, refer to the `Liquid Glass Getting Started documentation`.
24+
25+
### Step 2: Enable the liquid glass effect on SfPdfViewer
26+
27+
Set the `EnableLiquidGlassEffect` property to `true` in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) 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.
28+
29+
### Step 3: Customize the background
30+
31+
To achieve a glass like background in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
32+
33+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control:
34+
35+
{% tabs %}
36+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="15 17 19" %}
37+
38+
<Grid>
39+
<Grid.Background>
40+
<LinearGradientBrush StartPoint="0,0"
41+
EndPoint="0,1">
42+
<GradientStop Color="#0F4C75"
43+
Offset="0.0"/>
44+
<GradientStop Color="#3282B8"
45+
Offset="0.5"/>
46+
<GradientStop Color="#1B262C"
47+
Offset="1.0"/>
48+
</LinearGradientBrush>
49+
</Grid.Background>
50+
51+
<core:SfGlassEffectView EffectType="Regular"
52+
CornerRadius="20">
53+
<syncfusion:SfPdfViewer x:Name="pdfViewer"
54+
Background="Transparent"
55+
EnableLiquidGlassEffect="True">
56+
</syncfusion:SfPdfViewer>
57+
</core:SfGlassEffectView>
58+
</Grid>
59+
60+
{% endhighlight %}
61+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
62+
63+
using Syncfusion.Maui.Core;
64+
using Syncfusion.Maui.PdfViewer;
65+
66+
var grid = new Grid();
67+
var gradientBrush = new LinearGradientBrush
68+
{
69+
StartPoint = new Point(0, 0),
70+
EndPoint = new Point(0, 1),
71+
GradientStops =
72+
{
73+
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
74+
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
75+
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
76+
}
77+
};
78+
79+
grid.Background = gradientBrush;
80+
81+
var glassEffectView = new SfGlassEffectView
82+
{
83+
EffectType = GlassEffectType.Regular,
84+
CornerRadius = 20
85+
};
86+
87+
var pdfViewer = new SfPdfViewer
88+
{
89+
Background = Colors.Transparent,
90+
EnableLiquidGlassEffect = true
91+
};
92+
93+
glassEffectView.Content = pdfViewer;
94+
95+
grid.Children.Add(glassEffectView);
96+
97+
this.Content = grid;
98+
99+
{% endhighlight %}
100+
{% endtabs %}
101+
102+
N>
103+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
104+
* This feature is available only in `.NET 10.`

0 commit comments

Comments
 (0)