Breadcrumb arrow Back to Code Examples

How To Create Material Design (Material Theme) Applications In WPF?

Sample date Updated on Feb 15, 2024
Browse Code Git logo Download
material-design material-ui skins themes wpf

Syncfusion provides material theme that can be applied to WPF applications (.NET Core and also .NET Framework) using the skin manager to create material design applications. 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.

  1. Material Light Theme - NuGet
  2. Material Dark Theme - NuGet
  3. Material Light Blue Theme - NuGet
  4. Material Dark Blue Theme - NuGet

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>
Up arrow