Windows 8 Metro Application Development

Great! Just few days ago, I began R & D on Windows 8 Metro applications. It's really cool.

I guess it is going to write a new era in the tablet world. Because, according to my knowledge, Windows 8 is mainly built for tablets and Windows 8 is for phones with touch enabled. Let me get to the main part of the story.

I just want to shed light on Windows 8. I am not able to upload any sample application. Because, currently I am working with a developer preview version and the Virtual machine is too slow.

The main point is that in Windows 8 everything is an application. Example: Desktop is also an application in Windows 8.

Next come to the main features of Windows 8:

1. Support for both X86 PCs and ARM tablets
   
   As I said, Windows 8 might cause a revolution in the tablet world. Because the same version of the OS works both in PCs as well as in tablets.
    
2. Touch centric
   
   Windows 8 is enabled with touch (supports for gesture operation).
    
3. New tile based UI
   
   Windows 8 introduces a new metro style UI. If you click on the start menu, it will display all applications in a tiles manner. It is compatible with Windows 7 applications.
    
4. Snap Multi-tasking
   
   "Snap multitasking" is designed to make it easy to run two apps in Windows 8 side-by-side, to resize them, and to switch between them. On the right-hand side of the screen, you can snap an app into place.

Since I am a Silverlight developer, let us move to a little bit of Silverlight / .Net application development.

Currently I am using Visual Studio 2011 developer preview. It also supports many new features and makes life simple and nice for us.

Templates available in VS 2011 developer preview:

1. Grid Application: This is a metro style application. If you are familiar with panorama and pivot controls of WP7, then you can easily understand it. There are three layers; one will display a group of items.
   
   
    
2. Once you click on the, collection/item name, you will be presented with the collection of details.
   
   
    
3. Further click on item collection details, navigate to a particular item detail.
   
   
   

   Default files
   
   

   • App.xaml: this files contains a lot of resources used by the application. Fonts, brushes, controls' styles, controls' template and even the application name is inside.
   • CollectionSummaryPage.xaml: this is the page which display the details/summary of a collection.
   • DetailPage.xaml: this is the page which display the details of an item.
   • GroupedCollectionPage.xaml:this is the start page which display the collections.
   • Package.appxmanifest: this file defines how the application will be displayed in the market place. It looks a lot like a Windows phone manifest file but with a nicer editor.
     
     Application: This is a plain application template. So you can make/develop either a grid or split application.
     
     
4. Split Application: This is just like a Grid application but the mode of display will be vertical.

My First Metro App in Windows 8

Step 1:

Create an application using Visual Studio 2011. Here I named it MyFirstMetroApp.



Let us create a grid application.

Step 2:

Here, I am trying to use basic new data controls like Listbox and ListView controls.

When you create a project, you can see the following files.



The biggest advantage of leaving a ListBox in Metro is for backwards compatibility with existing XAML application platforms. However, moving to the new Windows 8 data controls like ListView, GridView, etc. does provide some advantages. Windows 8 data controls have inherent support for the type of visual feedback associated with touch apps. For example, a feature called snap grid causes the list to reposition a list item into view if you stopped panning when that list item is not fully in view. Another feature is inertia, where the grid keeps scrolling based on the speed of the pan.

Note: The new data/list controls have built-in behaviors, such as snap grid and inertia that are based on animations.

In addition to the visual feedback provided by the new Windows 8 controls, you also have more functionality exposed through the control's APIs. The ListView control derives from a new class, ListViewBase, and both ListViewBase and ListBox derived from Selector:

• Selector
• ListBox
• ListViewBase
• GridView
• ListView

Through ListViewBase, ListView gets new events, methods, and properties that help it provide the built-in support for a Metro look and feel.
By moving from ListBox to ListView, you essentially get all this new functionality for free. On top of that, you have API support to customize that behavior as you need.

Step 3:

When you run the application, you can see the grid application page as given bellow.



Since this Visual Studio is a preview version, it is not well organized. Because for the Grid Application, each page contains the same style blocks. It seems to be very clumsy for beginners.