Skip to content

Commit 2a6a649

Browse files
karthikasf4617karthikasf4617
committed
Added liquid glass UG content for TabView, Radial Menu, Color picker, Navigation Drawer and Switch
1 parent 1fec61d commit 2a6a649

File tree

5 files changed

+294
-0
lines changed

5 files changed

+294
-0
lines changed

‎MAUI/Liquid-Glass-UI/ColorPicker.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
layout: post
3+
title: Provide Liquid Glass Support for .NET MAUI ColorPicker | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI ColorPicker (SfColorPicker) control and more.
5+
platform: MAUI
6+
control: SfColorPicker
7+
documentation: ug
8+
---
9+
10+
11+
# Liquid glass support:
12+
13+
The [SfColorPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfColorPicker.html) provides `liquid glass` (acrylic/glassmorphism) effect for its color picker when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the color picker is in active state, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the color picker’s appearance at rest, and works well over images or colorful layouts.
14+
15+
## Availability
16+
17+
1. Supported on .NET 10 or greater.
18+
2. Supported on mac or iOS 26 or greater.
19+
3. On platforms/versions below these requirements, the glass effect is not applied and the color picker render with the standard appearance.
20+
21+
XAML example The color picker’s glass effect appears only while it is in active state.
22+
23+
{% tabs %}
24+
{% highlight xaml hl_lines="49 52" %}
25+
26+
<Grid>
27+
<!-- Background to make the glass effect visible while pressing the color picker -->
28+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
29+
<colorPicker:SfColorPicker EnableLiquidGlassEffect="True" />
30+
</Grid>
31+
</ContentPage>
32+
33+
{% endhighlight %}
34+
{% highlight c# hl_lines="74 77" %}
35+
36+
using Syncfusion.Maui.Sliders;
37+
38+
SfColorPicker colorPicker = new SfColorPicker
39+
{
40+
EnableLiquidGlassEffect = true
41+
};
42+
43+
{% endhighlight %}
44+
{% endtabs %}
45+
46+
## Behavior and tips
47+
48+
- The glass effect is applied to the color picker only during active interactions; at rest, the color picker uses the standard look.
49+
- Place the color picker over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
50+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
51+
- For an enhanced UI, set `SliderThumbStroke="Transparent"` at the sample level for the color picker.
52+
53+
The following screenshot illustrates SfColorPicker with the glass effect visible on the color picker while it is in active state.
54+
55+
N> The glass effect is applied to the color picker only while it is in active state.

‎MAUI/Liquid-Glass-UI/NavigationDrawer.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
layout: post
3+
title: Provide Liquid Glass Support for .NET MAUI NavigationDrawer | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI NavigationDrawer (SfNavigationDrawer) control and more.
5+
platform: MAUI
6+
control: SfNavigationDrawer
7+
documentation: ug
8+
---
9+
10+
11+
# Liquid glass support:
12+
13+
The [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) provides `liquid glass` (acrylic/glassmorphism) effect for its navigation drawer when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the navigation drawer is in active state, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the navigation drawer’s appearance at rest, and works well over images or colorful layouts.
14+
15+
## Availability
16+
17+
1. Supported on .NET 10 or greater.
18+
2. Supported on mac or iOS 26 or greater.
19+
3. On platforms/versions below these requirements, the glass effect is not applied and the navigation drawer render with the standard appearance.
20+
21+
XAML example The navigation drawer’s glass effect appears only while it is in active state.
22+
23+
{% tabs %}
24+
{% highlight xaml hl_lines="49 52" %}
25+
26+
<?xml version="1.0" encoding="utf-8" ?>
27+
<ContentPage
28+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
29+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
30+
xmlns:navigationDrawer="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
31+
x:Class="NavigationDrawerGlassEffectPage">
32+
33+
<Grid>
34+
<!-- Background to make the glass effect visible while pressing the navigation drawer -->
35+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36+
37+
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
38+
<Label Text="Volume" FontSize="18" TextColor="White" />
39+
40+
<navigationDrawer:SfNavigationDrawer
41+
EnableLiquidGlassEffect="True" />
42+
</StackLayout>
43+
</Grid>
44+
</ContentPage>
45+
46+
{% endhighlight %}
47+
{% highlight c# hl_lines="74 77" %}
48+
49+
using Syncfusion.Maui.Sliders;
50+
51+
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer
52+
{
53+
EnableLiquidGlassEffect = true
54+
};
55+
56+
{% endhighlight %}
57+
{% endtabs %}
58+
59+
## Behavior and tips
60+
61+
- The glass effect is applied to the navigation drawer only during active interactions; at rest, the navigation drawer uses the standard look.
62+
- Place the navigation drawer over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
63+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
64+
- For an enhanced UI, set `ContentBackground="Transparent"` for the `SfNavigationDrawer` and `Background="Transparent"` at the sample level for the content view.
65+
66+
The following screenshot illustrates SfNavigationDrawer with the glass effect visible on the navigation drawer while it is in active state.
67+
68+
N> The glass effect is applied to the navigation drawer only while it is in active state.

‎MAUI/Liquid-Glass-UI/RadialMenu.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
layout: post
3+
title: Provide Liquid Glass Support for .NET MAUI RadialMenu | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI RadialMenu (SfRadialMenu) control and more.
5+
platform: MAUI
6+
control: SfRadialMenu
7+
documentation: ug
8+
---
9+
10+
11+
# Liquid glass support:
12+
13+
The [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) provides `liquid glass` (acrylic/glassmorphism) effect for its radial menu when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the radial menu is in active state, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the radial menu’s appearance at rest, and works well over images or colorful layouts.
14+
15+
## Availability
16+
17+
1. Supported on .NET 10 or greater.
18+
2. Supported on mac or iOS 26 or greater.
19+
3. On platforms/versions below these requirements, the glass effect is not applied and the radial menu render with the standard appearance.
20+
21+
XAML example The radial menu’s glass effect appears only while it is in active state.
22+
23+
{% tabs %}
24+
{% highlight xaml hl_lines="49 52" %}
25+
26+
<?xml version="1.0" encoding="utf-8" ?>
27+
<ContentPage
28+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
29+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
30+
xmlns:radialMenu="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
31+
x:Class="RadialMenuGlassEffectPage">
32+
33+
<Grid>
34+
<!-- Background to make the glass effect visible while pressing the radial menu -->
35+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36+
<radialMenu:SfRadialMenu EnableLiquidGlassEffect="True" />
37+
</Grid>
38+
</ContentPage>
39+
40+
{% endhighlight %}
41+
{% highlight c# hl_lines="74 77" %}
42+
43+
using Syncfusion.Maui.Sliders;
44+
45+
SfRadialMenu radialMenu = new SfRadialMenu
46+
{
47+
EnableLiquidGlassEffect = true
48+
};
49+
50+
{% endhighlight %}
51+
{% endtabs %}
52+
53+
## Behavior and tips
54+
55+
- The glass effect is applied to the radial menu only during active interactions; at rest, the radial menu uses the standard look.
56+
- Place the radial menu over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
57+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
58+
59+
The following screenshot illustrates SfRadialMenu with the glass effect visible on the radial menu while it is in active state.
60+
61+
N> The glass effect is applied to the radial menu only while it is in active state.

‎MAUI/Liquid-Glass-UI/Switch.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
layout: post
3+
title: Provide Liquid Glass Support for .NET MAUI Switch | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI Switch (SfSwitch) control and more.
5+
platform: MAUI
6+
control: SfSwitch
7+
documentation: ug
8+
---
9+
10+
11+
# Liquid glass support:
12+
13+
The [SfSwitch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html) provides `liquid glass` (acrylic/glassmorphism) effect for its switch when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the switch is in active state, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the switch’s appearance at rest, and works well over images or colorful layouts.
14+
15+
## Availability
16+
17+
1. Supported on .NET 10 or greater.
18+
2. Supported on mac or iOS 26 or greater.
19+
3. On platforms/versions below these requirements, the glass effect is not applied and the switch render with the standard appearance.
20+
21+
XAML example The switch’s glass effect appears only while it is in active state.
22+
23+
{% tabs %}
24+
{% highlight xaml hl_lines="49 52" %}
25+
26+
27+
<Grid>
28+
<!-- Background to make the glass effect visible while pressing the switch -->
29+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
30+
<Switch:SfSwitch
31+
EnableLiquidGlassEffect="True" />
32+
33+
</Grid>
34+
35+
36+
{% endhighlight %}
37+
{% highlight c# hl_lines="74 77" %}
38+
39+
using Syncfusion.Maui.Sliders;
40+
41+
SfSwitch aSwitch = new SfSwitch
42+
{
43+
EnableLiquidGlassEffect = true
44+
};
45+
46+
{% endhighlight %}
47+
{% endtabs %}
48+
49+
## Behavior and tips
50+
51+
- The glass effect is applied to the switch only during active interactions; at rest, the switch uses the standard look.
52+
- Place the switch over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
53+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
54+
55+
The following screenshot illustrates SfSwitch with the glass effect visible on the switch while it is in active state.
56+
57+
N> The glass effect is applied to the switch only while it is in active state.

‎MAUI/Liquid-Glass-UI/TabView.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
layout: post
3+
title: Provide Liquid Glass Support for .NET MAUI TabView | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI TabView (SfTabView) control and more.
5+
platform: MAUI
6+
control: SfTabView
7+
documentation: ug
8+
---
9+
10+
11+
# Liquid glass support:
12+
13+
The [SfTabView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabView.html?tabs=tabid-1) provides `liquid glass` (acrylic/glassmorphism) effect for its tabview when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the tabview is in active state, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the tabview’s appearance at rest, and works well over images or colorful layouts.
14+
15+
## Availability
16+
17+
1. Supported on .NET 10 or greater.
18+
2. Supported on mac or iOS 26 or greater.
19+
3. On platforms/versions below these requirements, the glass effect is not applied and the tabview render with the standard appearance.
20+
21+
XAML example The tabview’s glass effect appears only while it is in active state.
22+
23+
{% tabs %}
24+
{% highlight xaml hl_lines="49 52" %}
25+
26+
<Grid>
27+
<!-- Background to make the glass effect visible while pressing the tabview -->
28+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
29+
<tabview:SfTabView EnableLiquidGlassEffect="True" />
30+
</Grid>
31+
32+
{% endhighlight %}
33+
{% highlight c# hl_lines="74 77" %}
34+
35+
using Syncfusion.Maui.Sliders;
36+
37+
SfTabView tabView = new SfTabView
38+
{
39+
EnableLiquidGlassEffect = true
40+
};
41+
42+
{% endhighlight %}
43+
{% endtabs %}
44+
45+
## Behavior and tips
46+
47+
- The glass effect is applied to the tabview only during active interactions; at rest, the tabview uses the standard look.
48+
- Place the tabview over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
49+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
50+
51+
The following screenshot illustrates SfTabView with the glass effect visible on the tabview while it is in active state.
52+
53+
N> The glass effect is applied to the tabview only while it is in active state.

0 commit comments

Comments
 (0)