Skip to content

Commit b62215b

Browse files
DhanarajRajendranDhanarajRajendran
committed
Addressed the Review suggestions of Liquid Glass effect support UG of Chart and RTE.
1 parent 175193f commit b62215b

File tree

13 files changed

+501
-533
lines changed

13 files changed

+501
-533
lines changed

‎MAUI/Cartesian-Charts/Cupertino-Theme.md‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

‎MAUI/Cartesian-Charts/Liquid-Glass-Effect.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Effect in .NET MAUI Cartesian Chart control | Syncfusion
4+
description: Learn how to enable and customize the Liquid Glass visual effect in Syncfusion® .NET MAUI Chart (SfCartesianChart) for stunning UI..
5+
platform: maui
6+
control: SfCartesianChart
7+
documentation: ug
8+
keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart, cupertino cartesian tooltip maui, .net maui chart visualization, cupertino cartesian trackball maui.
9+
---
10+
11+
# Liquid Glass Effect in .NET MAUI Cartesian Chart
12+
13+
The Liquid Glass Effect is a modern design style that provides a sleek, minimalist appearance with clean lines, subtle visual effects, and elegant styling. It features smooth rounded corners and sophisticated visual treatments that create a polished, professional look for your charts.
14+
15+
N> The liquid glass effect is only available on macOS and iOS platforms with version 26 or higher.
16+
17+
## How it Enhances Chart UI on macOS and iOS
18+
19+
The Liquid Glass Effect enhances chart interactivity with liquid glass effects on tooltips and trackballs, creating a modern and visually appealing data visualization interface that delivers a sophisticated user experience.
20+
21+
## Apply Liquid Glass Effect to SfCartesianChart
22+
23+
Wrap the SfCartesianChart inside an [SfGlassEffectsView]() to give the chart surface a glass (blurred or clear) appearance. Enable the liquid glass effect to get a sleek, glassy output. SfGlassEffectsView available in [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<core:SfGlassEffectsView CornerRadius="20"
30+
Padding="12"
31+
EffectType="Regular"
32+
EnableShadowEffect="True">
33+
34+
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
35+
<chart:SfCartesianChart.XAxes>
36+
<chart:CategoryAxis />
37+
</chart:SfCartesianChart.XAxes>
38+
<chart:SfCartesianChart.YAxes>
39+
<chart:NumericalAxis />
40+
</chart:SfCartesianChart.YAxes>
41+
42+
<!-- Add your series here -->
43+
<chart:ColumnSeries
44+
ItemsSource="{Binding Data}"
45+
XBindingPath="Category"
46+
YBindingPath="Value" />
47+
</chart:SfCartesianChart>
48+
</core:SfGlassEffectsView>
49+
50+
{% endhighlight %}
51+
52+
{% highlight c# %}
53+
54+
SfCartesianChart chart = new SfCartesianChart();
55+
chart.EnableLiquidGlassEffect = true;
56+
chart.XAxes.Add(new CategoryAxis());
57+
chart.YAxes.Add(new NumericalAxis());
58+
chart.Series.Add(new ColumnSeries
59+
{
60+
ItemsSource = viewModel.Data,
61+
XBindingPath = "Category",
62+
YBindingPath = "Value"
63+
});
64+
65+
var glass = new SfGlassEffectsView
66+
{
67+
CornerRadius = 20,
68+
Padding = 12,
69+
EffectType = GlassEffectType.Regular, // Regular (blurrier) or Clear (glassy)
70+
EnableShadowEffect = true,
71+
LiquidGlassEffect = true,
72+
Content = chart
73+
};
74+
75+
{% endhighlight %}
76+
77+
{% endtabs %}
78+
79+
### Key Properties
80+
81+
- [EffectType](): Chooses the visual style (Regular or Clear).
82+
- [CornerRadius](): Rounds the container edges for a polished look.
83+
- [EnableShadowEffect](): Adds a subtle drop shadow to enhance depth.
84+
- [EnableLiquidGlassEffect](): Enables the glass effect for the chart's tooltip and trackballs.
85+
86+
### Best Practices and Tips
87+
88+
- Hosting the chart inside [SfGlassEffectsView]() gives the chart body an acrylic look.
89+
- Liquid glass effects are most visible over images or colorful backgrounds.
90+
- Use EffectType="Regular" for a blurrier look and EffectType="Clear" for a crisper, glassy look.
91+
- Tune CornerRadius and Padding to balance content density and visual polish.
92+
- When using a custom template for tooltip and trackball using [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate) and [TrackballLabelTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_TrackballLabelTemplate), set the background to transparent to display the liquid glass effect.

‎MAUI/Circular-Charts/Cupertino-Theme.md‎

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎MAUI/Circular-Charts/Liquid-Glass-Effect.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Effect in .NET MAUI Circular Chart control | Syncfusion
4+
description: Learn how to enable and customize the Liquid Glass visual effect in Syncfusion® .NET MAUI Chart (SfCircularChart) for stunning UI..
5+
platform: maui
6+
control: SfCircularChart
7+
documentation: ug
8+
keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart, cupertino circular tooltip maui, .net maui chart visualization.
9+
---
10+
11+
# Liquid Glass Effect in .NET MAUI Circular Chart
12+
13+
The Liquid Glass Effect is a modern design style that provides a sleek, minimalist appearance with clean lines, subtle visual effects, and elegant styling. It features smooth rounded corners and sophisticated visual treatments that create a polished, professional look for your charts.
14+
15+
N> The liquid glass effect is only available on macOS and iOS platforms with iOS version 26 or higher.
16+
17+
## How it Enhances Chart UI on macOS and iOS
18+
19+
The Liquid Glass Effect enhances chart interactivity with liquid glass effects on tooltips, creating a modern and visually appealing data visualization interface that delivers a sophisticated user experience.
20+
21+
## Apply Liquid Glass Effect to SfCircularChart
22+
23+
Wrap the SfCircularChart inside an [SfGlassEffectsView]() to give the chart surface a glass (blurred or clear) appearance. Enable the liquid glass effect to get a sleek, glassy output. SfGlassEffectsView available in [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<core:SfGlassEffectsView CornerRadius="20"
30+
Padding="12"
31+
EffectType="Regular"
32+
EnableShadowEffect="True">
33+
34+
<chart:SfCircularChart EnableLiquidGlassEffect="True">
35+
36+
<!-- Add your series here -->
37+
<chart:PieSeries
38+
ItemsSource="{Binding Data}"
39+
XBindingPath="Category"
40+
YBindingPath="Value" />
41+
</chart:SfCircularChart>
42+
</core:SfGlassEffectsView>
43+
44+
{% endhighlight %}
45+
46+
{% highlight c# %}
47+
48+
SfCircularChart chart = new SfCircularChart();
49+
chart.EnableLiquidGlassEffect = true;
50+
chart.Series.Add(new PieSeries
51+
{
52+
ItemsSource = viewModel.Data,
53+
XBindingPath = "Category",
54+
YBindingPath = "Value"
55+
});
56+
57+
var glass = new SfGlassEffectsView
58+
{
59+
CornerRadius = 20,
60+
Padding = 12,
61+
EffectType = GlassEffectType.Regular, // Regular (blurrier) or Clear (glassy)
62+
EnableShadowEffect = true,
63+
LiquidGlassEffect = true,
64+
Content = chart
65+
};
66+
67+
{% endhighlight %}
68+
69+
{% endtabs %}
70+
71+
### Key Properties
72+
73+
- [EffectType](): Chooses the visual style (Regular or Clear).
74+
- [CornerRadius](): Rounds the container edges for a polished look.
75+
- [EnableShadowEffect](): Adds a subtle drop shadow to enhance depth.
76+
- [EnableLiquidGlassEffect](): Enables the glass effect for the chart's tooltip.
77+
78+
### Best Practices and Tips
79+
80+
- Hosting the chart inside [SfGlassEffectsView]() gives the chart body an acrylic look.
81+
- Liquid glass effects are most visible over images or colorful backgrounds.
82+
- Use EffectType="Regular" for a blurrier look and EffectType="Clear" for a crisper, glassy look.
83+
- Tune CornerRadius and Padding to balance content density and visual polish.
84+
- When using a custom template for tooltip using [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate), set the background to transparent to display the liquid glass effect.

0 commit comments

Comments
 (0)