By popular request–A Dark Theme for the WPF XamDataGrid

There has been quite a bit of interest in dark themes recently. This is because more users are finding the white background of applications straining their eyes, especially when they are spending a lot of time in front of the computer screen. The convenience of having a darker theme was also recognized by Microsoft in Visual Studio 2012, which comes with such a dark theme built-in. We have received a number of requests for dark themes for our NetAdvantage for WPF controls, and until now, we could only advise on how customers could build such a dark theme by themselves. We’ve now been able to build such a dark theme for select WPF controls and are happy to provide it freely.

We decided to start the theming work with the most-often used Infragistics control in WPF line of business applications - the XamDataGrid (a part of NetAdvantage for WPF) - a high-performance, fully-featured, richly stylable control. This blogpost features a dark theme for the XamDataGrid and editor controls, which can readily be extracted and used to produce a UI that’s easy on the eyes.

Please download the sample project – it integrates the XamDataGrid with a XamFormulaEditor and includes the dark theme for these two controls. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the XamDataGrid in the the 12.2 NetAdvantage for WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamDataGrid is available. Here’s a screenshot of the XamDataGrid themed in the dark theme:

How to access the theme

The XamDataGrid Metro Dark theme is in DataPresenter_MetroDark.xaml and Editors_MetroDark.xaml files. As part of this, we’re also making available dark styles for XamFormulaEditor - in DataTree_MetroDark.xaml and FormulaEditor_MetroDark.xaml. These contain both the control templates, and the brushes and colors used to style these controls.

Modifying the theme

You can modify the colors of the brushes directly in the DataPresenter_MetroDark.xaml and Editors_MetroDark.xaml. While this approach may work for a few brush settings, if you’d like to change all the colors of the theme into a particular color hue, it’s much easier to use a ResourceWasher. Resource washing lets you change the colors of all brushes in the resource dictionary, thus giving you the capability to customize the visual appearance of a control, while keeping the relative shades of colors in different elements of the control. You can read more about how to use a ResourceWasher here. This approach is illustrated in the sample.

In the sample we’re using a Transparent WashColor on the ResourceWasher in the MainWindow in order to show the dark theme as it is defined in the styles. If you’d like to activate the resource washing, please change the WashColor setting to a different color.

In this case we’re washing the entire theme in a single color. Resource washing has much greater capabilities and can wash different groups of brushes in different colors if your scenario demands it. This more advanced approach is presented here.

Summary

Styling is ever more important in desktop applications, as desktop applications are competing with the interactivity and theming in mobile applications. In this blog post, we presented a dark theme for the XamDataGrid and XamFormulaEditor, which lets you achieve a dark look for your application. You can use the these styles as they are, or you can easily use them as a base for resource washing, which will let you produce a variety of color combinations to suit your applications.