Skip to content

Commit 00f2dc2

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #2 from SyncfusionExamples/Theme_Sample
Added theme sample for the KB.
2 parents d9db852 + 9182e78 commit 00f2dc2

37 files changed

+1082
-2
lines changed

‎README.md‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,46 @@
1-
# Switching-between-light-and-dark-themes-in-.NET-Maui-SB
2-
Contains samples for switching-between-light-theme-and-dark-theme in .NET Maui SB.
1+
# Applying Themes in Maui Controls
2+
3+
Syncfusion themes allow you to apply colors across all the Syncfusion controls with a uniform approach and provide a consistent look and feel to your applications. This section covers the following topics:
4+
5+
* Applying light and dark themes
6+
* Overriding the default theme
7+
* Creating your own theme
8+
9+
## Applying light and dark themes
10+
11+
By default, Syncfusion offers support for both light and dark themes through the inclusion of a [SyncfusionThemeResourceDictionary](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html).
12+
13+
To apply themes to your application, merge the [SyncfusionThemeResourceDictionary](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html) item.
14+
15+
#### Theme resource dictionary
16+
17+
This resource dictionary includes keys and their corresponding color codes for all Syncfusion controls. Additionally, it contains the [VisualTheme](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html#Syncfusion_Maui_Themes_SyncfusionThemeResourceDictionary_VisualTheme) property where we can declare the following two theme color values:
18+
19+
1. MaterialLight
20+
2. MaterialDark
21+
22+
#### Automatic merging
23+
24+
When using more number of Syncfusion controls in an application, to make the process easier for merging the control style dictionaries of the controls, the [SyncfusionThemeResourceDictionary](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html) class has been provided for automatic merging.
25+
26+
{% highlight xaml %}
27+
28+
<Application xmlns:base="clr-namespace:SampleBrowser.Maui.Base;assembly=SampleBrowser.Maui.Base"
29+
xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
30+
x:Class="SampleBrowser.Maui.App"
31+
...>
32+
<Application.Resources>
33+
<ResourceDictionary>
34+
<ResourceDictionary.MergedDictionaries>
35+
<!-- Theme resource dictionary -->
36+
<syncTheme:SyncfusionThemeResourceDictionary VisualTheme="MaterialDark"/>
37+
</ResourceDictionary.MergedDictionaries>
38+
</ResourceDictionary>
39+
</Application.Resources>
40+
41+
....
42+
43+
</Application>
44+
45+
{% endhighlight %}
46+

‎SyncfusionThemeSample/SyncfusionThemeSample.sln‎

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.34723.18
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SyncfusionThemeSample", "SyncfusionThemeSample\SyncfusionThemeSample.csproj", "{40261A07-FBB5-441B-B006-24445026C9AB}"
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+
{40261A07-FBB5-441B-B006-24445026C9AB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{40261A07-FBB5-441B-B006-24445026C9AB}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{40261A07-FBB5-441B-B006-24445026C9AB}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{40261A07-FBB5-441B-B006-24445026C9AB}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{40261A07-FBB5-441B-B006-24445026C9AB}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{40261A07-FBB5-441B-B006-24445026C9AB}.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 = {4D8E039E-B34C-425F-B1B5-BDC184F94BB5}
26+
EndGlobalSection
27+
EndGlobal

‎SyncfusionThemeSample/SyncfusionThemeSample/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:SyncfusionThemeSample"
5+
xmlns:themes="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"
6+
x:Class="SyncfusionThemeSample.App">
7+
<Application.Resources>
8+
<ResourceDictionary>
9+
<ResourceDictionary.MergedDictionaries>
10+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
11+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
12+
<themes:SyncfusionThemeResourceDictionary VisualTheme="MaterialLight"/>
13+
</ResourceDictionary.MergedDictionaries>
14+
</ResourceDictionary>
15+
</Application.Resources>
16+
</Application>

‎SyncfusionThemeSample/SyncfusionThemeSample/App.xaml.cs‎

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

‎SyncfusionThemeSample/SyncfusionThemeSample/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="SyncfusionThemeSample.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:SyncfusionThemeSample"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="SyncfusionThemeSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎SyncfusionThemeSample/SyncfusionThemeSample/AppShell.xaml.cs‎

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

‎SyncfusionThemeSample/SyncfusionThemeSample/MainPage.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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="SyncfusionThemeSample.MainPage"
5+
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
6+
7+
<StackLayout VerticalOptions="CenterAndExpand">
8+
<buttons:SfButton Text="Change Theme (Light/ Dark)"
9+
HorizontalOptions="Center"
10+
VerticalOptions="Center"
11+
Clicked="ChangeSyncfusionControlsTheme"/>
12+
</StackLayout>
13+
14+
</ContentPage>

‎SyncfusionThemeSample/SyncfusionThemeSample/MainPage.xaml.cs‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using Syncfusion.Maui.Themes;
2+
3+
namespace SyncfusionThemeSample
4+
{
5+
public partial class MainPage : ContentPage
6+
{
7+
public MainPage()
8+
{
9+
InitializeComponent();
10+
}
11+
private void ChangeSyncfusionControlsTheme(object sender, EventArgs e)
12+
{
13+
ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
14+
if (mergedDictionaries != null)
15+
{
16+
var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
17+
if (theme != null)
18+
{
19+
if (theme.VisualTheme is SfVisuals.MaterialDark)
20+
{
21+
theme.VisualTheme = SfVisuals.MaterialLight;
22+
Application.Current.UserAppTheme = AppTheme.Light;
23+
}
24+
else
25+
{
26+
theme.VisualTheme = SfVisuals.MaterialDark;
27+
Application.Current.UserAppTheme = AppTheme.Dark;
28+
}
29+
}
30+
}
31+
}
32+
}
33+
34+
}

‎SyncfusionThemeSample/SyncfusionThemeSample/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Syncfusion.Maui.Core.Hosting;
2+
using Microsoft.Extensions.Logging;
3+
4+
namespace SyncfusionThemeSample
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+
}

‎SyncfusionThemeSample/SyncfusionThemeSample/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>

0 commit comments

Comments
 (0)