Advertisements
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”
Step 1: Open VS 2011, expand the JavaScript template and create a new Metro Style Grid application project, as shown below:
Metro Style App
Step 2: The project structure will be as below:
Metro Style Project Explorer
In this structure, you will see CSS and JavaScript files in the ‘CSS’ and ‘js’ folder. You can also add your designed Logo in the ‘images’ folder.
Step 3: Open default.html and add the following Html UI control as below. You can add any business logic, but I will keep things simple and display only a date.
Metrostyle JavaScript
Step 4: In the ‘package.appxmanifest’, I have set the AppLogo and some settings, as shown below:
Step 5: Run the application and the result will be shown in the Emulator as shown below:
Click on ‘Click Me’ and the result will be as shown below:
In the Windows 8 Developer Preview, the above Metro Style App will be deployed in tile form as shown below: (Red Marked)
Conclusion: Windows Runtime (WinRT), provides mechanism for developing Metro Style Apps for all types of developers with their C#, JavaScript and VC++ expertise.
