Infosys Microsoft Alliance and Solutions blog

« Desktops / Laptops / Tablets / Smartphones | Main | Visual Studio 11 is a bit more colorful »

Metro App, Metro UI, What's all this?

Microsoft had introduced Phone 7 in early 2010 and released the first version in market by late 2010. The key point that MS highlighted was that Phone 7 a completely new, ground up, operating system and another immediately noticeable thing about it was the tiled based UI. While on first look the tiles looked like desktop icons, they were in fact much more than that. They were live and hence could provide updates from the application right on the home screen, so a person need not go into an application just to check basic updates.

While these live tiles were the immediately noteciable concepts, phone 7 UI also became full screen, no chrome, no unnecessary gradients, no 3D controls etc and focus shifted to content of the application and also on typography along with smooth animations. Microsoft had introduced a new design language, they called Metro. It wasn't a language like C# or VB.NET or XAML but it was more of concepts around how to design the applications for the new age apps.

While Phone 7 has now been around for a while, the Metro UI guidelines didn't pick up much because the Phone 7 sales have been low and there are very less apps on the phone 7 store also. However with Windows 8 dev preview and the later consumer preview Metro UI has suddenly gained popularity.

This has also brought forth a question and that is What really is a Metro application? Is any application that looks like a Metro application (uses tiles, uses content and no chrome etc.) a Metro application? Is an application that has a tile on Windows 8 start screen a Metro application? Is Metro application a Windows application or a Web application? Is the Tech Ed 2012 India website a Metro application? It has similar layout, it has live tiles like behavior and it even has side bar menu options.

Interestingly if you search on google for "Metro Applications" you would hardly find anything. Most content online talks about Metro Style Applications. If you have seen Windows 8 Architecture slide, you would recall two main parts to it: The desktop part and the WinRT part. In WinRT you could be using HTML5 and WinJS or XAML and C#/VB.NET. For the later there is a minimal .NET API set available within WinRT. Check the overview here

Most people go by the understanding that any application that eventually runs on WinRT is a Metro application and any that doesn't is not. So there could be apps that just visually look the same, but don't run on WinRT, like the TechEd 2012 India website and hence are not Metro apps. While this is mostly correct, there do exist hybrid apps as well that partly consume WinRT and partly the full .NET framework and hence don't pass the certification (can try with Windows Application Certification Kit (WAC)) and the eventual result is it won't get deployed on Windows 8 app store.

So to me, an application that fails WAC test and is not deployed on the store is not a Metro application. An application my redefine its look and feel to look more like the Metro apps, but in reality that application isn't a Metro app till it conforms to WAC kit requirements. Just by looking at an application it is not possible to tell if the app is a Metro application or not.

While the Windows 8 release and app store is still some months away, you can start to build Metro applications using Windows 8 consumer preview and Visual Studio 11 beta along with Expression Blend. Some additional resources that will be helpful are Making great metro style apps and UX Guidelines for Metro Style Apps.

Any comments are welcome.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Please key in the two words you see in the box to validate your identity as an authentic user and reduce spam.

Subscribe to this blog's feed

Follow us on

Blogger Profiles

Infosys on Twitter