Merge pull request #1 from SyncfusionExamples/Chart_Sample

Task-889920 Added the theme sample for .NET MAUI Charts
SyncfusionExamples · Sep 20, 2024 · 5ca0a3a · 5ca0a3a
2 parents a6b3f4f + 59e973c
commit 5ca0a3a
Show file tree

Hide file tree

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