Metro Style Apps Control Initialization in XAML/C# & HTML5/JS


Version: This article is being written on 06/21/2012 using Windows 8 Release Preview as a reference. 

In Windows 8 Metro Style apps you have a number of choices for your markup and programming languages  You can choose the XAML markup language with C#, VB.NET or even C++.  You now also have the choice of using HTML5 as your markup language along with JavaScript as the programming language. Both XAML and HTML5 provide a way for you to define object instances in a declarative way. 

When creating Metro Style apps with XAML, we declare instances of objects defined in the family of Windows.UI.Xaml.Controls namespaces, as well as some others.  These namespaces are provided as part of the WIndows API for Metro Style apps, They are included with the Windows SDK which is automatically referenced by the Visual Studio project templates.

When creating HTML5/JS Metro Style apps, you can use the HTML5 markup to define either standard HTML5 elements (div,span,input,button, etc).  These standard HTML5 elements are the EXACT same elements you would use in a browser based application. With HTML5/JS Metro Style apps can also declare control instances from the WinJS.UI namespaces provided by the Windows API for Metro Style apps (AppBar, Flyout, ViewBox, etc), . the project templates provided with Visual Studio automatically reference the “WinJS” library.  This library is provided with the Windows 8 SDK (C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Microsoft.WinJS.1.0.RC\1.0\).  The WinJS library is made up of a number of individual JavaScript files, but one in particular (ui.js) includes control definitions for the JavaScript WinJS.UI namespace.  These controls provided features similar to those provided in the Windows.UI.Xaml.Controls namespace used by XAML developers.


Read the rest of this entry »

“Windows 8 for Software Developers” Event

This evening I’ll be at the Microsoft Store at Fashion Valley Mall here in San Diego for the San Diego Software Industries Council “Windows 8 for Software Developers” event. 

The event is free, but registration is required.  Register Here


I’ll be giving a quick presentation on Windows 8 development at the event.  You can grab a copy of my slides here

Converting “Cut the Rope” to an HTML5/JS game

In my HTML5/JS game journey today, I ran across a great article on how the Microsoft IE, Pixel Lab, and ZeptoLab teams ported the “Cut the Rope” application from an iOS app over to an HTML5/JS app.


Read the rest of this entry »

Getting started with Windows 8 Metro Style HTML5/JS Games…

I spent a fair amount of time over the past few months working with Windows Phone games using XNA.  With Windows 8, we now have the option of creating metro style games using HTML5/JS.  My recent history has focused more on XAML/C# apps using mostly Silverlight.  Although I have been working with HTML and the web since the beginning I’m not a very experienced JavaScript developer, and this will be my first attempt at creating Windows 8 Metro Style HTML5/JS apps of any kind.

I have a problem of wanting to blog things only after I have figured them out.  This time, I’m going to try a different approach and blog as I go.  That means I’ll probably have to correct myself at some point in the future.  But if you want to learn along with me, then you’ll have to experience the bumps and sharp turns with me as well. 

For this blog post I am just going to list links off to the resources I am using as I go through the learning process.  From my initial review, I think I will start looking at creating an HTML5/JS game using the “JavaScript and HTML5 touch game sample” from Microsoft.  Once I have completed that, I plan to start over using “EaselJS” which is part of the “CreateJS” suite.

Read the rest of this entry »

Installing the Windows Phone SDKs on Windows 8

If you have upgraded to the latest Windows 8 Release Preview, you may be asking if you can still develop Windows Phone applications.   Well, yes, you can!  There are just a few things to install:

If you want to use a full version of Visual Studio (not just the “Visual Studio Express for Windows Phone” that ships with the SDK), then start by installing Visual Studio 2010 SP1.  There are currently (today is 06/09/2012) no Windows Phone development tools for Visual Studio 2012 RC.  You don’t HAVE to install Visual Studio though because an express version is included with the Windows Phone SDK.

What to Install and in what order Where to Get it
01 – Games for Windows Live Client
02 – Windows Phone 7.1 SDK
03 – Windows Phone 7.1.1 SDK Update Windows Phone 7.1.1 SDK Update

For an explanation of the above….

Read the rest of this entry »

Configuring Windows 8 Release Preview for Azure Development

With Windows 8 Release Preview just coming out yesterday, I thought this might be a great time to give the developers that are just getting started with Windows 8 the tools they need to continue developing Windows Azure applications using Visual Studio 2010, but on their fancy new Windows 8 machines.

The following video walks you step by step through the process of configuring a clean Windows 8 Release Preview installation for Windows Azure development using VS 2010.  We also talk about installing the VS 2012 RC Express for Windows 8 so you can get started developing Metro Style applications as well.

Note, some people have had problems viewing the video in my blog entry. You can watch the video online here:

The video follows the basic steps outlined for Windows 8 Consumer Preview with the VS 2010 and the VS 11 beta, but updates it for the new release of tools.  As promised in the video, all the links referred to are below:

Read the rest of this entry »

Turning Windows 8 Live Tiles Off For Demos

Windows 8 live tiles ROCK.  They are an awesome way to keep up with emails, appointments, friends, etc.  However, if you are in front of a crowd doing a demo on Windows 8, or even just showing your new Windows 8 install off to friends and family, it may be undesirable to have your personal details show up on the screen:


It is super easy to turn the live tile’s off though (without having to actually remove it) to prevent any personal data from being shown to your audience.  Here’s how:

Read the rest of this entry »