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.
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:
- css A folder that holds any custom CSS files used by your app.
- images A folder that holds image assets for your app.
- 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 :
- Icons on the left panel are styled the same way as the icons in VS 11 Beta, and a bit smaller too.
- You can change the sorting priorities in the ‘Properties’ pane, and arrange them by ‘Category’, ‘Name’ or ‘Source’.
- In various context menus, ‘View XAML’ is renamed to ‘View Code’.
- 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.
- 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
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