We decided to start the theming work with the most-often used Infragistics control in WPF line of business applications – the XamDataGrid<\/a> (a part of NetAdvantage for WPF<\/a>) – a high-performance, fully-featured, richly stylable control. This blogpost features a dark theme for the XamDataGrid<\/a> and editor controls, which can readily be extracted and used to produce a UI that\u2019s easy on the eyes.<\/p>\n\n\n\n Please download the sample project<\/a> \u2013 it integrates the XamDataGrid<\/a> with a XamFormulaEditor<\/a> and includes the dark theme for these two controls. Please remember to unblock the ZIP archive<\/a> before extracting it. <\/strong>The project is built using Visual Studio 2010 and .NET Framework 4. It uses the XamDataGrid<\/a> in the the 12.2 NetAdvantage for WPF<\/a> product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial<\/a> of the NetAdvantage for WPF<\/a> product, which includes the XamDataGrid<\/a> is available<\/a>. Here\u2019s a screenshot of the XamDataGrid<\/a> themed in the dark theme:<\/p>\n\n\n\n The XamDataGrid<\/a> Metro Dark theme is in DataPresenter_MetroDark.xaml and Editors_MetroDark.xaml files. As part of this, we\u2019re 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.<\/p>\n\n\n\n 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\u2019d like to change all the colors of the theme into a particular color hue, it\u2019s much easier to use a ResourceWasher<\/a>. 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<\/a> here<\/a>. This approach is illustrated in the sample.<\/p>\n\n\n\n In the sample we\u2019re using a Transparent WashColor<\/a> on the ResourceWasher<\/a> in the MainWindow in order to show the dark theme as it is defined in the styles. If you\u2019d like to activate the resource washing, please change the WashColor<\/a> setting to a different color.<\/p>\n\n\n\n In this case we\u2019re 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<\/a>.<\/p>\n\n\n\n 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<\/a> and XamFormulaEditor<\/a>, 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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. <\/p>\n","protected":false},"author":94,"featured_media":2370,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=351"}],"version-history":[{"count":4,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/351\/revisions"}],"predecessor-version":[{"id":2529,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/351\/revisions\/2529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2370"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"A](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/kiril_matev\/metablogapi\/5811.image_2.png\" "\\"A")
<\/a><\/figure>\n\n\n\nHow to Access the Theme<\/h2>\n\n\n\n
Modifying the Theme<\/h2>\n\n\n\n
Summary<\/h2>\n\n\n\n
![unblock the ZIP archive<\/a> before extracting it. <\/strong>The project is built using Visual Studio 2010 and .NET Framework 4. It uses the](\"http:\/\/blogs.infragistics.com\/cfs-file.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/kiril_5F00_matev.Tuning+the+XamDataChart+for+Blazing-Fast+Charting\/unblockZIP.jpg\"){kind=link}