Using Blend to Design HTML5 Windows 8 Application (Part I): Overview and Hello World

Are you looking for a HTML5/CSS authoring tool on Windows 8? Blend is the tool.

Blend helps simplify design tasks by providing an accurate design surface and powerful tools that let you visually create and edit HTML and CSS. It gives you great tools to create, edit and diagnose CSS, supporting some of the latest CSS standards, including CSS Grid, Gradients, Transitions, and media queries. It also is designed to handle app UX that makes heavy use of JavaScript to dynamically create and manipulate DOM elements. Using Interactive Mode you can even interact with the app on the design surface and bring it into states that are not reachable via markup at all.

In this blog series, you will get an overview of Blend and the great features it provides for allowing you to build great Windows applications.  This blog series will help you better understand the following:

  • · How to use Blend to visually style a grid-based Metro style app
  • · How to use Blend in Interactive Mode to style a run-time state
  • · How to use Blend to visually style a Metro style app in a variety of views and orientations
Some of the features in Blend
  • Visual design – Visually edit HTML, CSS, and Metro style controls. What you see in Blend is what users will see in Windows 8 Release Preview.
  • Interactive Mode – Design your app in states that would otherwise be available only at run time, without having to endlessly compile and run.
  • App building – Drag and drop Metro style controls onto the design surface, set their properties, and style them.
  • Powerful code generation – When you add a new style or element to an app, Blend takes care of all the syntax and generates concise, reliable, predictable code.
  • Debugging – Visual Studio can debug JavaScript, but only Blend lets you visually debug HTML and CSS. The Winning Properties virtual rule shows you the CSS cascade for any element. The Computed Values virtual rule shows you how Windows 8 will compute CSS property values for each element. The Live DOM panel updates to display run-time changes.

Install Blend

Blend is now included in Visual Studio 2012, including the free Express for Windows 8 version for authoring Win 8 store apps. With one fast download and install you get VS for your coding-centric tasks and Blend for visual authoring.

Before you install Blend , first you need to install Windows 8 on your system. You must run Blend on Windows 8 to develop Windows 8 store style apps. If you are running Blend on Windows 7, you can't develop Windows 8 style apps.

You can download the free Visual Studio 2012 Express for Windows 8, which includes Blend, or free trial versions of Visual Studio 2012 with Blend today. Visual Studio 2012 and Blend can also be downloaded from MSDN today if you’re an MSDN Subscriber.

Visual Studio 2012 and Blend


Difference between Windows 8 app vs Web App

A Windows 8 store style app built using HTML5, CSS3 and JavaScript, uses the same technology that a web site uses. However, a Windows 8 style app is not deployed page-by-page from a web server. Instead, it is installed locally on the user's computer. Like any native Windows application, a Metro style app built using HTML has direct access to the underlying platform and is able to share information with other applications.

First Hello World Application

A classic hello world example is always good to get start with. You will Learn the basics of the Blend UI and how to start working with the content creation and styling features you have available.  This demo is from Kirupa Chinnathambi at BlendInsider

More Blogs

In the next two blogs, we will be demonstrate how to create a lightweight, dynamic version of the memory game Windows 8 style application using HTML5/CSS3.

Using Blend to Design HTML5 Windows 8 Application (Part II): Style, Layout and Grid

Using Blend to Design HTML5 Windows 8 Application (Part III): Style Game Board, Cards, Support Different Device, View States

Comments (5)
  1. Malakie says:

    Too bad developers like me will NOT be coding for Windows 8.  What a piece of crap user interface for PC's…  Whomever decided on that had no common sense.   Do they really think people are going to just rush right on out and by touchscreens for their home computers?

  2. Christian says:

    What's the problem Malakie? People can use Windows 8 without touchsreen. I use it without touch and works like a charm!


  3. What's the problem Malakie? People can use Windows 8 without touchsreen. I use it without touch and works like a charm!


  4. I.G. Romov says:

    It's amazin', truly amazin'. Youda thunk the world ended not with ridiculous predicitions but with Win 8. Even the so-called experts rushed to judgment. Win 8 works just fine with a mouse and the Start menu LIVES although in a differently accessible manner (very easy BTW). Hats off to Microsoft. I believed the negative garbage unitl I loaded a test version. The ease with which either enviroment ("Metro" or desktop) is made available is amazin'. I'm sure the touchscreen experience will be cool but I don't know not having the wherewithal to get one right now. For now, I'm buying 3 Win 8 lics since, @39.99 per upgrade pop (yeah, I'm converting my Win 7 machines), it's a bargain. Hope you people carping try it before you carp or believe the negative garbage that's out there.

Comments are closed.

Skip to main content