Metro Style Support in NetAdvantage for XAML 2012 Vol.1

Jordan Tsankov / Monday, June 4, 2012

The 12.1 release of NetAdvantage for XAML brings Metro support to the table. With this addition , you can now develop Metro-styled applications using all the benefits of our Infragistics components–without losing any style !

First off , the Metro theme that is provided with the 12.1 release has improved support for touch gestures. The interaction zones have been improved – smaller components such as arrows and handles have been made bigger.

Infragistics 12.1 XAML Calendar Control Default Theme

Infragistics 12.1 XAML Calendar Control Metro Theme

Comparing the two calendar controls , it’s clear that the one on the right will provide better experience on a touch device. Separate components within the control are well-defined ( the year selector and today’s date at the bottom ) and the text is sharper.

Let’s take a look at the grid as well:

Infragistics 12.1 XAML Grid Control Default Theme

Infragistics 12.1 XAML Grid Control Metro Theme

The grid with the Metro theme stands out with less detail on the layout itself but more focus on the content. The icons and text are high contrast and stand out more – as per Metro design guidelines.

Finally , let’s take a look at a slider.

Infragistics 12.1 XAML Slider Control Default Theme

Infragistics 12.1 XAML Slider Control Metro Theme

As with the other controls , this one has components that are easy on the eye and easily accessible on a touch device – the handle is bigger and the buttons’ zones are actually bigger than the ones in the original grid ( you might be thrown away by the fact they are borderless , yet they are wider  – this is again following the Metro conventions )

Here’s a preview of the controls that support the Metro theme

Infragistics 12.1 XAML Metro Theme Controls DV

 

To apply the theme , you can fire up your color tuner – check out this article about it – and select the project you need. Both the color tuner and the Metro theme come with the 12.1 release of NetAdvantage for WPF / Silverlight , so you should have no issues with setting the theme as soon as you get the new version.

You can preview the Metro theme for all of the supported controls by going to the Silverlight samples page , selecting a control and going to Features List –> Visual –> Style –> Theming.