How to create Metro UI ASP.NET Application

Microsoft-METRO-UI-Description.svg

If you’re ASP.NET developer, you’re concern about the User Interface/Design of your application and you notice Metro/Modern UI is neat and great UI, but How I can make my ASP.NET application look like Windows 8 application? Can I do that? The answer is Yes you can, there’re bunch of (free/paid) tools that will help in make your ASP.NET application looks like Windows 8 application.

Before listing the tools, let’s see Why Metro/Modern UI is neat? and Why Microsoft choose it to be its UI cross all its platforms? Microsoft Modern/Metro UI inspired by public transportation signs and it’s a typography design which focus on the content by implement typography more than graphics.

My Experience

Personally I didn’t use Windows 8 yet, I’ve tired it but I didn’t use it as my daily OS. Last week I bought Nokia Lumia 920 and What made my mind to buy it and go for Windows Phone after using Android for 2 years? It’s the UI and UX, yes Microsoft made it this time. Me and my wife were shopping, we went to try this phone and she said wow this UI and UX are great (she’s an Apple fan) and I agree with he. I’m using the phone for a week only and I love it.

Modern UI or Metro UI

If you noticed I’m using Metro/Modern UI not Metro only, because Microsoft forced to change the name of its new UI to Modern because of some legal issues and copyrights, it’s rumor but the true is Microsoft stop calling it Metro and mention it as “Microsoft design language” and some folks on the internet call it Modern UI.

The List (Tools)

Your ASP.NET will have a great UI if you add Metro UI to it, so let’s list the tools:

  • CSS/JavaScript:
    • Metro UI CSS (free): It’s CSS framework helps you create most of the things in Metro/Modern UI components like live tiles, toggles, textboxes, buttons, and much much more, it has its grid system and it’s not based Twitter Bootstrap.
    • Bootmetro (free): It’s based on Twitter Bootstrap so you still have features of bootstrap and has some of Metro UI components like hub/tile. action buttons, notifications, list view. etc..
    • Metro-bootstrap (free): It’s also based on Twitter Bootstrap but it’s lack of many Metro/Modern UI components.
  • Icons:
    • Syncfusion Metro Studio (free): It’s free  desktop application that have more than 1700 icons you’ll need when building Metro/Modern application, the great thing about this tool is you can arrange icons in projects, export icons to many extension or ever CSS sprites, and resize icons.
    • MetroUIIcons.com (free): It’s a website contains more than 800 handcrafted Metro UI icons, the create thing about this website that you can contribute because it’s open source and hosted on GitHub plus you can make a request for an Icon.
  • ASP.NET Control:
    • Telerik ASP.NET Ajax RadControls (paid): Telerik is the one of the best companies that provide .NET tools/controls to .NET developers, it has RadControls for ASP.NET WebForms, one of the best feature of RadControls is the style, Telerik provides wide rang of styles with RadControls so developers can use them out of the box. Two of RadControls styles are Metro which looks like Metro/Modern UI and Metro Touch which is a touch enabled version of Metro/Modern UI.

What I’m using

Personally I’m using Metro UI CSS, Syncfusion Metro Studio, and Telerik ASP.NET Ajax RadContorls, it’s working fine together not perfect because there’re some CSS conflicts between Metro UI CSS and Telerik ASP.NET Ajax RadContorls, but in the other hand it’s working, nowadays I’m working on an ASP.NER WebForms application with those 3 tools to make it looks like Windows 8 application.

  • Hosam Kamel
  • http://profiles.google.com/andrew.paul.gray Andrew Gray

    Great article Emad. Set me on the right path.

  • http://www.karyasiddhivinayaka.org/ Ganesh Kumar Poosarla

    Very nice sir, even I thought to develop an app with new metro UI. I became a big fan to new metro UI style. Its really time for Microsoft to rock the world, because of its new metro UI style. I dono who have brought up the idea of this style.

    When I try to add Segoe UI style in my site which they follow for new metro UI style. I am unable to see the font in my browser, where as in microsoft sites are able to display.