Setting up Visual Studio11 Beta for Metro Application Creation

Just after next day of launching I installed Windows 8 Consumer Preview and VS1 Beta. And yes exactly like you, I were excited. After installation VS11 Beta looks like below,

clip_image002

After installation I was tempted to create Metro Application. So I browsed to create new project and found below installed project templates.

clip_image004

So essentially it got all the templates from VS2010 with addition of installed templates to create Metro applications. When first time I launched VS11, I set default language as C Sharp that is why you see Visual C# as first language in above image.

I wanted to create a metro application using HTML and JavaScript so I click on Other Language and then selected a Blank Application from installed template.

clip_image006

After pressing Ok I got message that I need Developer License for Windows 8 Consumer Preview. Off course I had no choice but to click on I Agree to proceed.

clip_image007

Then it asked me to authenticate.

clip_image008

After successful authentication I got message as below that I have developer license and its expiration date also.

clip_image009

In Solution explorer I noticed now WinJS reference files are inside the References folder and there is one X.509 certificate.

clip_image010

In later post I will investigate and discuss more on why this X.509 certificate is in the solution? Other files were same like default.html, default.js and package.appxmanifest file. I put a Hello World in the body.

clip_image011

Next you need to choose debugging environment. Either you can debug it on Simulator, Local Machine or Remote Machine

clip_image012

I selected Simulator and got the expected output in simulator as below,

clip_image014

Next I thought to open project in expression blend for that I right clicked on project and selected open in Expression Blend. In Expression Blend for the purpose of exploration, I dragged and dropped a DatePicker control from Asset on the Body of HTML page.

clip_image016

After adding DatePicker control, I noticed blend has added call to WinJS.UI.processAll function to process the controls.

clip_image018

On running I got DatePicker control as below in the simulator. I noticed that WinJS control has taken the default color of color I set for the Windows 8.

clip_image020

In this way we have set Visual Studio 11 to create metro apps. In further post I will get deeper into all other aspects and areas to create Metro Applications for Windows 8. I hope this post was useful. Thanks for reading.

 

Published by

Dhananjay Kumar

Dhananjay Kumar is Developer Evangelist for Infragistics. He is a 8 times Microsoft MVP and well respected Developer Advocate in India.He is the author of 900+ Blog Posts, and can often be found speaking around India at conferences and hosting free workshops for programmers across the country. So far, he has hosted 60 free workshops on various topics like JavaScript, Angular, WCF, ASP.NET MVC, C#, Azure etc. Follow him on twitter @debug_mode for all the updates about his blog posts and workshops. You can send him email at debugmode [at] outlook [dot] com

5 thoughts on “Setting up Visual Studio11 Beta for Metro Application Creation”

  1. Pingback: WindowsDevNews.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s