Blend for Visual Studio Workspace (XAML)

In my previous post, I  introduced you to Blend for Visual Studio and talked about Project templates and Item templates. Now that you are set with your templates its time to understand blend workspace better. This is going to be your playground for designing and creating some stunning animations. This post will concentrate on the workspace that Blend provides when your project is in XAML.

 

Blend Workspace:

There are two default workspaces in Blend

• Design Workspace
• Animation Workspace

You can switch between the two by clicking on Window > Workspaces or by Ctrl+F11. These workspaces are customizable so you can change panel orientation, dock or float , or resize panels as per your need. You can also change the theme of the entire workspace by clicking Tools > Options > Workspace > Theme.

Panels:

Tools Panel

Tools panel contains the most handy tools for designing the UI elements. Some tools that are included are Selection, Direct Selection, Pan, Zoom, Eyedropper, Paint Bucket, etc.. You will notice that some of the section in tools panel have a small white triangle on the lower right corner. This is an indication that if you click and hold you will get additional option of related tools.

Assets Panel

Assets panel lists all the controls, styles, shapes, media, categories, and locations. Controls in assets also include Windows 8 specific controls like AppBar, GridView, FlipView etc. The search box in the assets panel is a handy feature. Alternatively you can access the Assets panel from the tools panel(the last button), it will contain your recently accessed assets.

Artboard:

Artboard is your work surface where you visually design a page of your application. On the top right corner you will find the view buttons. Use these to switch between Design, Code,  and split views. On the bottom left corner you will find Artboard controls like Zoom, Show snap grid, Snap to gridlines and Turn off snapping to snaplines. Learn more about snapping here.

Objects and Timeline Panel:

Objects and Timeline panel helps you in viewing the hierarchical structure of objects in the artboard. You can modify them directly by dragging them from one position and dropping them to the desired position to form the intended structure. You can add animation to your application by simply creating a new Storyboard by clicking the + button. Storyboards are containers that hold animation timelines. Learn more about adding animations here.

Properties Panel:

If you are a Visual Studio developer then Properties panel is not a new thing to you! It is the place where you view and modify properties of an object that is selected on the artboard.

Few other panels, you should know about:

• Projects Panel – Lists all the information about your project. Similar to Visual Studio Solutions Explorer
• Resources Panel – Lists all the resources that are used in the current project. You can drag the resource to the artboard to apply them to an object
• Results Panel – Results panel consists of two tabs. Error Tab – Displays build and parse errors. Output Tab – Provides build information when you build, rebuild, clean or test a project.

Summary

Windows 8 has been reimagined from chipset to the user experience and hence it demands every store app developers to follow strict UI design principles. Blend is a great tool to start with. It helps you design stunning apps and also eases out in wiring up animations. So go ahead sweat the details and create a fast & fluid app.

-Nish-

@nishanil on twitter