Skip to content

Commit 7259a91

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #3909 from syncfusion-content/ContextUG
Updated UG for the Volume 4 release - Development
2 parents e542932 + 878d1fb commit 7259a91

File tree

7 files changed

+249
-0
lines changed

7 files changed

+249
-0
lines changed

‎MAUI/ColorPicker/LiquidGlassSupport.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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+
# Liquid Glass Support for .NET MAUI ColorPicker:
11+
12+
The [SfColorPicker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfColorPicker.html) provides `liquid glass` (acrylic/glass morphism) 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.
13+
14+
## Availability
15+
16+
1. Supported on .NET 10 or greater.
17+
2. Supported on mac or iOS 26 or greater.
18+
3. On platforms/versions below these requirements, the glass effect is not applied and the color picker render with the standard appearance.
19+
20+
XAML example The color picker's glass effect appears only while it is in active state.
21+
22+
{% tabs %}
23+
{% highlight xaml %}
24+
25+
<Grid>
26+
<!-- Background to make the glass effect visible while pressing the color picker -->
27+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
28+
<colorPicker:SfColorPicker EnableLiquidGlassEffect="True" />
29+
</Grid>
30+
</ContentPage>
31+
32+
{% endhighlight %}
33+
{% highlight c# %}
34+
35+
SfColorPicker colorPicker = new SfColorPicker
36+
{
37+
EnableLiquidGlassEffect = true
38+
};
39+
40+
{% endhighlight %}
41+
{% endtabs %}
42+
43+
## Behavior and tips
44+
45+
- The glass effect is applied to the color picker only during active interactions; at rest, the color picker uses the standard look.
46+
- Place the color picker over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
47+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
48+
- For an enhanced UI, set `SliderThumbStroke="Transparent"` at the sample level for the color picker.
49+
50+
N> The glass effect is applied to the color picker only while it is in active state.

‎MAUI/NavigationDrawer/LiquidGlassSupport.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
layout: post
3+
title: 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 for .NET MAUI NavigationDrawer:
12+
13+
The [SfNavigationDrawer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.NavigationDrawer.SfNavigationDrawer.html) provides `liquid glass` (acrylic/glass morphism) 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 %}
25+
26+
<Grid>
27+
<!-- Background to make the glass effect visible while pressing the navigation drawer -->
28+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
29+
<navigationDrawer:SfNavigationDrawer EnableLiquidGlassEffect="True" />
30+
</Grid>
31+
32+
{% endhighlight %}
33+
{% highlight c# %}
34+
35+
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer
36+
{
37+
EnableLiquidGlassEffect = true
38+
};
39+
40+
{% endhighlight %}
41+
{% endtabs %}
42+
43+
## Behavior and tips
44+
45+
- The glass effect is applied to the navigation drawer only during active interactions; at rest, the navigation drawer uses the standard look.
46+
- Place the navigation drawer over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
47+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
48+
- For an enhanced UI, set `ContentBackground="Transparent"` for the `SfNavigationDrawer` and `Background="Transparent"` at the sample level for the content view.
49+
50+
N> The glass effect is applied to the navigation drawer only while it is in active state.

‎MAUI/Radial-Menu/LiquidGlassSupport.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
# Liquid Glass Support for .NET MAUI RadialMenu:
11+
12+
The [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) provides `liquid glass` (acrylic/glass morphism) 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.
13+
14+
## Availability
15+
16+
1. Supported on .NET 10 or greater.
17+
2. Supported on mac or iOS 26 or greater.
18+
3. On platforms/versions below these requirements, the glass effect is not applied and the radial menu render with the standard appearance.
19+
20+
XAML example The radial menu's glass effect appears only while it is in active state.
21+
22+
{% tabs %}
23+
{% highlight xaml %}
24+
25+
<Grid>
26+
<!-- Background to make the glass effect visible while pressing the radial menu -->
27+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
28+
<radialMenu:SfRadialMenu EnableLiquidGlassEffect="True" />
29+
</Grid>
30+
31+
{% endhighlight %}
32+
{% highlight c# %}
33+
34+
SfRadialMenu radialMenu = new SfRadialMenu
35+
{
36+
EnableLiquidGlassEffect = true
37+
};
38+
39+
{% endhighlight %}
40+
{% endtabs %}
41+
42+
## Behavior and tips
43+
44+
- The glass effect is applied to the radial menu only during active interactions; at rest, the radial menu uses the standard look.
45+
- Place the radial menu over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
46+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
47+
48+
N> The glass effect is applied to the radial menu only while it is in active state.

‎MAUI/Switch/Images/LiquidGlass/liquid-glass.gif‎

471 KB
Loading

‎MAUI/Switch/LiquidGlassSupport.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
# Liquid Glass Support for .NET MAUI Switch:
11+
12+
The [SfSwitch](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSwitch.html) provides `liquid glass` (acrylic/glass morphism) 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.
13+
14+
## Availability
15+
16+
1. Supported on .NET 10 or greater.
17+
2. Supported on mac or iOS 26 or greater.
18+
3. On platforms/versions below these requirements, the glass effect is not applied and the switch render with the standard appearance.
19+
20+
XAML example The switch's glass effect appears only while it is in active state.
21+
22+
{% tabs %}
23+
{% highlight xaml %}
24+
25+
<Grid>
26+
<!-- Background to make the glass effect visible while pressing the switch -->
27+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
28+
<Switch:SfSwitch EnableLiquidGlassEffect="True" />
29+
</Grid>
30+
31+
{% endhighlight %}
32+
{% highlight c# %}
33+
34+
SfSwitch aSwitch = new SfSwitch
35+
{
36+
EnableLiquidGlassEffect = true
37+
};
38+
39+
{% endhighlight %}
40+
{% endtabs %}
41+
42+
## Behavior and tips
43+
44+
- The glass effect is applied to the switch only during active interactions; at rest, the switch uses the standard look.
45+
- Place the switch over visually rich content (images, gradients, or color blocks) to better showcase the transient glass effect.
46+
- Visual output and performance may vary by device/platform; keep backgrounds moderately detailed to maintain clarity during interaction.
47+
48+
N> The glass effect is applied to the switch only while it is in active state.

‎MAUI/TabView/LiquidGlassSupport.md‎

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

‎maui-toc.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -533,6 +533,7 @@
533533
<li><a href="/maui/ColorPicker/display-view">Display View</a></li>
534534
<li><a href="/maui/ColorPicker/events">Events</a></li>
535535
<li><a href="/maui/ColorPicker/localization">Localization</a></li>
536+
<li><a href="/maui/ColorPicker/LiquidGlassSupport">Liquid Glass Support</a></li>
536537
</ul>
537538
</li>
538539
<li>
@@ -961,6 +962,7 @@
961962
<li><a href="/maui/NavigationDrawer/Toggle-Animations">Setting Toggle Animations</a></li>
962963
<li><a href="/maui/NavigationDrawer/Events">Events</a></li>
963964
<li><a href="/maui/NavigationDrawer/Toggling-Drawer">Toggle Methods</a></li>
965+
<li><a href="/maui/NavigationDrawer/LiquidGlassSupport">Liquid Glass Support</a></li>
964966
</ul>
965967
</li>
966968
<li>
@@ -1113,6 +1115,7 @@
11131115
<li><a href="/maui/Radial-Menu/Place-and-Drag-Radialmenu">Placing and Dragging RadialMenu</a></li>
11141116
<li><a href="/maui/Radial-Menu/CenterButton-Customization">CenterButton Customization</a></li>
11151117
<li><a href="/maui/Radial-Menu/Events">Events</a></li>
1118+
<li><a href="/maui/Radial-Menu/LiquidGlassSupport">Liquid Glass Support</a></li>
11161119
</ul>
11171120
</li>
11181121
<li>
@@ -1330,6 +1333,7 @@
13301333
<li><a href="/maui/Switch/Right-To-Left">Right-To-Left</a></li>
13311334
<li><a href="/maui/Switch/Events">Events</a></li>
13321335
<li><a href="/maui/Switch/Visual-State-Manager">Visual State Manager</a></li>
1336+
<li><a href="/maui/Switch/LiquidGlassSupport">Liquid Glass Support</a></li>
13331337
</ul>
13341338
</li>
13351339
<li>
@@ -1347,6 +1351,7 @@
13471351
<li><a href="/maui/TabView/Nested-Tabs">Nested Tab bar</a></li>
13481352
<li><a href="/maui/TabView/How-To">How To</a></li>
13491353
<li><a href="/maui/TabView/Events">Events</a></li>
1354+
<li><a href="/maui/TabView/LiquidGlassSupport">Liquid Glass Support</a></li>
13501355
</ul>
13511356
</li>
13521357
<li>

0 commit comments

Comments
 (0)