Intro to Expression Blend (from a Front-End Developer's POV)

After a long time we finally have a cool and excellent tool from Microsoft. Expression Blend is a user interface design tool, that allows developers to create interfaces for desktop (WPF) and Web (Silverlight) applications.

Expression Blend is a very easy to use tool and here are some of its pros:

• Ability to import PSD or IA files from Adobe
  With this option you can easily import layered graphics from Adobe’s Suite – a huge pro for web developers that are accustomed to having to slice these files after the designer delivers them.
• Easily and intuitively create vector graphics and apply effects
  This cool interface is very easy for vectorial graphic creation – you don’t need to be an experimented Adobe user to work in this tool like a pro. Transparencies, gradients and much more with a few clicks…
• XAML code generation
  For some of you XAML is not that familiar, but this is just the code that Expression blend generates when you create elements on the design view. XAML is similar to XML, it works with tags with their own properties. The great thing about XAML is that you can easily export it from your Desktop app to your Web app in no time.
• Create Storyboards
  If you’re used to creating animations on Adobe’s Flash, great! This tool allows you to create animations in a blink of an eye. You have a similar workspace to create animations, your elements, and timeline, some default behaviors and a cool properties panel that’s very easy to use.
• Visual State Manager
  This is one of my favorite features. You can define states and record them super easy, for example, button pressed or button over, and with a simple drag and drop you can call to this states by selecting from a list all the possible user interactions (mouseOver, mouseDown, doubleClick, etc).
• Controls
  Great thing if you’re used to developing web… Expression Blend has a nice control collection that you can use out of the box (Progress Bar, Date Picker, Calendar, Buttons, etc.).
• Create User Controls
  The first time I used this tool I wasn’t too familiar with User Controls, but Expression Blend makes this task very easy. Once you’ve drawn your elements, you can just right click the container and crate a User Control, after you can set your visual states and animations and re-use your custom control wherever you want in your app.

One neat thing about Expression Blend is that it has the same project structure that a Visual Studio Project, so you can open the same project in both Environments. Backend developers can manipulate the code behind files, creating classes and methods, while front end developers can work at the same time on all the visual design and the user interaction.

Looks like I’m partial with Microsoft… not really, but I had to use Expression Blend for my latest project and it was a great experience. I really suggest you give it a try.

Ok, one con, so you can see I’m not on Microsoft's payroll:

• Styling user controls requires some know how, I had to read a bunch of blog post to be able to style a tab control. User controls use a templating system that is not that easy… But if you want to use default controls you’ll be in great shape pretty quick.