Skip to content

Commit 3b94a3b

Browse files
saiyathalifathimabee.m@syncfusion.comsaiyathalifathimabee.m@syncfusion.com
saiyathalifathimabee.m@syncfusion.com
authored and
saiyathalifathimabee.m@syncfusion.com
committed
Updated the theme in sample
1 parent 1e4c669 commit 3b94a3b

16 files changed

Lines changed: 149 additions & 81 deletions

‎ChartControlsThemeDemo/ChartControlsThemeDemo/App.xaml‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,41 @@
11
<?xml version = "1.0" encoding = "UTF-8" ?>
22
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4-
xmlns:local="clr-namespace:ChartControlsThemeDemo"
4+
xmlns:local="clr-namespace:ChartControlsThemeDemo"
5+
xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
56
x:Class="ChartControlsThemeDemo.App">
67
<Application.Resources>
78
<ResourceDictionary>
89
<ResourceDictionary.MergedDictionaries>
910
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
1011
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
12+
13+
<syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/>
14+
15+
<!--<ResourceDictionary>
16+
17+
--><!--Cartesian Chart--><!--
18+
<Color x:Key="SfCartesianChartMajorGridLineStroke">Lime</Color>
19+
<Color x:Key="SfCartesianChartTooltipBackground">Pink</Color>
20+
21+
--><!--Circular Chart--><!--
22+
<Color x:Key="SfCircularChartTooltipBackground">Violet</Color>
23+
<Color x:Key="SfCircularChartTooltipTextColor">Brown </Color>
24+
25+
--><!--Funnel Chart--><!--
26+
<Color x:Key="SfFunnelChartTooltipBackground">Brown </Color>
27+
<Color x:Key="SfFunnelChartTooltipTextColor">Pink</Color>
28+
29+
--><!--Pyramid Chart--><!--
30+
<Color x:Key="SfPyramidChartTooltipBackground">Yellow</Color>
31+
<Color x:Key="SfPyramidChartTooltipTextColor">Blue</Color>
32+
33+
--><!--Sunburst Chart--><!--
34+
<Color x:Key="SfSunburstChartTooltipBackground">Purple</Color>
35+
<Color x:Key="SfSunburstChartTooltipTextColor">Orange</Color>
36+
37+
</ResourceDictionary>-->
38+
1139
</ResourceDictionary.MergedDictionaries>
1240
</ResourceDictionary>
1341
</Application.Resources>

‎ChartControlsThemeDemo/ChartControlsThemeDemo/App.xaml.cs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
namespace ChartControlsThemeDemo
1+
using Syncfusion.Maui.Themes;
2+
3+
namespace ChartControlsThemeDemo
24
{
35
public partial class App : Application
46
{
@@ -9,4 +11,4 @@ public App()
911
MainPage = new AppShell();
1012
}
1113
}
12-
}
14+
}

‎ChartControlsThemeDemo/ChartControlsThemeDemo/AppShell.xaml‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,26 @@
22
<Shell
33
x:Class="ChartControlsThemeDemo.AppShell"
44
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
66
xmlns:local="clr-namespace:ChartControlsThemeDemo"
7+
xmlns:switch="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
78
Shell.FlyoutBehavior="Flyout"
89
Title="ChartControlsThemeDemo">
910

10-
<ShellContent Title="Cartesian Chart" Route="page1"
11-
ContentTemplate="{DataTemplate local:CartesianChartDemo}" />
12-
<ShellContent Title="Circular Chart" Route="page2"
13-
ContentTemplate="{DataTemplate local:CircularChartDemo}" />
14-
<ShellContent Title="Funnel Chart" Route="page3"
15-
ContentTemplate="{DataTemplate local:FunnelChartDemo}" />
16-
<ShellContent Title="Pyramid Chart" Route="page4"
17-
ContentTemplate="{DataTemplate local:PyramidChartDemo}" />
18-
<ShellContent Title="Sunburst Chart" Route="page5"
19-
ContentTemplate="{DataTemplate local:SunburstChartDemo}" />
11+
<ShellContent Route="page1" Title="Cartesian Chart" ContentTemplate="{DataTemplate local:CartesianChartDemo}" />
12+
<ShellContent Route="page2" Title="Circular Chart" ContentTemplate="{DataTemplate local:CircularChartDemo}" />
13+
<ShellContent Route="page3" Title="Funnel Chart" ContentTemplate="{DataTemplate local:FunnelChartDemo}" />
14+
<ShellContent Route="page4" Title="Pyramid Chart" ContentTemplate="{DataTemplate local:PyramidChartDemo}" />
15+
<ShellContent Route="page5" Title="Sunburst Chart" ContentTemplate="{DataTemplate local:SunburstChartDemo}" />
2016

21-
</Shell>
17+
<Shell.FlyoutFooter>
18+
<Border StrokeShape="RoundRectangle 10" StrokeThickness="1.5" Margin="20" HorizontalOptions="Fill"
19+
Padding="20" Stroke="#2a1d45">
20+
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
21+
<Label Text="Change Theme" VerticalOptions="Center" FontSize="18" FontAttributes="Bold" TextColor="{AppThemeBinding Light=Black, Dark=White}"/>
22+
<switch:SfSwitch x:Name="switch" Margin="15,0,0,0" IsOn="False" StateChanged="switch_StateChanged"/>
23+
</StackLayout>
24+
</Border>
25+
</Shell.FlyoutFooter>
26+
27+
</Shell>

‎ChartControlsThemeDemo/ChartControlsThemeDemo/AppShell.xaml.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
using Microsoft.Maui.Controls;
2+
using Microsoft.Maui.Controls.Shapes;
3+
using Syncfusion.Maui.Themes;
24

35
namespace ChartControlsThemeDemo
46
{
@@ -14,5 +16,29 @@ public AppShell()
1416
Routing.RegisterRoute("page4", typeof(PyramidChartDemo));
1517
Routing.RegisterRoute("page5", typeof(SunburstChartDemo));
1618
}
19+
20+
private void switch_StateChanged(object sender, Syncfusion.Maui.Buttons.SwitchStateChangedEventArgs e)
21+
{
22+
var state = e.NewValue;
23+
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
24+
if (mergedDictionaries != null)
25+
{
26+
var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
27+
if (theme != null)
28+
{
29+
if (state == false)
30+
{
31+
theme.VisualTheme = SfVisuals.MaterialLight;
32+
Application.Current.UserAppTheme = AppTheme.Light;
33+
34+
}
35+
else
36+
{
37+
theme.VisualTheme = SfVisuals.MaterialDark;
38+
Application.Current.UserAppTheme = AppTheme.Dark;
39+
}
40+
}
41+
}
42+
}
1743
}
1844
}

‎ChartControlsThemeDemo/ChartControlsThemeDemo/CartesianChart/CartesianChartDemo.xaml‎

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4-
x:Class="ChartControlsThemeDemo.CartesianChartDemo"
4+
x:Class="ChartControlsThemeDemo.CartesianChartDemo"
55
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
66
xmlns:local="clr-namespace:ChartControlsThemeDemo">
77

@@ -10,59 +10,57 @@
1010
</ContentPage.BindingContext>
1111

1212
<chart:SfCartesianChart>
13-
13+
1414
<chart:SfCartesianChart.Legend>
15-
<chart:ChartLegend ToggleSeriesVisibility="True"/>
16-
</chart:SfCartesianChart.Legend>
17-
18-
<chart:SfCartesianChart.Title>
19-
<Label Text="Inflation - Consumer Prices" Margin="0" HorizontalOptions="Fill" HorizontalTextAlignment="Center" VerticalOptions="Center" FontSize="16" />
20-
</chart:SfCartesianChart.Title>
21-
22-
<chart:SfCartesianChart.XAxes>
23-
<chart:CategoryAxis ShowMajorGridLines="false" Interval="2" PlotOffsetStart="10" PlotOffsetEnd="10" AxisLineOffset="10">
24-
<chart:CategoryAxis.MajorTickStyle>
25-
<chart:ChartAxisTickStyle TickSize="10">
26-
</chart:ChartAxisTickStyle>
27-
</chart:CategoryAxis.MajorTickStyle>
28-
</chart:CategoryAxis>
29-
30-
</chart:SfCartesianChart.XAxes>
31-
<chart:SfCartesianChart.YAxes>
32-
<chart:NumericalAxis Maximum="100" Minimum="0" Interval="20">
33-
<chart:NumericalAxis.LabelStyle>
34-
<chart:ChartAxisLabelStyle LabelFormat="0'%"/>
35-
</chart:NumericalAxis.LabelStyle>
36-
<chart:NumericalAxis.AxisLineStyle>
37-
<chart:ChartLineStyle StrokeWidth="0">
38-
</chart:ChartLineStyle>
39-
</chart:NumericalAxis.AxisLineStyle>
40-
<chart:NumericalAxis.MajorTickStyle>
41-
<chart:ChartAxisTickStyle TickSize="0" />
42-
</chart:NumericalAxis.MajorTickStyle>
43-
</chart:NumericalAxis>
44-
</chart:SfCartesianChart.YAxes>
45-
46-
<chart:SfCartesianChart.Series>
47-
<chart:LineSeries ItemsSource="{Binding LineData1}" XBindingPath="Year" YBindingPath="Value"
15+
<chart:ChartLegend ToggleSeriesVisibility="True"/>
16+
</chart:SfCartesianChart.Legend>
17+
18+
<chart:SfCartesianChart.Title>
19+
<Label FontSize="17" Text="Inflation - Consumer Prices" HorizontalTextAlignment="Center"/>
20+
</chart:SfCartesianChart.Title>
21+
22+
<chart:SfCartesianChart.XAxes>
23+
<chart:CategoryAxis ShowMajorGridLines="false" Interval="2" PlotOffsetStart="10" PlotOffsetEnd="10" AxisLineOffset="10">
24+
<chart:CategoryAxis.MajorTickStyle>
25+
<chart:ChartAxisTickStyle TickSize="10">
26+
</chart:ChartAxisTickStyle>
27+
</chart:CategoryAxis.MajorTickStyle>
28+
</chart:CategoryAxis>
29+
30+
</chart:SfCartesianChart.XAxes>
31+
<chart:SfCartesianChart.YAxes>
32+
<chart:NumericalAxis Maximum="100" Minimum="0" Interval="20">
33+
<chart:NumericalAxis.LabelStyle>
34+
<chart:ChartAxisLabelStyle LabelFormat="0'%"/>
35+
</chart:NumericalAxis.LabelStyle>
36+
<chart:NumericalAxis.AxisLineStyle>
37+
<chart:ChartLineStyle StrokeWidth="0">
38+
</chart:ChartLineStyle>
39+
</chart:NumericalAxis.AxisLineStyle>
40+
<chart:NumericalAxis.MajorTickStyle>
41+
<chart:ChartAxisTickStyle TickSize="0" />
42+
</chart:NumericalAxis.MajorTickStyle>
43+
</chart:NumericalAxis>
44+
</chart:SfCartesianChart.YAxes>
45+
46+
<chart:SfCartesianChart.Series>
47+
<chart:LineSeries ItemsSource="{Binding LineData1}" XBindingPath="Year" YBindingPath="Value"
4848
Label="Germany" EnableTooltip="True" Fill="#314A6E"
4949
StrokeWidth="1" ShowMarkers="True" LegendIcon="SeriesType">
50-
<chart:LineSeries.MarkerSettings>
51-
<chart:ChartMarkerSettings Width="8" Height="8" Fill="White"
52-
Stroke="#314A6E" StrokeWidth="1"/>
53-
</chart:LineSeries.MarkerSettings>
54-
</chart:LineSeries>
50+
<chart:LineSeries.MarkerSettings>
51+
<chart:ChartMarkerSettings Width="8" Height="8" Fill="#314A6E"/>
52+
</chart:LineSeries.MarkerSettings>
53+
</chart:LineSeries>
5554

56-
<chart:LineSeries ItemsSource="{Binding LineData2}" XBindingPath="Year" YBindingPath="Value"
55+
<chart:LineSeries ItemsSource="{Binding LineData2}" XBindingPath="Year" YBindingPath="Value"
5756
Label="England" EnableTooltip="True" Fill="#48988B"
5857
StrokeWidth="1" ShowMarkers="True" LegendIcon="SeriesType">
59-
<chart:LineSeries.MarkerSettings>
60-
<chart:ChartMarkerSettings Width="8" Height="8" Fill="White"
61-
Stroke="#48988B" StrokeWidth="1"/>
62-
</chart:LineSeries.MarkerSettings>
63-
</chart:LineSeries>
64-
65-
</chart:SfCartesianChart.Series>
66-
</chart:SfCartesianChart>
67-
58+
<chart:LineSeries.MarkerSettings>
59+
<chart:ChartMarkerSettings Width="8" Height="8" Fill="#48988B"/>
60+
</chart:LineSeries.MarkerSettings>
61+
</chart:LineSeries>
62+
63+
</chart:SfCartesianChart.Series>
64+
</chart:SfCartesianChart>
65+
6866
</ContentPage>

‎ChartControlsThemeDemo/ChartControlsThemeDemo/CartesianChart/CartesianChartDemo.xaml.cs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
using Syncfusion.Maui.Themes;
2+
13
namespace ChartControlsThemeDemo;
24

35
public partial class CartesianChartDemo : ContentPage
46
{
57
public CartesianChartDemo()
68
{
79
InitializeComponent();
8-
}
10+
}
911
}

‎ChartControlsThemeDemo/ChartControlsThemeDemo/ChartControlsThemeDemo.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
6161
<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
6262
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
63+
<PackageReference Include="Syncfusion.Maui.Buttons" Version="*" />
6364
<PackageReference Include="Syncfusion.Maui.Charts" Version="26.1.39" />
6465
<PackageReference Include="Syncfusion.Maui.SunburstChart" Version="26.1.39" />
6566
</ItemGroup>

‎ChartControlsThemeDemo/ChartControlsThemeDemo/CircularChart/CircularChartDemo.xaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
44
x:Class="ChartControlsThemeDemo.CircularChartDemo"
5-
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
5+
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
66
xmlns:local="clr-namespace:ChartControlsThemeDemo">
77

88
<ContentPage.BindingContext>
@@ -12,8 +12,8 @@
1212
<chart:SfCircularChart>
1313

1414
<chart:SfCircularChart.Title>
15-
<Label Text="Sales by a Salesperson" Margin="0,0,6,10" HorizontalOptions="Fill"
16-
HorizontalTextAlignment="Center" VerticalOptions="Center" FontSize="16"/>
15+
<Label FontSize="17" Text="Sales by a Salesperson" HorizontalTextAlignment="Center"/>
16+
1717
</chart:SfCircularChart.Title>
1818

1919
<chart:SfCircularChart.Legend>

‎ChartControlsThemeDemo/ChartControlsThemeDemo/CircularChart/CircularChartDemo.xaml.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
using Syncfusion.Maui.Themes;
2+
13
namespace ChartControlsThemeDemo;
24

35
public partial class CircularChartDemo : ContentPage

‎ChartControlsThemeDemo/ChartControlsThemeDemo/FunnelChart/FunnelChartDemo.xaml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
44
x:Class="ChartControlsThemeDemo.FunnelChartDemo"
5-
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
5+
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
66
xmlns:local="clr-namespace:ChartControlsThemeDemo">
77

88
<ContentPage.BindingContext>
99
<local:FunnelViewModel/>
1010
</ContentPage.BindingContext>
1111

12-
<chart:SfFunnelChart ItemsSource="{Binding FunnelData}" XBindingPath="XValue" YBindingPath="YValue"
13-
ShowDataLabels="True" PaletteBrushes="{Binding PaletteBrushes}"
14-
StrokeWidth="2" Stroke="White" EnableTooltip="True">
12+
<chart:SfFunnelChart ItemsSource="{Binding FunnelData}" XBindingPath="XValue" YBindingPath="YValue"
13+
ShowDataLabels="True" PaletteBrushes="{Binding PaletteBrushes}"
14+
StrokeWidth="2" Stroke="White" EnableTooltip="True">
1515

1616
<chart:SfFunnelChart.Title>
17-
<Label Text="Website Conversion Rate" HorizontalOptions="Fill" HorizontalTextAlignment="Center" VerticalOptions="Center" FontSize="16" />
17+
<Label FontSize="17" Text="Website Conversion Rate" HorizontalTextAlignment="Center"/>
1818
</chart:SfFunnelChart.Title>
1919

2020
<chart:SfFunnelChart.Legend>

0 commit comments

Comments
 (0)