Skip to content

Commit 9174f00

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #3921 from syncfusion-content/liquid-ug-chart-rte
998734-Added the User guide content for Liquid Glass Effect support in .NET MAUI Charts and RichTextEditor
2 parents 40e2899 + 4df7d87 commit 9174f00

File tree

14 files changed

+509
-542
lines changed

14 files changed

+509
-542
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: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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. SfGlassEffectsView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package. To apply the glassy effect to the chart’s tooltips and trackballs, set the [EnableLiquidGlassEffect]() property of SfCartesianChart to `True`.
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+
Content = chart
72+
};
73+
74+
{% endhighlight %}
75+
76+
{% endtabs %}
77+
78+
### Key Properties
79+
80+
- [EffectType](): Chooses the visual style (Regular or Clear).
81+
- [CornerRadius](): Rounds the container edges for a polished look.
82+
- [EnableShadowEffect](): Adds a subtle drop shadow to enhance depth.
83+
- [EnableLiquidGlassEffect](): Enables the glass effect for the chart's tooltip and trackballs.
84+
85+
### Best Practices and Tips
86+
87+
- Host the chart inside an [SfGlassEffectsView]() to give the chart body a glass appearance.
88+
- Liquid glass effects are most visible over images or colorful backgrounds.
89+
- Use EffectType="Regular" for a blurrier look and EffectType="Clear" for a crisper, glassy look.
90+
- Tune CornerRadius and Padding to balance content density and visual polish.
91+
- 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: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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 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. SfGlassEffectsView is available in the [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) package. To apply the glassy effect to the chart’s tooltips, set the [EnableLiquidGlassEffect]() property of SfCircularChart to `True`.
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+
Content = chart
64+
};
65+
66+
{% endhighlight %}
67+
68+
{% endtabs %}
69+
70+
### Key Properties
71+
72+
- [EffectType](): Chooses the visual style (Regular or Clear).
73+
- [CornerRadius](): Rounds the container edges for a polished look.
74+
- [EnableShadowEffect](): Adds a subtle drop shadow to enhance depth.
75+
- [EnableLiquidGlassEffect](): Enables the glass effect for the chart's tooltip.
76+
77+
### Best Practices and Tips
78+
79+
- Host the chart inside an [SfGlassEffectsView]() to give the chart body a glass appearance.
80+
- Liquid glass effects are most visible over images or colorful backgrounds.
81+
- Use EffectType="Regular" for a blurrier look and EffectType="Clear" for a crisper, glassy look.
82+
- Tune CornerRadius and Padding to balance content density and visual polish.
83+
- 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)