Windows 8 Developers – Do you “Blend for Visual Studio”?

Newest release of Blend now supports UX authoring for Windows 8 store apps both in XAML and HTML. The good news is that if you are a Windows 8 store apps developer then you can make use of Blend for Visual Studio 2012 which is included as part of the Visual Studio 2012 installation. More to it – you get this cake even if you download the Visual Studio Express 2012 for Windows 8 which is of-course free!

Windows 8 store apps much like Windows phone compels a developer to follow the Metro Design Principles. “Metro” as it was formally known as; “Windows 8-style UI” from now on!. With the UX guidelines in place for Windows 8 app development, it is also important to have an UX authoring tool like Blend to be part of the developer’s machine along with Visual Studio.

Blend clearly is a tool for building awesome User Interface Design. Blend lets designers focus on design while letting developers focus on logic of the UI. Blend until the last release was specifically targeted for designing front-end XAML based interfaces for WPF and Silverlight. But “Blend for Visual Studio” has clear targets – Designing Windows 8 Store Apps in XAML/HTML. It adds support to some awesome Win 8 features like App Bars, Grid view and View States. It also supports native C++ app development.

Beyond providing simple XAML/HTML designers and editing support, Blend gives you tools that help you configure UI elements, author complex animation sequences(XAML),  create user controls from vector graphics(XAML), customize visual states(XAML) etc. In HTML it provides some cool way of editing Style Rules, CSS Properties, HTML attributes and Live DOM.

 

Getting Started with Blend:

Start a New Project and choose your design language first. If you are a web developer and starting a hands-on with Windows development then you can choose HTML and Javascript as your language. Like me if you are a XAML developer, then prefer XAML, you will feel at home.

Project Templates:

 

 

Blend provides you with templates to speed up your app development just like Visual Studio. Three important project templates available for both HTML and XAML are:

• Blank App – As the name – just a blank project. I almost always use this template and then add Item templates based on my project needs.
• Grid App – A project that displays groups of data in a grid format. If you are creating an app that displays group of items for e.g. a shopping app or a news app then start with this template. A grid app defaults to a home page that shows a list of groups – basically a set of items. When the user selects a particular group another page opens with group details which will have the list of items of the selected group.
• Split App – A project that displays a master/detail list. For e.g. News app that contains headlines on top and when clicked displays the full content.
  I almost always use Blank App as my project template and then add Item Templates based on my project need.

For HTML project there are two more templates you can make use of:

• Fixed Layout App – Fixed Layout provides similar template to Blank App except that its viewport is fixed. If you are building apps that has just one interface for e.g. a simple game in Javascript, then make this choice.
• Navigation App – Navigation App template contains Navigation Model which is recommended for Windows store apps. This template provides a home page by default. You can add more pages to it and make use of the navigation model to navigate between them.

Item Templates:

Item templates can be added anytime by clicking Project > Add New Item. Depending on your project type you will presented with items that corresponds to pages in your app.  

You can read more about Project templates and Item templates here.

Now that you have made your project choice, it is time to understand the Blend workspace. In my next blog post I will cover them.

-Nish-

@nishanil on twitter