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

Advertisements

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.