Windows 8 Metro Application Development

Introduction 

 
In this article, Windows 8 Metro Application Development. 
 
Great! Just a 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.
     
    MetroApp1.gif
     
  2. Once you click on the collection/item name, you will be presented with the collection of details.
     
    MetroApp2.gif
      
  3. Further click on item collection details, navigate to a particular item detail.
      
    MetroApp3.gif
     
    Default files
    • App.xaml- this file 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 that displays the details/summary of a collection.
    • DetailPage.xaml- this is the page that displays the details of an item.
    • GroupedCollectionPage.xaml- this is the start page which displays 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 the 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.
  
MetroApp4.gif
  
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.
  
MetroApp5.gif
  
The biggest advantage of leaving a ListBox in Metro is for backward 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 below.
  
MetroApp6.gif
  
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.
 

Summary 

 
In this article, we learned about Windows 8 Metro Application Development