Skip to content

Commit 3c4e6a3

Browse files
committed
Updated the README.md.
1 parent e7b92a3 commit 3c4e6a3

File tree

1 file changed

+20
-27
lines changed

1 file changed

+20
-27
lines changed

README.md

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
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).
22

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.
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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html#Syncfusion_Maui_Themes_SyncfusionThemeResourceDictionary_VisualTheme). Additionally, handling the `RequestedThemeChanged` event allows for dynamic updates to the Syncfusion controls' theme when the device's theme changes at runtime.
44

55
**App.xaml Configuration**
66

77
Ensure that your App.xaml includes the `SyncfusionThemeResourceDictionary`:
88

99
```
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">
10+
<Application ...
11+
xmlns:themes="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core">
1512
<Application.Resources>
1613
<ResourceDictionary>
1714
<ResourceDictionary.MergedDictionaries>
1815
<themes:SyncfusionThemeResourceDictionary />
19-
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
20-
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
16+
...
2117
</ResourceDictionary.MergedDictionaries>
2218
</ResourceDictionary>
2319
</Application.Resources>
@@ -27,37 +23,34 @@ Ensure that your App.xaml includes the `SyncfusionThemeResourceDictionary`:
2723
**XAML**
2824

2925
```
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>
26+
//Mainpage.xaml
27+
28+
<VerticalStackLayout Padding="30,0" Spacing="25">
29+
<buttons:SfButton x:Name="CounterBtn" Text="Click me" Clicked="OnCounterClicked"
30+
HorizontalOptions="Fill" />
31+
</VerticalStackLayout>
4132
```
4233

4334
**C#**
4435

4536
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.
37+
2. Implement the `OnRequestedThemeChanged` event handler to respond to theme changes during runtime.
4738
3. Define the `ApplyTheme` method to update the Syncfusion theme based on the current application theme.
4839

4940
```csharp
41+
//Mainpage.xaml.cs
42+
5043
protected override void OnAppearing()
5144
{
5245
if (Application.Current != null)
5346
{
5447
this.ApplyTheme(Application.Current.RequestedTheme);
55-
Application.Current.RequestedThemeChanged += Current_RequestedThemeChanged;
48+
Application.Current.RequestedThemeChanged += OnRequestedThemeChanged;
5649
}
5750
base.OnAppearing();
5851
}
5952

60-
private void Current_RequestedThemeChanged(object? sender, AppThemeChangedEventArgs e)
53+
private void OnRequestedThemeChanged(object? sender, AppThemeChangedEventArgs e)
6154
{
6255
this.ApplyTheme(e.RequestedTheme);
6356
}
@@ -69,16 +62,16 @@ public void ApplyTheme(AppTheme appTheme)
6962
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
7063
if (mergedDictionaries != null)
7164
{
72-
var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
73-
if (theme != null)
65+
var syncTheme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
66+
if (syncTheme != null)
7467
{
7568
if (appTheme is AppTheme.Light)
7669
{
77-
theme.VisualTheme = SfVisuals.MaterialLight;
70+
syncTheme.VisualTheme = SfVisuals.MaterialLight;
7871
}
7972
else
8073
{
81-
theme.VisualTheme = SfVisuals.MaterialDark;
74+
syncTheme.VisualTheme = SfVisuals.MaterialDark;
8275
}
8376
}
8477
}
@@ -88,4 +81,4 @@ public void ApplyTheme(AppTheme appTheme)
8881

8982
**Output**
9083

91-
![Theme_Demo.gif](https://support.syncfusion.com/kb/agent/attachment/article/17196/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI4NDcxIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.jvlmTEjigvFDlcME5ZMesmPS_NsNS9M8isVQGZsP2DQ)
84+
![Theme_Demo.gif](https://support.bolddesk.com/kb/agent/attachment/article/17196/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI4NDcxIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5ib2xkZGVzay5jb20ifQ.YNDjr4zoII7A6wHES18wM0xTiidGYFkQ_t7WmRjcdWg)

0 commit comments

Comments
 (0)