Skip to content

Commit 9c5ef0b

Browse files
Addressed the review suggestions in the UG documentation of liquid theme support in charts
1 parent 954dc0d commit 9c5ef0b

File tree

7 files changed

+69
-98
lines changed

7 files changed

+69
-98
lines changed

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

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,41 @@ keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart,
1212

1313
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.
1414

15-
N> The liquid glass effect is only available on macOS and iOS platforms with version 26 or higher.
15+
N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macOS` versions 26 or later
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

1919
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.
2020

2121
## Apply Liquid Glass Effect to SfCartesianChart
2222

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`.
23+
Wrap the SfCartesianChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfCartesianChart to `True`.
2424

2525
{% tabs %}
2626

2727
{% highlight xaml %}
2828

29-
<core:SfGlassEffectsView CornerRadius="20"
30-
Padding="12"
31-
EffectType="Regular"
32-
EnableShadowEffect="True">
29+
<core:SfGlassEffectView CornerRadius="20"
30+
Padding="12"
31+
EffectType="Regular"
32+
EnableShadowEffect="True">
3333

3434
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
35+
3536
<chart:SfCartesianChart.XAxes>
3637
<chart:CategoryAxis />
3738
</chart:SfCartesianChart.XAxes>
3839
<chart:SfCartesianChart.YAxes>
3940
<chart:NumericalAxis />
4041
</chart:SfCartesianChart.YAxes>
4142

42-
<!-- Add your series here -->
4343
<chart:ColumnSeries
4444
ItemsSource="{Binding Data}"
4545
XBindingPath="Category"
4646
YBindingPath="Value" />
47+
4748
</chart:SfCartesianChart>
48-
</core:SfGlassEffectsView>
49+
</core:SfGlassEffectView>
4950

5051
{% endhighlight %}
5152

@@ -62,7 +63,7 @@ chart.Series.Add(new ColumnSeries
6263
YBindingPath = "Value"
6364
});
6465

65-
var glass = new SfGlassEffectsView
66+
var glass = new SfGlassEffectView
6667
{
6768
CornerRadius = 20,
6869
Padding = 12,
@@ -75,17 +76,12 @@ var glass = new SfGlassEffectsView
7576

7677
{% endtabs %}
7778

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.
79+
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
8480

8581
### Best Practices and Tips
8682

87-
- Host the chart inside an [SfGlassEffectsView]() to give the chart body a glass appearance.
83+
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.
8884
- 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.
85+
- Set [EffectType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html#Syncfusion_Maui_Core_SfGlassEffectView_EffectType) property of SfGlassEffectView as `Regular` for a blurrier look and `Clear` for a crisper, glassy look.
9086
- Tune CornerRadius and Padding to balance content density and visual polish.
9187
- 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/Liquid-Glass-Effect.md

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,24 @@ keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart,
1212

1313
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.
1414

15-
N> The liquid glass effect is only available on macOS and iOS platforms with version 26 or higher.
15+
N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macOS` versions 26 or later
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

1919
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.
2020

2121
## Apply Liquid Glass Effect to SfCircularChart
2222

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`.
23+
Wrap the SfCircularChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfCircularChart to `True`.
2424

2525
{% tabs %}
2626

2727
{% highlight xaml %}
2828

29-
<core:SfGlassEffectsView CornerRadius="20"
30-
Padding="12"
31-
EffectType="Regular"
32-
EnableShadowEffect="True">
29+
<core:SfGlassEffectView CornerRadius="20"
30+
Padding="12"
31+
EffectType="Regular"
32+
EnableShadowEffect="True">
3333

3434
<chart:SfCircularChart EnableLiquidGlassEffect="True">
3535

@@ -39,7 +39,7 @@ Wrap the SfCircularChart inside an [SfGlassEffectsView]() to give the chart surf
3939
XBindingPath="Category"
4040
YBindingPath="Value" />
4141
</chart:SfCircularChart>
42-
</core:SfGlassEffectsView>
42+
</core:SfGlassEffectView>
4343

4444
{% endhighlight %}
4545

@@ -54,7 +54,7 @@ chart.Series.Add(new PieSeries
5454
YBindingPath = "Value"
5555
});
5656

57-
var glass = new SfGlassEffectsView
57+
var glass = new SfGlassEffectView
5858
{
5959
CornerRadius = 20,
6060
Padding = 12,
@@ -67,17 +67,12 @@ var glass = new SfGlassEffectsView
6767

6868
{% endtabs %}
6969

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.
70+
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
7671

7772
### Best Practices and Tips
7873

79-
- Host the chart inside an [SfGlassEffectsView]() to give the chart body a glass appearance.
74+
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.
8075
- 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.
76+
- Set [EffectType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html#Syncfusion_Maui_Core_SfGlassEffectView_EffectType) property of SfGlassEffectView as `Regular` for a blurrier look and `Clear` for a crisper, glassy look.
8277
- Tune CornerRadius and Padding to balance content density and visual polish.
8378
- 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.

MAUI/Funnel-Charts/Liquid-Glass-Effect.md

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,30 @@ keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart,
1212

1313
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.
1414

15-
N> The liquid glass effect is only available on macOS and iOS platforms with version 26 or higher.
15+
N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macOS` versions 26 or later
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

1919
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.
2020

2121
## Apply Liquid Glass Effect to SfFunnelChart
2222

23-
Wrap the SfFunnelChart 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 SfFunnelChart to `True`.
23+
Wrap the SfFunnelChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfFunnelChart to `True`.
2424

2525
{% tabs %}
2626

2727
{% highlight xaml %}
2828

29-
<core:SfGlassEffectsView CornerRadius="20"
30-
Padding="12"
31-
EffectType="Regular"
32-
EnableShadowEffect="True">
29+
<core:SfGlassEffectView CornerRadius="20"
30+
Padding="12"
31+
EffectType="Regular"
32+
EnableShadowEffect="True">
3333

3434
<chart:SfFunnelChart EnableLiquidGlassEffect="True">
3535
. . .
3636

3737
</chart:SfFunnelChart>
38-
</core:SfGlassEffectsView>
38+
</core:SfGlassEffectView>
3939

4040
{% endhighlight %}
4141

@@ -44,7 +44,7 @@ Wrap the SfFunnelChart inside an [SfGlassEffectsView]() to give the chart surfac
4444
SfFunnelChart chart = new SfFunnelChart();
4545
chart.EnableLiquidGlassEffect = true;
4646

47-
var glass = new SfGlassEffectsView
47+
var glass = new SfGlassEffectView
4848
{
4949
CornerRadius = 20,
5050
Padding = 12,
@@ -57,17 +57,12 @@ var glass = new SfGlassEffectsView
5757

5858
{% endtabs %}
5959

60-
### Key Properties
61-
62-
- [EffectType](): Chooses the visual style (Regular or Clear).
63-
- [CornerRadius](): Rounds the container edges for a polished look.
64-
- [EnableShadowEffect](): Adds a subtle drop shadow to enhance depth.
65-
- [EnableLiquidGlassEffect](): Enables the glass effect for the chart's tooltip.
60+
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
6661

6762
### Best Practices and Tips
6863

69-
- Host the chart inside an [SfGlassEffectsView]() to give the chart body a glass appearance.
64+
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.
7065
- Liquid glass effects are most visible over images or colorful backgrounds.
71-
- Use EffectType="Regular" for a blurrier look and EffectType="Clear" for a crisper, glassy look.
66+
- Set [EffectType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html#Syncfusion_Maui_Core_SfGlassEffectView_EffectType) property of SfGlassEffectView as `Regular` for a blurrier look and `Clear` for a crisper, glassy look.
7267
- Tune CornerRadius and Padding to balance content density and visual polish.
7368
- When using a custom template for tooltip using [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html#Syncfusion_Maui_Charts_SfFunnelChart_TooltipTemplate), set the background to `Transparent` to display the liquid glass effect.

MAUI/Polar-Charts/Liquid-Glass-Effect.md

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,24 @@ keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart,
1212

1313
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.
1414

15-
N> The liquid glass effect is only available on macOS and iOS platforms with version 26 or higher.
15+
N> The liquid glass effect is supported only on `.NET 10` and on `iOS` and `macOS` versions 26 or later
1616

1717
## How it Enhances Chart UI on macOS and iOS
1818

1919
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.
2020

2121
## Apply Liquid Glass Effect to SfPolarChart
2222

23-
Wrap the SfPolarChart 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 SfPolarChart to `True`.
23+
Wrap the SfPolarChart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_EnableLiquidGlassEffect) property of SfPolarChart to `True`.
2424

2525
{% tabs %}
2626

2727
{% highlight xaml %}
2828

29-
<core:SfGlassEffectsView CornerRadius="20"
30-
Padding="12"
31-
EffectType="Regular"
32-
EnableShadowEffect="True">
29+
<core:SfGlassEffectView CornerRadius="20"
30+
Padding="12"
31+
EffectType="Regular"
32+
EnableShadowEffect="True">
3333

3434
<chart:SfPolarChart EnableLiquidGlassEffect="True">
3535
<chart:SfPolarChart.PrimaryAxis>
@@ -45,7 +45,7 @@ Wrap the SfPolarChart inside an [SfGlassEffectsView]() to give the chart surface
4545
XBindingPath="Category"
4646
YBindingPath="Value" />
4747
</chart:SfPolarChart>
48-
</core:SfGlassEffectsView>
48+
</core:SfGlassEffectView>
4949

5050
{% endhighlight %}
5151

@@ -67,7 +67,7 @@ chart.Series.Add(new PolarLineSeries
6767
YBindingPath = "Value"
6868
});
6969

70-
var glass = new SfGlassEffectsView
70+
var glass = new SfGlassEffectView
7171
{
7272
CornerRadius = 20,
7373
Padding = 12,
@@ -80,17 +80,12 @@ var glass = new SfGlassEffectsView
8080

8181
{% endtabs %}
8282

83-
### Key Properties
84-
85-
- [EffectType](): Chooses the visual style (Regular or Clear).
86-
- [CornerRadius](): Rounds the container edges for a polished look.
87-
- [EnableShadowEffect](): Adds a subtle drop shadow to enhance depth.
88-
- [EnableLiquidGlassEffect](): Enables the glass effect for the chart's tooltip.
83+
For detailed guidance on SfGlassEffectView, refer to the Getting Started [documentation](https://help.syncfusion.com/maui/liquid-glass-ui/getting-started).
8984

9085
### Best Practices and Tips
9186

92-
- Host the chart inside an [SfGlassEffectsView]() to give the chart body a glass appearance.
87+
- Host the chart inside an [SfGlassEffectView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html) to give the chart body a glass appearance.
9388
- Liquid glass effects are most visible over images or colorful backgrounds.
94-
- Use EffectType="Regular" for a blurrier look and EffectType="Clear" for a crisper, glassy look.
89+
- Set [EffectType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfGlassEffectView.html#Syncfusion_Maui_Core_SfGlassEffectView_EffectType) property of SfGlassEffectView as `Regular` for a blurrier look and `Clear` for a crisper, glassy look.
9590
- Tune CornerRadius and Padding to balance content density and visual polish.
9691
- 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)