Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (48)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (93)DocIO  (20)Essential JS 2  (70)Essential Studio  (162)File Formats  (18)Flutter  (103)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (474)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (24)Windows Forms  (55)WinUI  (16)WPF  (119)Xamarin  (127)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (45)Development  (252)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (215)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (57)UI  (118)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (10)Web  (206)What's new  (126)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Enjoy 30+ New, Elegant Palettes in WPF Theme Studio

Enjoy 30+ New, Elegant Palettes in WPF Theme Studio

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:

  1. 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.
    Essential WPF Theme Studio Window

Note: Refer to the Supported Palettes in WPF Theme Studio to see the complete list of palettes in each theme variant.

  1. Then, choose your preferred palette using the Choose palette drop-down available below the Choose theme drop-down.Choose the Required Palette Refer to the following screenshot.
    Customizing Themes Using Palettes in the WPF Theme Studio
    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.

  1. 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();            
            }        
        }
  1. 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.

Customizing Themes Using Palettes in a WPF Application
Customizing Themes Using Palettes in a WPF Application

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

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 forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top