Skip to content

Commit 5ca0a3a

Browse files
Merge pull request #1 from SyncfusionExamples/Chart_Sample
Task-889920 Added the theme sample for .NET MAUI Charts
2 parents a6b3f4f + 59e973c commit 5ca0a3a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1839
-2
lines changed
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.9.34728.123
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ChartControlsThemeDemo", "ChartControlsThemeDemo\ChartControlsThemeDemo.csproj", "{E1F4CA58-BD7F-43BC-AF08-85E08874E554}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{E1F4CA58-BD7F-43BC-AF08-85E08874E554}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{E1F4CA58-BD7F-43BC-AF08-85E08874E554}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{E1F4CA58-BD7F-43BC-AF08-85E08874E554}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{E1F4CA58-BD7F-43BC-AF08-85E08874E554}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{E1F4CA58-BD7F-43BC-AF08-85E08874E554}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{E1F4CA58-BD7F-43BC-AF08-85E08874E554}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {A283A021-DDF3-4CA4-8924-587D376F02DB}
26+
EndGlobalSection
27+
EndGlobal
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:ChartControlsThemeDemo"
5+
xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
6+
x:Class="ChartControlsThemeDemo.App">
7+
8+
<Application.Resources>
9+
<ResourceDictionary>
10+
<ResourceDictionary.MergedDictionaries>
11+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
12+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
13+
14+
<syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/>
15+
16+
<!--<ResourceDictionary>
17+
18+
--><!--Cartesian Chart--><!--
19+
<Color x:Key="SfCartesianChartMajorGridLineStroke">Lime</Color>
20+
<Color x:Key="SfCartesianChartTooltipBackground">Pink</Color>
21+
22+
--><!--Circular Chart--><!--
23+
<Color x:Key="SfCircularChartTooltipBackground">Violet</Color>
24+
<Color x:Key="SfCircularChartTooltipTextColor">Brown </Color>
25+
26+
--><!--Funnel Chart--><!--
27+
<Color x:Key="SfFunnelChartTooltipBackground">Brown </Color>
28+
<Color x:Key="SfFunnelChartTooltipTextColor">Pink</Color>
29+
30+
--><!--Pyramid Chart--><!--
31+
<Color x:Key="SfPyramidChartTooltipBackground">Yellow</Color>
32+
<Color x:Key="SfPyramidChartTooltipTextColor">Blue</Color>
33+
34+
--><!--Sunburst Chart--><!--
35+
<Color x:Key="SfSunburstChartTooltipBackground">Purple</Color>
36+
<Color x:Key="SfSunburstChartTooltipTextColor">Orange</Color>
37+
38+
</ResourceDictionary>-->
39+
40+
</ResourceDictionary.MergedDictionaries>
41+
</ResourceDictionary>
42+
</Application.Resources>
43+
</Application>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
namespace ChartControlsThemeDemo
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
MainPage = new AppShell();
9+
}
10+
}
11+
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="ChartControlsThemeDemo.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:ChartControlsThemeDemo"
7+
Shell.FlyoutWidth="200"
8+
Shell.FlyoutBackground="#8f80d4"
9+
xmlns:switch="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
10+
Shell.FlyoutBehavior="Locked"
11+
Title="ChartControlsThemeDemo">
12+
13+
<Shell.FlyoutHeader>
14+
<Grid Padding="0,0,0,50" RowDefinitions="40,80" HorizontalOptions="Center">
15+
<Label Grid.Row="0" Text="Chart Types" VerticalOptions="End" HorizontalOptions="Center"
16+
FontSize="20" Margin="0,0,5,0" TextColor="White" FontAttributes="Bold"/>
17+
<Image Grid.Row="1" Source="chart.png" VerticalOptions="Center" HeightRequest="80"
18+
Margin="0,10,20,0" BackgroundColor="#8f80d4" HorizontalOptions="Center"/>
19+
</Grid>
20+
</Shell.FlyoutHeader>
21+
22+
<Shell.ItemTemplate>
23+
<DataTemplate>
24+
<Grid>
25+
<Label TextColor="White" FontSize="17" Margin="5,10,5,10"
26+
Text="{Binding Title}" VerticalTextAlignment="Center" />
27+
</Grid>
28+
</DataTemplate>
29+
</Shell.ItemTemplate>
30+
31+
<Shell.FlyoutFooter>
32+
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
33+
<Label Text="Change Theme" VerticalOptions="Center" FontSize="18"
34+
FontAttributes="Bold" TextColor="White"/>
35+
<switch:SfSwitch x:Name="switch" Margin="10,0,0,0" IsOn="False" StateChanged="switch_StateChanged"/>
36+
</StackLayout>
37+
</Shell.FlyoutFooter>
38+
39+
<ShellContent Title="Cartesian Chart" Route="page1" Shell.NavBarIsVisible="False"
40+
41+
ContentTemplate="{DataTemplate local:CartesianChartDemo}" />
42+
<ShellContent Title="Circular Chart" Route="page2" Shell.NavBarIsVisible="False"
43+
ContentTemplate="{DataTemplate local:CircularChartDemo}" />
44+
<ShellContent Title="Funnel Chart" Route="page3" Shell.NavBarIsVisible="False"
45+
ContentTemplate="{DataTemplate local:FunnelChartDemo}" />
46+
<ShellContent Title="Pyramid Chart" Route="page4" Shell.NavBarIsVisible="False"
47+
ContentTemplate="{DataTemplate local:PyramidChartDemo}" />
48+
<ShellContent Title="Sunburst Chart" Route="page5" Shell.NavBarIsVisible="False"
49+
ContentTemplate="{DataTemplate local:SunburstChartDemo}" />
50+
</Shell>
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
using Syncfusion.Maui.Themes;
2+
namespace ChartControlsThemeDemo
3+
{
4+
public partial class AppShell : Shell
5+
{
6+
public AppShell()
7+
{
8+
InitializeComponent();
9+
10+
Routing.RegisterRoute("page1", typeof(CartesianChartDemo));
11+
Routing.RegisterRoute("page2", typeof(CircularChartDemo));
12+
Routing.RegisterRoute("page3", typeof(FunnelChartDemo));
13+
Routing.RegisterRoute("page4", typeof(PyramidChartDemo));
14+
Routing.RegisterRoute("page5", typeof(SunburstChartDemo));
15+
}
16+
17+
private void switch_StateChanged(object sender, Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs e)
18+
{
19+
var state = e.NewValue;
20+
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
21+
if (mergedDictionaries != null)
22+
{
23+
var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
24+
if (theme != null)
25+
{
26+
if (state == false)
27+
{
28+
theme.VisualTheme = SfVisuals.MaterialLight;
29+
Application.Current.UserAppTheme = AppTheme.Light;
30+
}
31+
else
32+
{
33+
theme.VisualTheme = SfVisuals.MaterialDark;
34+
Application.Current.UserAppTheme = AppTheme.Dark;
35+
}
36+
}
37+
}
38+
}
39+
}
40+
}
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
3+
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
4+
xmlns:local="clr-namespace:ChartControlsThemeDemo"
5+
x:Class="ChartControlsThemeDemo.CartesianChartDemo">
6+
7+
<ContentPage.BindingContext>
8+
<local:ChartViewModel/>
9+
</ContentPage.BindingContext>
10+
11+
<chart:SfCartesianChart Margin="0,20,0,0">
12+
13+
<chart:SfCartesianChart.Legend>
14+
<chart:ChartLegend>
15+
<chart:ChartLegend.LabelStyle>
16+
<chart:ChartLegendLabelStyle TextColor="{AppThemeBinding Light=Black,Dark=White}"/>
17+
</chart:ChartLegend.LabelStyle>
18+
</chart:ChartLegend>
19+
</chart:SfCartesianChart.Legend>
20+
21+
<chart:SfCartesianChart.Title>
22+
<Label Text="Inflation - Consumer Prices" Margin="0" HorizontalOptions="Fill" HorizontalTextAlignment="Center" VerticalOptions="Center" FontSize="16" />
23+
</chart:SfCartesianChart.Title>
24+
25+
<chart:SfCartesianChart.XAxes>
26+
<chart:CategoryAxis ShowMajorGridLines="false" Interval="2" PlotOffsetStart="10" PlotOffsetEnd="10" AxisLineOffset="10">
27+
<chart:CategoryAxis.MajorTickStyle>
28+
<chart:ChartAxisTickStyle TickSize="10">
29+
</chart:ChartAxisTickStyle>
30+
</chart:CategoryAxis.MajorTickStyle>
31+
</chart:CategoryAxis>
32+
33+
</chart:SfCartesianChart.XAxes>
34+
<chart:SfCartesianChart.YAxes>
35+
<chart:NumericalAxis Maximum="100" Minimum="0" Interval="20">
36+
<chart:NumericalAxis.LabelStyle>
37+
<chart:ChartAxisLabelStyle LabelFormat="0'%"/>
38+
</chart:NumericalAxis.LabelStyle>
39+
<chart:NumericalAxis.AxisLineStyle>
40+
<chart:ChartLineStyle StrokeWidth="0">
41+
</chart:ChartLineStyle>
42+
</chart:NumericalAxis.AxisLineStyle>
43+
<chart:NumericalAxis.MajorTickStyle>
44+
<chart:ChartAxisTickStyle TickSize="0" />
45+
</chart:NumericalAxis.MajorTickStyle>
46+
</chart:NumericalAxis>
47+
</chart:SfCartesianChart.YAxes>
48+
49+
<chart:LineSeries ItemsSource="{Binding LineData1}" XBindingPath="XValue" YBindingPath="YValue"
50+
Label="Germany" EnableTooltip="True" Fill="#314A6E"
51+
ShowMarkers="True" LegendIcon="SeriesType">
52+
</chart:LineSeries>
53+
54+
<chart:LineSeries ItemsSource="{Binding LineData2}" XBindingPath="XValue" YBindingPath="YValue"
55+
Label="England" EnableTooltip="True" Fill="#48988B"
56+
ShowMarkers="True" LegendIcon="SeriesType">
57+
</chart:LineSeries>
58+
59+
</chart:SfCartesianChart>
60+
61+
</ContentPage>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace ChartControlsThemeDemo
8+
{
9+
public partial class CartesianChartDemo : ContentPage
10+
{
11+
public CartesianChartDemo ()
12+
{
13+
InitializeComponent ();
14+
}
15+
}
16+
}
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:sys="clr-namespace:System;assembly=mscorlib"
5+
x:Class="ChartControlsThemeDemo.SfCartesianChartThemeKeys">
6+
7+
<x:String x:Key="SfCartesianChartTheme">CommonTheme</x:String>
8+
9+
<Color x:Key="SfCartesianChartBackground"/>
10+
11+
<!--Grid Line, Axis Line, Tick Line-->
12+
<Color x:Key="SfCartesianChartMajorGridLineStroke"/>
13+
<Color x:Key="SfCartesianChartMinorGridLineStroke"/>
14+
<Color x:Key="SfCartesianChartMajorTickLineStroke"/>
15+
<Color x:Key="SfCartesianChartMinorTickLineStroke"/>
16+
<Color x:Key="SfCartesianChartAxisLineStroke"/>
17+
18+
<!--Axis Title-->
19+
<Color x:Key="SfCartesianChartAxisTitleTextColor"/>
20+
<Color x:Key="SfCartesianChartAxisTitleBackground"/>
21+
<Color x:Key="SfCartesianChartAxisTitleStroke"/>
22+
<sys:Double x:Key="SfCartesianChartAxisTitleCornerRadius"/>
23+
<sys:Double x:Key="SfCartesianChartAxisTitleTextFontSize"/>
24+
25+
<!--Axis Label-->
26+
<Color x:Key="SfCartesianChartAxisLabelTextColor"/>
27+
<Color x:Key="SfCartesianChartAxisLabelBackground"/>
28+
<Color x:Key="SfCartesianChartAxisLabelStroke"/>
29+
<sys:Double x:Key="SfCartesianChartAxisLabelCornerRadius"/>
30+
<sys:Double x:Key="SfCartesianChartAxisLabelTextFontSize"/>
31+
32+
<!--Trackball-->
33+
<Color x:Key="SfCartesianChartTrackballLineStroke"/>
34+
<Color x:Key="SfCartesianChartTrackballLabelBackground"/>
35+
<Color x:Key="SfCartesianChartTrackballLabelStroke"/>
36+
<Color x:Key="SfCartesianChartTrackballLabelTextColor"/>
37+
<sys:Double x:Key="SfCartesianChartTrackballLabelCornerRadius"/>
38+
<sys:Double x:Key="SfCartesianChartTrackballLabelTextFontSize"/>
39+
40+
<!--Axis Trackball-->
41+
<Color x:Key="SfCartesianChartTrackballAxisLabelBackground"/>
42+
<Color x:Key="SfCartesianChartTrackballAxisLabelStroke"/>
43+
<Color x:Key="SfCartesianChartTrackballAxisLabelTextColor"/>
44+
<sys:Double x:Key="SfCartesianChartTrackballAxisLabelCornerRadius"/>
45+
<sys:Double x:Key="SfCartesianChartTrackballAxisLabelTextFontSize"/>
46+
47+
<!--Annotation-->
48+
<Color x:Key="SfCartesianChartShapeAnnotationFill"/>
49+
<Color x:Key="SfCartesianChartShapeAnnotationStroke"/>
50+
<Color x:Key="SfCartesianChartAnnotationTextColor"/>
51+
<Color x:Key="SfCartesianChartAnnotationTextBackground"/>
52+
<Color x:Key="SfCartesianChartLineAnnotationStroke"/>
53+
54+
<!--Tooltip-->
55+
<Color x:Key="SfCartesianChartTooltipBackground"/>
56+
<Color x:Key="SfCartesianChartTooltipTextColor"/>
57+
<sys:Double x:Key="SfCartesianChartTooltipTextFontSize"/>
58+
59+
<!--Legend-->
60+
<Color x:Key="SfCartesianChartLegendTextColor"/>
61+
<sys:Double x:Key="SfCartesianChartLegendFontSize"/>
62+
<Color x:Key="SfCartesianChartLegendDisableBrush"/>
63+
64+
</ResourceDictionary>
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
namespace ChartControlsThemeDemo;
2+
3+
public partial class SfCartesianChartThemeKeys : ResourceDictionary
4+
{
5+
public SfCartesianChartThemeKeys()
6+
{
7+
InitializeComponent();
8+
}
9+
}

0 commit comments

Comments
 (0)