diff --git a/MAUI/Liquid-Glass-UI/Overview.md b/MAUI/Liquid-Glass-UI/Overview.md index 40b35fce1..aaaf0d1c9 100644 --- a/MAUI/Liquid-Glass-UI/Overview.md +++ b/MAUI/Liquid-Glass-UI/Overview.md @@ -9,13 +9,13 @@ documentation: UG # Liquid Glass UI for .NET MAUI Overview -Syncfusion® provides `Liquid Glass visual effect support` for all `.NET MAUI controls`, introducing a `modern UI design` with a `visually appealing`, `translucent`, `glass-like appearance`. This feature applies `blurred backgrounds`, `adaptive color tinting`, and `light refraction` to enhance the overall `look and feel` of your applications while maintaining `readability` and `accessibility` across platforms. +Syncfusion® provides support for the Liquid Glass visual effect across all .NET MAUI controls. This feature introduces a modern UI design with a visually appealing, translucent, glass-like appearance. It applies blurred backgrounds, adaptive color tinting, and light refraction to enhance the overall look and feel of your applications while maintaining readability and accessibility across platforms. ![overview-liquid-glass-ui-in-.net-maui](images/overview-liquid-glass-ui-in-.net-maui.webp) ## Key Features -* **Adaptive Blur & Reflection:** Blurs background and reflects light for a glassy look. +* **Adaptive Blur & Reflection:** Applies background blur and reflects light for a glassy look. * **Edge Depth Effect:** Adds a subtle lens effect along edges for depth. * **Interaction:** Reacts to touch and hover instantly. -* **Smooth Motion:** Provides fluid animations and transitions. +* **Smooth Motion:** Provides fluid animations and seamless transitions. \ No newline at end of file diff --git a/MAUI/Liquid-Glass-UI/getting-started.md b/MAUI/Liquid-Glass-UI/getting-started.md new file mode 100644 index 000000000..129e6c4cb --- /dev/null +++ b/MAUI/Liquid-Glass-UI/getting-started.md @@ -0,0 +1,332 @@ +--- +layout: post +title: Getting Started with Liquid Glass UI in Syncfusion® .NET MAUI Controls +description: Getting started with the Liquid Glass Effect UI in Syncfusion® .NET MAUI controls and learn how to enable and customize it. +platform: MAUI +control: General +documentation: UG +--- + +# Getting Started with Liquid Glass for Modern UI + +This section explains how to enable and customize the Liquid Glass Effect in Syncfusion® .NET MAUI controls. For detailed information on specific Syncfusion® controls and their usage, refer to the respective Getting Started documentation. Ensure the control is properly configured and functioning before applying the Liquid Glass Effect. + +N> This feature is supported only on `.NET 10` + +## Supported Platforms + +* macOS 26 or higher +* iOS 26 or higher + +## Liquid Glass Effect + +The Liquid Glass Effect provides a modern, translucent design with background blur and depth effects, enhancing the visual appearance of your UI without requiring major code changes. To apply the Liquid Glass Effect to any Syncfusion® .NET MAUI control or custom view (such as a DataTemplate), wrap the control inside the `SfGlassEffectView` class. + +This view acts as a visual container that adds blur, translucency, and light refraction to its content, creating a realistic glass-like appearance. In this section, we will demonstrate how to use `SfGlassEffectView` with Syncfusion® controls to achieve a visually appealing glass effect. + +The `SfGlassEffectView` class is available in [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) and provides the following properties: + +### Effect types + +The `EffectType` property specifies the type of glass effect to apply: + +* **Regular:** Creates a blurred, frosted glass appearance. +* **Clear:** Creates a transparent, glass-like appearance. + +{% tabs %} +{% highlight XAML hl_lines="14" %} + +... +xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" +xmlns:button="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons" + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +### Corner radius + +Defines the corner radius for the view, enabling customization of its shape such as rounded rectangles or capsules. + +{% tabs %} +{% highlight XAML hl_lines="10" %} + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +### Enable shadow effect + +Adds a soft shadow to the content within the glass view, creating depth and a more realistic appearance. + +{% tabs %} +{% highlight XAML hl_lines="11" %} + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +### Set background color + +Applies a background tint color to the glass view, to enhance modern UI styling and improve +readability. + +{% tabs %} +{% highlight XAML hl_lines="11" %} + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Interactive Glass Effects + +Enable glass effects that respond to user interactions with clear transparency and dynamic lighting for an engaging UI. To enable this feature, set the `EnableLiquidGlassEffect` property to `true` on the Syncfusion `SfSwitch` control. This activates interaction-based visual effects. + +{% tabs %} +{% highlight XAML %} + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Controls list + +For control specific usage of the Liquid Glass Effect on individual Syncfusion® controls, including availability, and configuration details, please refer to the respective control documentation. + +N> View sample in GitHub. \ No newline at end of file diff --git a/maui-toc.html b/maui-toc.html index a600a28d5..7c8a3407f 100644 --- a/maui-toc.html +++ b/maui-toc.html @@ -179,6 +179,7 @@ Liquid Glass UI