Skip to content

Commit 1fec61d

Browse files
VijayakumarMariappanVijayakumarMariappan
authored
Merge pull request #3902 from syncfusion-content/liquid-ug-chart-rte
998734-Added the User guide content for Cupertino Theme support in .NET MAUI Charts and RichTextEditor
2 parents edd79a2 + 0c25208 commit 1fec61d

File tree

11 files changed

+658
-3
lines changed

11 files changed

+658
-3
lines changed

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
layout: post
3+
title: Cupertino Theme 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+
# Cupertino Theme in .NET MAUI Cartesian Chart
12+
13+
The Cupertino theme 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 Cupertino 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 Cupertino theme 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+
## Enable Cupertino Theme
22+
23+
To Enable Cupertino Theme effect by setting `True` to [EnableLiquidGlassEffect]() property of SfCartesianChart.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
30+
. . .
31+
</chart:SfCartesianChart>
32+
33+
{% endhighlight %}
34+
35+
{% highlight c# %}
36+
37+
SfCartesianChart chart = new SfCartesianChart();
38+
chart.EnableLiquidGlassEffect = true;
39+
. . .
40+
41+
this.Content = chart;
42+
43+
{% endhighlight %}
44+
45+
{% endtabs %}
46+
47+
### Tooltip
48+
49+
To Enable Cupertino Theme effect to the tooltip, set `True` to [EnableLiquidGlassEffect]() property of SfCartesianChart and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property of ChartSeries.
50+
51+
{% tabs %}
52+
53+
{% highlight xaml %}
54+
55+
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
56+
. . .
57+
<chart:ColumnSeries ItemsSource="{Binding Data}"
58+
XBindingPath="Category"
59+
YBindingPath="Value"
60+
EnableTooltip="True">
61+
</chart:ColumnSeries>
62+
</chart:SfCartesianChart>
63+
64+
{% endhighlight %}
65+
66+
{% highlight c# %}
67+
68+
SfCartesianChart chart = new SfCartesianChart();
69+
chart.EnableLiquidGlassEffect = true;
70+
. . .
71+
ColumnSeries series = new ColumnSeries()
72+
{
73+
ItemsSource = viewModel.Data,
74+
XBindingPath = "Category",
75+
YBindingPath = "Value",
76+
EnableTooltip = true
77+
};
78+
79+
chart.Series.Add(series);
80+
this.Content = chart;
81+
82+
{% endhighlight %}
83+
84+
{% endtabs %}
85+
86+
N> When using a custom tooltip template 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.
87+
88+
### Trackball
89+
90+
To Enable Cupertino Theme effect to the tooltip, set `True` to [EnableLiquidGlassEffect]() property of SfCartesianChart and [ShowTrackballLabel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_ShowTrackballLabel) property of ChartSeries
91+
92+
{% tabs %}
93+
94+
{% highlight xaml %}
95+
96+
<chart:SfCartesianChart EnableLiquidGlassEffect="True">
97+
. . .
98+
<chart:LineSeries ItemsSource="{Binding Data}"
99+
XBindingPath="Category"
100+
YBindingPath="Value"
101+
ShowTrackballLabel="True">
102+
</chart:LineSeries>
103+
</chart:SfCartesianChart>
104+
105+
{% endhighlight %}
106+
107+
{% highlight c# %}
108+
109+
SfCartesianChart chart = new SfCartesianChart();
110+
chart.EnableLiquidGlassEffect = true;
111+
. . .
112+
LineSeries series = new LineSeries()
113+
{
114+
ItemsSource = viewModel.Data,
115+
XBindingPath = "Category",
116+
YBindingPath = "Value",
117+
ShowTrackballLabel = true
118+
};
119+
120+
chart.Series.Add(series);
121+
this.Content = chart;
122+
123+
{% endhighlight %}
124+
125+
{% endtabs %}
126+
127+
N> When using a custom tooltip template using [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.
128+

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
layout: post
3+
title: Cupertino Theme 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+
# Cupertino Theme in .NET MAUI Circular Chart
12+
13+
The Cupertino theme 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 Cupertino 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 Cupertino theme 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+
## Enable Cupertino Theme
22+
23+
To Enable Cupertino Theme effect by setting `True` to [EnableLiquidGlassEffect]() property of SfCircularChart.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<chart:SfCircularChart EnableLiquidGlassEffect="True">
30+
. . .
31+
</chart:SfCircularChart>
32+
33+
{% endhighlight %}
34+
35+
{% highlight c# %}
36+
37+
SfCircularChart chart = new SfCircularChart();
38+
chart.EnableLiquidGlassEffect = true;
39+
. . .
40+
41+
this.Content = chart;
42+
43+
{% endhighlight %}
44+
45+
{% endtabs %}
46+
47+
### Tooltip
48+
49+
To Enable Cupertino Theme effect to the tooltip, set `True` to [EnableLiquidGlassEffect]() property of SfCircularChart and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property of ChartSeries.
50+
51+
{% tabs %}
52+
53+
{% highlight xaml %}
54+
55+
<chart:SfCircularChart EnableLiquidGlassEffect="True">
56+
. . .
57+
<chart:PieSeries ItemsSource="{Binding Data}"
58+
XBindingPath="Category"
59+
YBindingPath="Value"
60+
EnableTooltip="True">
61+
</chart:PieSeries>
62+
</chart:SfCircularChart>
63+
64+
{% endhighlight %}
65+
66+
{% highlight c# %}
67+
68+
SfCircularChart chart = new SfCircularChart();
69+
chart.EnableLiquidGlassEffect = true;
70+
. . .
71+
PieSeries series = new PieSeries()
72+
{
73+
ItemsSource = viewModel.Data,
74+
XBindingPath = "Category",
75+
YBindingPath = "Value",
76+
EnableTooltip = true
77+
};
78+
79+
chart.Series.Add(series);
80+
this.Content = chart;
81+
82+
{% endhighlight %}
83+
84+
{% endtabs %}
85+
86+
N> When using a custom tooltip template 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/Cupertino-Theme.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
layout: post
3+
title: Cupertino Theme in .NET MAUI Funnel Chart control | Syncfusion
4+
description: Learn how to enable and customize the Liquid Glass visual effect in Syncfusion® .NET MAUI Chart (SfFunnelChart) for stunning UI..
5+
platform: maui
6+
control: SfFunnelChart
7+
documentation: ug
8+
keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart, cupertino funnel tooltip maui, .net maui chart visualization.
9+
---
10+
11+
# Cupertino Theme in .NET MAUI Funnel Chart
12+
13+
The Cupertino theme 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 Cupertino 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 Cupertino theme 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+
## Enable Cupertino Theme
22+
23+
To Enable Cupertino Theme effect by setting `True` to [EnableLiquidGlassEffect]() property of SfFunnelChart.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<chart:SfFunnelChart EnableLiquidGlassEffect="True">
30+
. . .
31+
</chart:SfFunnelChart>
32+
33+
{% endhighlight %}
34+
35+
{% highlight c# %}
36+
37+
SfFunnelChart chart = new SfFunnelChart();
38+
chart.EnableLiquidGlassEffect = true;
39+
. . .
40+
41+
this.Content = chart;
42+
43+
{% endhighlight %}
44+
45+
{% endtabs %}
46+
47+
### Tooltip
48+
49+
To Enable Cupertino Theme effect to the tooltip, set `True` to [EnableLiquidGlassEffect]() property and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfFunnelChart.html#Syncfusion_Maui_Charts_SfFunnelChart_EnableTooltip) property of SfFunnelChart.
50+
51+
{% tabs %}
52+
53+
{% highlight xaml %}
54+
55+
<chart:SfFunnelChart EnableLiquidGlassEffect="True"
56+
EnableTooltip="True">
57+
. . .
58+
59+
</chart:SfFunnelChart>
60+
61+
{% endhighlight %}
62+
63+
{% highlight c# %}
64+
65+
SfFunnelChart chart = new SfFunnelChart();
66+
chart.EnableLiquidGlassEffect = true;
67+
chart.EnableTooltip = true;
68+
. . .
69+
70+
this.Content = chart;
71+
72+
{% endhighlight %}
73+
74+
{% endtabs %}
75+
76+
N> When using a custom tooltip template 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/Funnel-Charts/Orientation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ documentation: ug
88

99
# Orientation in .NET MAUI Funnel Chart
1010

11-
The rendering direction of the funnel chart can be changed using the [Orientation]() property. The default value of this property is Vertical, which arranges segments from top to bottom, and it can be set to Horizontal to render segments from left to right.
11+
The rendering direction of the funnel chart can be changed using the [Orientation]() property. The default value of this property is Vertical, which arranges segments from bottom to top, and it can be set to Horizontal to render segments from right to left.
1212

1313
{% tabs %}
1414

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
layout: post
3+
title: Cupertino Theme in .NET MAUI Polar Chart control | Syncfusion
4+
description: Learn how to enable and customize the Liquid Glass visual effect in Syncfusion® .NET MAUI Chart (SfPolarChart) for stunning UI..
5+
platform: maui
6+
control: SfPolarChart
7+
documentation: ug
8+
keywords: .net maui chart, cupertino theme, glass effect, maui cupertino chart, cupertino polar tooltip maui, .net maui chart visualization.
9+
---
10+
11+
# Cupertino Theme in .NET MAUI Polar Chart
12+
13+
The Cupertino theme 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 Cupertino 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 Cupertino theme 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+
## Enable Cupertino Theme
22+
23+
To Enable Cupertino Theme effect by setting `True` to [EnableLiquidGlassEffect]() property of SfPolarChart.
24+
25+
{% tabs %}
26+
27+
{% highlight xaml %}
28+
29+
<chart:SfPolarChart EnableLiquidGlassEffect="True">
30+
. . .
31+
</chart:SfPolarChart>
32+
33+
{% endhighlight %}
34+
35+
{% highlight c# %}
36+
37+
SfPolarChart chart = new SfPolarChart();
38+
chart.EnableLiquidGlassEffect = true;
39+
. . .
40+
41+
this.Content = chart;
42+
43+
{% endhighlight %}
44+
45+
{% endtabs %}
46+
47+
### Tooltip
48+
49+
To Enable Cupertino Theme effect to the tooltip, set `True` to [EnableLiquidGlassEffect]() property of SfPolarChart and [EnableTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_EnableTooltip) property of ChartSeries.
50+
51+
{% tabs %}
52+
53+
{% highlight xaml %}
54+
55+
<chart:SfPolarChart EnableLiquidGlassEffect="True">
56+
. . .
57+
<chart:PolarLineSeries ItemsSource="{Binding Data}"
58+
XBindingPath="Category"
59+
YBindingPath="Value"
60+
EnableTooltip="True">
61+
</chart:PolarLineSeries>
62+
</chart:SfPolarChart>
63+
64+
{% endhighlight %}
65+
66+
{% highlight c# %}
67+
68+
SfPolarChart chart = new SfPolarChart();
69+
chart.EnableLiquidGlassEffect = true;
70+
. . .
71+
PolarLineSeries series = new PolarLineSeries()
72+
{
73+
ItemsSource = viewModel.Data,
74+
XBindingPath = "Category",
75+
YBindingPath = "Value",
76+
EnableTooltip = true
77+
};
78+
79+
chart.Series.Add(series);
80+
this.Content = chart;
81+
82+
{% endhighlight %}
83+
84+
{% endtabs %}
85+
86+
N> When using a custom tooltip template 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)