We have compiled a great resource of Visual Studio 11 Beta in our previous post, now it’s time to know all about its sibling: Blend for Microsoft Visual Studio 11 Beta. It is a WYSIWYG design tool that helps you create Metro style apps using both HTML-CSS-JavaScript or classic XAML. Blend is designed to work seamlessly with Microsoft Visual Studio 11 Express Beta. Metro style app projects can move seamlessly back and forth between Blend and Visual Studio, making it possible for designers and developers to work on the same application in their preferred development environment.

Before you start developing apps using Blend for VS 11 Beta, first thing you need to know: you must run Blend on Windows 8 Consumer Preview to develop Metro style apps. If you are running Blend on Windows 7, using current Beta release,  you can’t develop Metro style apps.

Get the Blend Developer Preview, and.. get started!

First look at the new Blend Beta, the default workspace will be familiar to Blend users: the artboard, panels, workspace configurations, authoring views, and menus. For new users, although the general layout of the workspace looks the same regardless of what kind of project you are working on, the specific panels that are available will change slightly depending on the type of project that you choose.

		Document tabs – Shows all the project documents that are currently open, including HTML, CSS, and JavaScript files.
		View controls - Provides three options to control your app: Interactive mode Use interactive mode to trigger different states in your app, which you can then style. Error indicator Lets you know if there are errors in your app and displays the error list in the Results panel. Refresh Use Refresh to restore your app to its initial state before any state changes you made using interactive mode.
		Views – Displays one of three real-time authoring environments: Design view Use Design view to author documents by using a visual representation on the artboard. Code view Use Code view to author HTML, CSS, and JavaScript. Split view Displays both Code and Design view. You can also change the orientation of the windows using the Split View Orientation item on the View menu.

Learn more about the Blend workspace for Metro style apps built using HTML.

What’s New in Blend for VS 11 Beta :

The first noticable changes in this Beta release of Blend is the addition of the new platform development to create metro style apps using HTML or XAML. When we choose to create new project, by default it selects to create “Grid Application”, which is a multi-page project for a Windows Metro style app that navigates among groups of items, with dedicated pages that display group and item details. This is a very useful basic template in which developers could easily jump right in and modify. Other pre-built template also includes “Split Application”, “Class Library”, and “Unit Test Library”.

As for the HTML project itself, these are the files and folders that are automatically generated by default once you create new project:

• References   A folder that holds the read-only CSS and Windows Libraries for JavaScript.
• css   A folder that holds any custom CSS files used by your app.
• images   A folder that holds image assets for your app.
• js   A folder that holds your customized JavaScript files.
• default.html   The default starting page of your app.
• package.appxmanifest   A file that lists your app and its assets. This file also defines the starting page of your app.

To start designing your first Metro style app built using HTML, see Design your first Metro style app built using HTML.

Aside from the support for major platform development, there are also few minor changes on the interface, including things like :

1. Icons on the left panel are styled the same way as the icons in VS 11 Beta, and a bit smaller too.
2. You can change the sorting priorities in the ‘Properties’ pane, and arrange them by ‘Category’, ‘Name’ or ‘Source’.
3. In various context menus, ‘View XAML’  is renamed to ‘View Code’.
4. Grid editing have become a lot easier. To add, move or modify row/cols in grid you can just hover and click in the designer view to change its settings. When moving rows or columns around, the contents will move along as well.

Bookmark This!

• A very recommended site: Blend Insider.
• Tutorials and Learning Resources
• Sample Code and Projects
• Metro UI/UX Design Guidelines
• Discussion Forums

Videos on Channel 9 :

• A deep dive into Expression Blend for designing Metro style Apps with HTML
• Stand out with styling in your HTML app
• Create reusable custom Metro style controls

Sample Tutorials:

Memory Game Tutorial:  Create a Game in Blend using JavaScript, HTML5, and CSS (download sample code here)

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS
Blend Tutorial Part 2: Create the Project—Memory Game
Blend Tutorial Part 3: Add a Style Sheet—Memory Game
Blend Tutorial Part 4: Create a Flexible Layout—Memory Game
Blend Tutorial Part 5: Align Content to The Grid—Memory Game
Blend Tutorial Part 6: Style the Game Board—Memory Game
Blend Tutorial Part 7: Style the Cards—Memory Game
Blend Tutorial Part 8: Add CSS Transitions—Memory Game
Blend Tutorial Part 9: Build and Run Your App—Memory Game