Now that you have your copy of Visual Studio 2012 including Blend, you must be raring to go and explore the world of Windows 8 development. We hope this post helps all the C#/VB & C++ junkies out there get started pronto on creating amazing apps for the Windows Store.

Who doesn’t like food? Trying to find the perfect recipe to cook for dinner is a decision we battle every day, so one of our sister teams in Microsoft had created this awesome Contoso Cookbook sample app. For the purposes of this post we will take this much loved sample application already oozing with design goodness and add a bit more styling and flair to it.

Download the Contoso sample app uploaded to accompany this tutorial.

Contoso Cookbook Sample

Contoso After a bit of styling with XAML design tools

All we did to style this page was 4 things:

1. Add a more vibrant background.
2. Edit the style of Items in the list of recipes (a.k.a ItemTemplate of the GridView).
3. Edit the style of the Group (a.k.a GroupStyle of the GridView).
4. Added a snazzy Windows 8 animation to the background image.

Changing the background

The below video demonstrates some aspects of designing layout in Blend and working with a wide variety of brushes.

Tips & Tricks

• Did you know Blend enables you to do Brush Transforms using the Brush Transform tool?
• You can even select colors from a snapped Windows Store app using Blend’s eyedropper tool. Try it out.
• Visual Studio now has a good picture editor built in. Double click on any image to open it in the picture editor.
• Check out CTRL+0, it’s the single best designer shortcut you can learn.

Learn how to work with brushes , resources, layout & the eyedropper tool.

Editing an Item Template

The below video demonstrates some aspects of working with Item Templates in XAML tools.

Tips & Tricks

• Changing the panel type in an ItemsPanelTemplate can be hard because the platform sometimes throws an exception if you delete and try adding a new panel type. A better way to do it is to use the Change Layout Command in the context menu of the panel to change to panel type to the one you want.
• Did you know you can use the data binding dialog in both Blend & VS even if you set the DataContext in the code-behind? Hint: set the property d:DataContext which is completely supported by our intelliSense and the data binding dialog will now treat it as the data context of the scope during design time and leave the runtime behavior unchanged).

Learn about designing templates, resource scoping & management.

Editing a GroupStyle

The below video demonstrates some aspects of working with states & GroupStyles in XAML tools.

Tips & Tricks

In case you have multiple GroupStyles and you would like to design them all in the designer, you can use the Collection Editor of the GroupStyle property and move the desired GroupStyle to index 0 and then you can use the Edit GroupStyle command to design that style to your heart’s content.

Learn about designing GroupStyles.

Working with the Windows 8 animation library

Tips & Tricks

• Did you know that you can copy one state to another? Try out the CopyState command in the States pane, which you can access by bringing up the context menu on a state, this is a huge productivity booster.
• Blend enables you to create in-state animations, e.g. pulsing a button when selected by using the Objects & Timeline pane. While in a state select the timeline icon in Objects & Timeline panel to start creating in state animations.

Learn about ThemeAnimations & ThemeTransitions.

Designing View States

The below video demonstrates some aspects of working with view states in Blend.

Tips & Tricks

• Did you know that the BasicPage Item Template in the Add new item dialog has built in View state awareness?

Learn more about working with  Application View States.

Thanks,
Harikrishna Menon, Blend Program Manager