Thinking Out Loud

WPF Theme Designer (v17.2)

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.

WPF Theme Designer: Transformation

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.

WPF Theme Designer: First Look

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.

WPF Theme Designer: Palette Colors

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.

WPF Theme Designer: Filter Colors

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.

WPF Theme Designer: Highlight 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.

WPF Theme Designer: Color Picker

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.

WPF Theme Designer: Excel Green Color

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.

WPF Theme Designer: Shades of Green

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...

WPF Theme Designer: Load the Assembly

...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.

Published Dec 12 2017, 12:26 PM by
Bookmark and Share

Comments

No Comments
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners