July, 2009

  • File → New Project

    Sketch Styles without SketchFlow



    The new release of Expression Blend 3 comes with a great new feature called SketchFlow. SketchFlow allows you to rapidly create a prototype of your application that can be used to get buy-in from clients, and to get feedback on the design of the system without worrying on the details like which fonts you chose and the exact shade of blue your logo should be. One of the tools in the arsenal of SketchFlow is the Sketch Styles, formerly known as wiggly controls. The Sketch Styles give a real back of the napkin feel to your application, and really convey the idea of the fact that what you’re showing them is not complete. It helps to avoid those moments where you show your client your design, and get the response, “Looks great, let’s ship it.”

    When I first saw SketchFlow, I fell in love with the sketch styles. I wanted to use them in the Silverlight applications I was already working on, and had taken beyond the prototype stage. If you look in the User Guide inside of Blend, you can see an entry that shows you how to convert a SketchFlow application into a production project, but if you’re just interested in getting the Sketch Styles into your application, it is possible. For this example, I’ll be using a Silverlight application in the full version of Expression Blend 3. The process was a bit more difficult with the Release Candidate, but you should have upgraded by now anyway.

    The first step in getting Sketch Styles into your Silverlight application is to open a new Silverlight 3 SketchFlow Application, and the Silverlight 3 application you want to add the Sketch Styles to. If you don’t have an application you’re already working on, you can just start a new Silverlight 3 Application + Website.

    Prototype and Application 

    In the SketchFlow application, you’ll need to copy over the Fonts directory with the three fonts contained within, and the SketchStyles.xaml file. You’ll also need to add references to the Microsoft.Expression.Prototyping.SketchControls.dll and System.Windows.Controls.dll. By default they’ll be in your C:\Program Files\Microsoft SDKs\Expression\Blend 3\Prototyping\Libraries\Silverlight and C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client directories, respectfully.

    Required Files and References

    Once you’ve got those over, you’re done! Have fun with your Sketch Style enabled Silverlight application.

Page 1 of 1 (1 items)