Skip to content

Commit 8083b07

Browse files
Brundhasf3969Brundhasf3969
committed
Added the Theme Sample for the KB.
1 parent c910033 commit 8083b07

37 files changed

Lines changed: 1168 additions & 2 deletions

‎README.md‎

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,91 @@
1-
# -How-to-Automatically-Switch-Syncfusion-Control-Themes-Based-on-Device-Selected-Theme-in-.NET-MAUI
2-
This repository contains a sample explaining how to automatically switch Syncfusion control themes based on device selected theme in .NET MAUI. Tokens: maui, theme, device-theme, Syncfusion-theme
1+
This article explains how to automatically switch [.NET MAUI Syncfusion control](https://www.syncfusion.com/maui-controls) themes based on the device-selected theme. This can be achieved by using [SyncfusionThemeResourceDictionary](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html).
2+
3+
To enable automatic theme switching for Syncfusion controls based on the device's selected theme in a .NET MAUI application, you can utilize the `OnAppearing` method to assign the Syncfusion `VisualTheme`. Additionally, handling the `RequestedThemeChanged` event allows for dynamic updates to the Syncfusion controls' theme when the device's theme changes at runtime.
4+
5+
**App.xaml Configuration**
6+
7+
Ensure that your App.xaml includes the `SyncfusionThemeResourceDictionary`:
8+
9+
```
10+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
11+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
12+
xmlns:local="clr-namespace:ThemeSample"
13+
xmlns:themes="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
14+
x:Class="ThemeSample.App">
15+
<Application.Resources>
16+
<ResourceDictionary>
17+
<ResourceDictionary.MergedDictionaries>
18+
<themes:SyncfusionThemeResourceDictionary />
19+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
20+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
21+
</ResourceDictionary.MergedDictionaries>
22+
</ResourceDictionary>
23+
</Application.Resources>
24+
</Application>
25+
```
26+
27+
**XAML**
28+
29+
```
30+
<ScrollView>
31+
<VerticalStackLayout
32+
Padding="30,0"
33+
Spacing="25">
34+
<buttons:SfButton
35+
x:Name="CounterBtn"
36+
Text="Click me"
37+
Clicked="OnCounterClicked"
38+
HorizontalOptions="Fill" />
39+
</VerticalStackLayout>
40+
</ScrollView>
41+
```
42+
43+
**C#**
44+
45+
1. Override the `OnAppearing` method to apply the current theme and set up an event handler for theme changes.
46+
2. Implement the `Current_RequestedThemeChanged` event handler to respond to theme changes during runtime.
47+
3. Define the `ApplyTheme` method to update the Syncfusion theme based on the current application theme.
48+
49+
```csharp
50+
protected override void OnAppearing()
51+
{
52+
if (Application.Current != null)
53+
{
54+
this.ApplyTheme(Application.Current.RequestedTheme);
55+
Application.Current.RequestedThemeChanged += Current_RequestedThemeChanged;
56+
}
57+
base.OnAppearing();
58+
}
59+
60+
private void Current_RequestedThemeChanged(object? sender, AppThemeChangedEventArgs e)
61+
{
62+
this.ApplyTheme(e.RequestedTheme);
63+
}
64+
65+
public void ApplyTheme(AppTheme appTheme)
66+
{
67+
if (Application.Current != null)
68+
{
69+
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
70+
if (mergedDictionaries != null)
71+
{
72+
var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
73+
if (theme != null)
74+
{
75+
if (appTheme is AppTheme.Light)
76+
{
77+
theme.VisualTheme = SfVisuals.MaterialLight;
78+
}
79+
else
80+
{
81+
theme.VisualTheme = SfVisuals.MaterialDark;
82+
}
83+
}
84+
}
85+
}
86+
}
87+
```
88+
89+
**Output**
90+
91+
![Theme_Demo.gif](https://support.syncfusion.com/kb/agent/attachment/article/17196/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI4NDcxIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.jvlmTEjigvFDlcME5ZMesmPS_NsNS9M8isVQGZsP2DQ)

‎ThemeSample/App.xaml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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:ThemeSample"
5+
xmlns:themes="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
6+
x:Class="ThemeSample.App">
7+
<Application.Resources>
8+
<ResourceDictionary>
9+
<ResourceDictionary.MergedDictionaries>
10+
<themes:SyncfusionThemeResourceDictionary />
11+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
12+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
13+
</ResourceDictionary.MergedDictionaries>
14+
</ResourceDictionary>
15+
</Application.Resources>
16+
</Application>

‎ThemeSample/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace ThemeSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎ThemeSample/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="ThemeSample.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:ThemeSample"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="ThemeSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎ThemeSample/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace ThemeSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎ThemeSample/MainPage.xaml‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Class="ThemeSample.MainPage"
5+
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
6+
7+
<ScrollView>
8+
<VerticalStackLayout
9+
Padding="30,0"
10+
Spacing="25">
11+
12+
<buttons:SfButton
13+
x:Name="CounterBtn"
14+
Text="Click me"
15+
SemanticProperties.Hint="Counts the number of times you click"
16+
Clicked="OnCounterClicked"
17+
HorizontalOptions="Fill" />
18+
</VerticalStackLayout>
19+
</ScrollView>
20+
21+
</ContentPage>

‎ThemeSample/MainPage.xaml.cs‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
using Syncfusion.Maui.Themes;
2+
3+
namespace ThemeSample
4+
{
5+
public partial class MainPage : ContentPage
6+
{
7+
int count = 0;
8+
9+
public MainPage()
10+
{
11+
InitializeComponent();
12+
}
13+
14+
private void OnCounterClicked(object sender, EventArgs e)
15+
{
16+
count++;
17+
18+
if (count == 1)
19+
CounterBtn.Text = $"Clicked {count} time";
20+
else
21+
CounterBtn.Text = $"Clicked {count} times";
22+
23+
SemanticScreenReader.Announce(CounterBtn.Text);
24+
25+
}
26+
27+
protected override void OnAppearing()
28+
{
29+
if (Application.Current != null)
30+
{
31+
this.ApplyTheme(Application.Current.RequestedTheme);
32+
Application.Current.RequestedThemeChanged += Current_RequestedThemeChanged;
33+
}
34+
base.OnAppearing();
35+
}
36+
37+
private void Current_RequestedThemeChanged(object? sender, AppThemeChangedEventArgs e)
38+
{
39+
this.ApplyTheme(e.RequestedTheme);
40+
}
41+
42+
public void ApplyTheme(AppTheme appTheme)
43+
{
44+
if (Application.Current != null)
45+
{
46+
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
47+
if (mergedDictionaries != null)
48+
{
49+
var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
50+
if (theme != null)
51+
{
52+
if (appTheme is AppTheme.Light)
53+
{
54+
theme.VisualTheme = SfVisuals.MaterialLight;
55+
}
56+
else
57+
{
58+
theme.VisualTheme = SfVisuals.MaterialDark;
59+
}
60+
}
61+
}
62+
}
63+
}
64+
}
65+
66+
}

‎ThemeSample/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
4+
namespace ThemeSample
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎ThemeSample/Platforms/Android/AndroidManifest.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

‎ThemeSample/Platforms/Android/MainActivity.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Android.App;
2+
using Android.Content.PM;
3+
using Android.OS;
4+
5+
namespace ThemeSample
6+
{
7+
[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
8+
public class MainActivity : MauiAppCompatActivity
9+
{
10+
}
11+
}

0 commit comments

Comments
 (0)