Creating the Dynamics CRM 2011 Ribbon in Expression Blend 4 Sketchflow

Paul Nieuwelaar, 24 November 2010

In my last post on the All New Dynamics CRM 2011 Stencils I mentioned that I would be working on created a set of Microsoft Dynamics CRM 2011 stencils, to be used inside of Microsoft Expression Blend 4 Sketchflow so that you can create your entities and customization in Blend, before performing them live on your CRM.

I wanted to start by building the account form, so I started at the top, and created the ribbon first. This is what the real Dynamics CRM 2011 ribbon looks like:

So I wanted it to look as much like that as possible. Only with a black and white, sketchy look.

Because Expression Blend 4 Sketchflow is a prototyping software, I wanted to make the ribbon as functional as possible. Basically I wanted to use the built in tab control in Sketchflow, so that you can click through the different tabs of the ribbon.

Now all I needed was to draw each of the icons on the ribbon (including the Create Related and Customize tabs). To keep with the sketchy look, I created each icon in Expression Blend 4 Sketchflow, using mainly the rectangle and circle tools. Here is what one of the icons look like drawn in Expression Blend 4, beside the real thing.

It was just a matter of time then to create all the icons, and possition them correctly on the ribbon. I renamed the tabs to their correct names, and added in the file menu, and then it was ready to go. I’ve added some images below of the tabs compared to the real thing.

You are able to click through the tabs on the ribbon just like the real thing. I’ve also added tooltips for when you hover over each icon. I’ve created a sample project which you can view live here, so you can see exactly how it works.

The full stencils are expected to be available on our website from December 1^st 2010, but if you are interested then contact us today, or leave a comment on this post and I’ll make sure you’re the first to know when they become available.