How to create WPF applications with material design theme?
Syncfusion provides a Material theme that can be used to create and apply the material design for WPF applications (.NET Core and also .NET Framework) using the skin manager. Also, skin manager allows to custom the primary colors, typography in few lines of code for an application or control. In addition, WPF Theme Studio can be used to create custom themes based on material design. Below are the list of four material theme variants supported for WPF.
This article explains how to apply the Material Light theme to an existing WPF application. Follow the below steps to apply the material light theme and customize some parameters.
Add Material Light Theme and Skin Manager NuGet packages
Add the following NuGet packages to WPF application.
If you want to apply other material theme variants also by referring corresponding NuGet.
Applying Material Light Theme to WPF application
Themes will be applied to both Syncfusion and framework controls by using the Theme attached property of the SfSkinManager. When a theme is applied to a Window or any element, skin manager inherits the same theme to all its descendants.
Code [XAML]:
<Window x:Class="WPF_Material_Theme.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Credit Card Payment"
xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=MaterialLight}">
</Window>
Before Applying Theme
After Applying Material Light Theme
Customize and Register Custom Theme Settings
WPF Material Light theme can be customized using the properties of MaterialLightThemeSettings. Before applying a customized theme, register it using the RegisterThemeSettings(String, IThemeSetting) method. Once registered, set the customized Material theme to the application using the SetTheme(DependencyObject, Theme) method.
Code [C#]:
using Syncfusion.SfSkinManager;
using Syncfusion.Themes.MaterialLight.WPF;
using System.Windows;
using System.Windows.Media;
namespace WPF_Material_Theme
{
public partial class MainWindow : Window
{
public MainWindow()
{
//Customizing the MaterialLight theme settings
MaterialLightThemeSettings materialLightThemeSettings = new MaterialLightThemeSettings();
materialLightThemeSettings.PrimaryBackground = new SolidColorBrush(Colors.Red);
materialLightThemeSettings.PrimaryForeground = new SolidColorBrush(Colors.Yellow);
materialLightThemeSettings.BodyFontSize = 15;
materialLightThemeSettings.HeaderFontSize = 18;
materialLightThemeSettings.SubHeaderFontSize = 17;
materialLightThemeSettings.TitleFontSize = 17;
materialLightThemeSettings.SubTitleFontSize = 16;
materialLightThemeSettings.FontFamily = new FontFamily("Callibri");
//Register the customized MaterialLight theme
SfSkinManager.RegisterThemeSettings("MaterialLight", materialLightThemeSettings);
//Setting the customized MaterialLight theme to the Window
SfSkinManager.SetTheme(this, new Theme("MaterialLight"));
InitializeComponent();
}
}
}
After applying customized Material Light theme
Sample: View sample in GitHub
Conclusion
This article gives a quick overview of applying a Material Light theme and customizing it. Apart from the material theme, Syncfusion also supports Office2019 and System theme with different variants, more details please refer theme list. To create a new custom theme, refer to the creating custom theme documentation.
References:
