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