The Syncfusion WPF Theme Studio helps users give their visual presentation a new theme in minutes. End-users can select an appropriate base theme, change its primary color, preview it, export it as a theme project, and utilize it in their applications for a rich user interface experience.
The skin manager helps you apply 27 built-in themes for both Syncfusion and framework controls. From the 2021 Volume 2 release onward, you can enjoy 30+ new, elegant color palettes on top of the existing theme variants supported in the WPF Theme Studio.
In this blog, we will learn how to customize the themes supported in our WPF Theme Studio using these color palettes.
Customize themes using palettes
Follow these simple steps to customize the themes using the palette options in the WPF Theme Studio:
- Click on the Themes tab on the right-side panel of the Essential WPF Theme Studio window. Then, it will display the available themes and palette options. Each theme variant has its own palette list. Refer to the following screenshot.
Note: Refer to the Supported Palettes in WPF Theme Studio to see the complete list of palettes in each theme variant.
- Then, choose your preferred palette using the Choose palette drop-down available below the Choose theme drop-down.
Refer to the following screenshot.
Customizing Themes Using Palettes in the WPF Theme Studio Note: To see how to export the custom theme, please refer to the Exporting theme project from the WPF Theme Studio documentation.
Customize themes using palettes in a WPF application
Next, we will learn how to customize the WPF themes using the color palettes at the application level.
Step 1: Create a sample project.
First things first, create a new WPF project in Visual Studio or open an existing one. Here, we are going to create an application with the WPF DataGrid control.
Step 2: Add WPF DataGrid to the project.
Follow the steps in Creating a simple application with SfDataGrid to add and initialize the WPF DataGrid in the created project.
Refer to the following code example.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<syncfusion:SfDataGrid x:Name="dataGrid"/>
</Grid>
</Window>Step 3: Create and register custom theme settings.
Next, register the theme settings before setting a theme for the DataGrid control. Each theme supported in the Theme Studio has a theme settings class with the theme name as the prefix.
For example, if FluentDark is the theme name, then there will be a theme settings class named FluentDarkThemeSettings.
For a complete list of theme settings, refer to the Customize theme colors and fonts in the application documentation.
- Initialize the FluentDarkThemeSettings class and change the Palette property available in that class as per your needs.
Refer to the following code example.public partial class MainWindow : ChromelessWindow { public MainWindow() { FluentDarkThemeSettings fluentDarkThemeSettings = new FluentDarkThemeSettings(); fluentDarkThemeSettings.Palette = FluentPalette.RedOrange; InitializeComponent(); } }
- Next, register the theme settings in the skin manager using the RegisterThemeSettings method, which accepts two parameters: theme name and theme settings instance.
public partial class MainWindow : ChromelessWindow { public MainWindow() { FluentDarkThemeSettings fluentDarkThemeSettings = new FluentDarkThemeSettings(); fluentDarkThemeSettings.Palette = FluentPalette.RedOrange; SfSkinManager.RegisterThemeSettings("FluentDark", fluentDarkThemeSettings); InitializeComponent(); } }
Step 4: Set the theme to your application.
Next, set the theme to the project for which custom theme settings are registered.
public partial class MainWindow : ChromelessWindow
{
public MainWindow()
{
FluentDarkThemeSettings fluentDarkThemeSettings = new FluentDarkThemeSettings();
fluentDarkThemeSettings.Palette = FluentPalette.RedOrange;
SfSkinManager.RegisterThemeSettings("FluentDark", fluentDarkThemeSettings);
SfSkinManager.SetTheme(this, new Theme("FluentDark"));
InitializeComponent();
}
}After executing these steps, we will get an output with a customized palette like in the following screenshot.
Note: Please refer to the Create Beautiful Themes for Syncfusion WPF Controls in 5 Minutes blog for how to customize specific theme colors and fonts apart from the available palette.
References
- Getting Started with WPF Skin Manager documentation
- Getting Started with WPF Theme Studio documentation
- Customize themes using WPF Palette demo on GitHub repository.
Conclusion
Thanks for reading! In this blog, we have seen the 30 + new color palettes in our WPF Theme Studio and how to customize themes with them. These features will save your time in writing custom styles to achieve the desired customization. These features are available in our 2021 Volume 2 release. You can see what else came out in the release in our release notes and on the What’s New page.
So, let’s paint our application with these vivid palette options available in the WPF Theme Studio!
For existing customers, the new Essential Studio version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.
If you wish to send us feedback or ask any questions, please use the comments section below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!
