As you know, a typical app-wide color scheme consists of numerous palettes/colors/shades. Without the proper tools, creating your own custom theme can be incredibly tedious and time consuming process - a process that very few people willingly tackle.
In this blog post, I will demonstrate how to quickly customize an existing DevExpress WPF theme and how you and your team can leverage our WPF Theme Designer to tailor the look and feel of WPF apps you deliver to end-users.
Download and Install
The DevExpress WPF Theme Designer was designed to reduce the grunt work associated with custom app-wide theme development. It is a free standalone tool that allows you to generate custom themes by altering the base colors of existing DevExpress Themes for the WPF platform. To customize existing DevExpress themes, you'll need to download the Theme Designer and install it on your machine:
https://www.devexpress.com/products/net/controls/wpf/themes/theme-designer.xml
Once you've installed the Theme Designer, you are ready to explore its capabilities.
Modify an Existing Theme
Though you can always build a theme from scratch, it's best to start with a theme that offers you most of what you need. My objective in this blog post is to take the DevExpress Office 2016 Colorful theme and modify a couple of its colors so that it is more in line with Microsoft Excel.
To begin, I will build my project by pressing the F6 key or by clicking the Build Ribbon button.
Next, I'll select a DevExpress control on the left panel to preview its color scheme.
The panel on the right displays the theme's palette (combines colors used by different controls). The Palette tab for the Office 2016 Colorful theme includes 29 colors. The Individual Colors tab on the right panel includes thousands of colors. I can group them to see which colors are included within the palette.
Note that changing a palette color automatically sets a new value for all corresponding individual colors. This reduces the amount of work involved in customizing them and helps maintain overall consistency.
Make it Look Like Excel
The next step is to change the background color of the DevExpress Ribbon and Hamburger Menu to mimic the appearance of Microsoft Excel.
To obtain the name of the required palette color, I select the Filter Colors tool and point to the ribbon background area while holding the SHIFT key.
If you're following along, you'll notice that I must modify the Backstage.Window.Background color. To double-check, I click the Highlight Colors tool and select this palette color to highlight all affected elements.
Once I know what I need to modify, it's time to select the new color. The Theme Designer's built-in Color Picker allows me to select any on-screen color. I'll use it to pick the color (green) used within Microsoft Excel.
Note that by changing the Backstage.Window.Background palette color, I set a new value for all 81 occurrences of this color within different DevExpress controls: the Ribbon's background in the Ribbon, Diagram Designer and Spreadsheet controls, the background of the Hamburger Menu, etc.
I use the Color Editor to set the Backstage.Delimiter, Backstage.HoverBackground and Backstage.SelectionBackground palette colors by modifying the tone and saturation of the Backstage.Window.Background color value.
Apply the New Theme to the Application
To apply the new theme to an application, I'll need to build the assembly by clicking the Publish button and add a reference to this assembly within my application project...
...And add a few lines of code to the app.xaml.cs file.
var theme = new Theme("TestTheme");
theme.AssemblyName = "DevExpress.Xpf.Themes.TestTheme.v17.2";
Theme.RegisterTheme(theme);
ApplicationThemeHelper.ApplicationThemeName = "TestTheme";If you are ready to customize an existing WPF theme and want to learn more, please refer to the following online resources:
https://documentation.devexpress.com/WpfThemeDesigner/118707/WPF-Theme-Designer
https://www.youtube.com/watch?v=q1OwsGLOQ_Q
I'd love to hear from you - please share your thoughts on our WPF Theme Designer using the comments field below.