Metro Style Apps using Visual Studio 2011 and Windows 8 (Developer Preview)
Posted by: Mahesh Sabnis
in Category Visual Studio
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.
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.
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:
After creating the application, you will get the following project structure:
Step 2: Double-Click on ‘Package.appxmanifest’ to view the application settings information as shown below:
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.
Step 4: Click on the ‘Declaration’ Tab and using this tab, you can add declarations for the application:
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:
Step 6: Open MainPage.Xaml, add a ListBox and use the Databinding expression as shown below:
Step 7: Run the application and you will get the following output in the Emulator:
The entire source code of this article can be downloaded over here