Introduction to Metro UI in Windows8

As technology progresses, we, being on the eco-system of Microsoft is continuously getting more and more updates in terms of technology, both in pipeline of actual technology update as well as User interface improvements. User Interface plays a key role for any application. Even though how good your application performs, if the application UI is not good, it will definitely get lot less points than it should actually get. In the last decade, the development world continuously shifted its balance towards rich user interface. The inclusion of WPF, Silverlight for web, AJAX,  HTML5, Windows phone applications etc are some of the examples which lets you understand where the world is moving.

Microsoft has been continuously following the trait and introduced a new set of UI’s for us in the new version of Windows released. The very first screen that you see when you open your Windows 8 PC is the Start Screen. The Start screen has been widely changed, there is no Start menu, there are live tiles etc.  Lets take a look at the screen:

So basically you see large number of small boxes in the UI which represents Tiles. These tiles is actually links to an application. The kind of app that it represents are very rich, interactive and secure. The kind of application is what we call metro application.

After you install Metro application, (If you cannot do installation, please follow my blog) you should see Visual Studio 2011 Express tile in your screen. Click on that tile, and you will see our very old desktop (which is represented as tile here in windows 8) to appear.

Create a new Application from the New Dialog box and click ok to create from templates.

It shows there are quite a number of templates available to build Metro style applications. It has support for Javascript in forms of HTML 5 or XAML native applications and .NET Languages. In our case I have chosen SplitApplication which creates an application that layout two columns.  Lets create an application using a template and click run.

You will see the application takes the whole screen area. We dont close a metro application, operating system is responsible for doing the same for us.

So to move back to the desktop either you press Win + Tab or move the mouse on the lower left corner of the screen and click on the charm appears on the screen.

Hence without writing a single line of code, our application is ready. We will look into detail later in the series.

Stay tune.

Abhishek Sur

Abhishek Sur is a Microsoft MVP since year 2011. He is an architect in the .NET platform. He has profound theoretical insight and years of hands on experience in different .NET products and languages. He leads the Microsoft User Group in Kolkata named KolkataGeeks, and regularly organizes events and seminars in various places for spreading .NET awareness. He is associated with the Microsoft Insider list on WPF and C#, and is in constant touch with product group teams. He blogs at http://www.abhisheksur.com His Book : Visual Studio 2012 and .NET 4.5 Expert Development Cookbook. Follow Abhishek at Twitter : @abhi2434

One Comment to “Introduction to Metro UI in Windows8”

  1. Thanks in support of sharing superb information. Your web-site is vastly cool. I am impressed by the info that you have on this site. It reveals how nicely you perceive this subject. Bookmarked this web side, will get nearer backside on behalf of added articles.

Comments are closed.