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:

Blend-for-Visual-Studio-Workspace

There are two default workspaces in Blend

  • Deign 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

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

Blend-for-Visual-StudioNewest 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-for-Visial-Studio-New-Project-XAML-HTML

 

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:
    Blend-for-Visual-Studio-Item-Template
    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-

Windows 8 on VirtualBox– File Sharing(Guest Additions doesn’t work)

Guest Additions on Virtual Box can be installed by changing compatibility to Windows 7 but that doesn’t mean it can be made to work. Yeah that’s where I too got stuck and my hunt for a fix to it also stopped when I read this forum.

I found few others who have tried complicated file sharing techniques, for e.g. they  created a secondary virtual hard drive and put files into it. However being working on Windows for more than a decade, I do believe there should be a simple way to achieve it. After all they are two different windows machines on the network.

Well what would you do to access a share drive on another system? Start->Run-> and type “\\machine-name\share” and hit enter?  That wouldn’t work because your host machine name will not be recognized by your virtual machine since they are on a different network group.

Now here is the solution: Go ahead and figure out the IP address of your host machine(ipconfig) and try accessing the share by its IP address instead of the machine name. That works!

 

Access

Things are simple, we complicate it most of the time.

 

/* Nish */

Hello Windows 8 world–Installation on a Virtual Machine

2009 was the year I wrote a post on Installing Windows 7 on VMware, and 2 years later with the same excitement here I am saying Hello to Windows 8. This time I am not elaborating on the installation but yes will share some interesting posts already on it.

Few approaches:

Installing Windows 8 Developer Preview in a virtual machine. – I did this, it worked for me!

Step by step instructions to install Windows 8 successfully on VMWare Workstation 8

Installing Windows 8 Developer Preview as bootable VHD” – It yields much better performance, this will be my next shot!

Before I decided to install it on the Virtual Box, I gave an attempt on the Windows Virtual PC which came pre-installed with my OS (if Windows XP Mode is enabled). But then the Win 8 version I wanted to install was a 64 bit developer preview and unfortunately Virtual PC does not support 64bit guest OS. You will get this error “This 64-bit application couldn’t load because your PC doesn’t have a 64-bit processor”.

Installation on a VirtualBox was a different experience for me – BSODs and Graphical driver crash. No you may not face this because unlike me; you would never attempt to run a Virtual PC in parallel with a Virtual Box Smile.

One important thing to do before you install is to check, if your processor supports Virtualization and enable it in your BIOS. If not you will get this error “Failed to start virtual machine (name of machine) VT-x is not available” when you start the VM.

If you are using an Intel Processor, check its specification at ark.intel.com, Intel Virtualization technology(VT-X) should be supported.

image

By default these features are disabled, so enable these from your BIOS settings.

Go ahead and complete your installation:

287664_10150801452540713_520785712_20554375_1592634805_o

I must say this before I conclude this post – “Win 8 without a touch monitor on a VM is just a Win 7 with painful experience!” If you are a developer and you want your machine to respond as per your original hardware then do a clean install or use a VHD!.

Some interesting links:

Windows Developer Preview Guide

Metro Style App Examples

WinRT Capabilities

Note: Please read the disclaimer on my page before you get started.

/*Nish*/