Metro Style Apps using Visual Studio 2011 and Windows 8 (Developer Preview)

Posted by: Mahesh Sabnis , on 12/11/2011, in Category Visual Studio, VSTS & TFS
Views: 100951
Abstract: In this article, we will explore Windows Runtime (WinRT) which is designed for developing Metro Style Apps using Visual Studio 2011 and Windows 8 (Developer Preview)for developers having .NET, JavaScript and unmanaged C++ expertise.

Note: This article is based upon the Developer Preview of Visual Studio 2011 and Windows 8. The contents of this article may change with the final release  

Lately, I have been working on developing applications using Windows 8 and Visual Studio 2011. There are several new features introduced in Windows 8 Developer preview and Visual Studio 2011 developer preview. Out of these new features, I recently wrote two articles on developing applications using ASP.NET 4.5 with its new Model Binding feature and ASP.NET 4.5: Filtering using Model Binding in ASP.NET Web Forms.  

In this article, we will explore Windows Runtime (WinRT) which is designed for developing Metro Style Apps for developers having .NET, JavaScript and  unmanaged C++ expertise.  

Windows Runtime (WinRT)  

One of the cool features introduced with Visual Studio 2011 and Windows 8 (Developer Preview) is Metro Style Apps.  

 

Note: You have to install VS2011 developer preview on Windows 8 Developer Preview to get access to the template for Metro Style App.  

Metro Style Apps is handled by Windows Runtime (RT). The Windows Runtime is designed for developing metro style apps easily using the expertise that developers already have.

  • Web developers can make use of HTML 5, CSS 3 and JavaScript to develop web applications. The business logic of the application can be developed using JavaScript and make calls to WinRT system to access rich Hardware functionality.

  • MS.NET developers can make use of Extensible Application Markup Language (XAML), C#, VB.NET to develop Metro style application.

  • VC ++ developers can make use of DirecX and High Level Shader Language (HLSL).

For programming with WinRT for Metro Style Apps, any access rights to the user data and system resources, is checked by the Windows. These access rights are specified in the Package Manifest. A Metro Style application needs to send a quick response to the end-user and for this, Metro Style Apps make use of Asynchronous operations.

 What is a Metro Style App?

As Microsoft defines it “Metro style apps are full screen apps tailored to your users' needs, tailored to the device they run on, tailored for touch interaction, and tailored to the Windows user interface. Windows helps you interact with your users, and your users interact with your app

Creating Metro Style Apps using C#  

Step 1: Open VS2011 and create a new Windows Metro Style App as below:

Metro Style App Template

 After creating the application, you will get the following project structure:  

metro-project-structure

 Step 2: Double-Click on ‘Package.appxmanifest’ to view the application settings information as shown below:  

App Settings

 The above image shows information for the ‘Application UI’ e.g. Logo. Please note the Size restriction for the Logo image.  

Step 3: Click on the Capabilities tab and you will get the List of System Features that the application can use.  

Metro Style Capabilities

 Step 4: Click on the ‘Declaration’ Tab and using this tab, you can add declarations for the application:

 Metro Style Declaration Tab

 Similarly, the Packaging tab allows us to define properties that identity and describe your package for the application, when it is deployed.  

Step 5: In the MyApp application, add a new class file, name it as ‘DataClasses.cs’. Add the following classes in it:  

Metro Style Data Classes

 Step 6: Open MainPage.Xaml, add a ListBox and use the Databinding expression as shown below:  

Metro App DataBinding

 Step 7: Run the application and you will get the following output in the Emulator:  

Metro App Emulator

 That’s it! In this article, we saw how Windows Runtime (WinRT) can be used for developing Metro Style Apps for developers with their C# expertise. In this next article, we will see how to create metro style apps using JavaScript.

The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Mahesh is having 10 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel