Software Projects 
Home | Software Projects | .NET | Web Projects | Résumé | Site Map | Contact
Site Map | Contact
Software Projects > SketchUI
 

Downloads

SketchUI 0.1 (0.82 MB)
(Visual Studio 2005 Project)

Reference

Guide coming soon

SketchUI

So you ask, "What is SketchUI?" Interestingly enough, SketchUI is the result of a joke by Rob Relyea in a Channel 9video combined with the great work by Mike Swanson on his Adobe® Illustrator® to Avalon/XAML Export and yours truly putting one and one together.

During the Channel 9 "An hour with the Avalon Team" video with Pablo Fernicola [Group Program Manager] , Rob Relyea [Lead Program Manager], and Arik Cohen [Lead Program Manager], Rob Relyea sketched the XAML User Interface he was about to create.

To sketch his design, Rob relied on the trusty MSPaint; crude and yet effective. Once done with the design he jokingly drops down the file menu towards the Save As option and suggests that ideally it would be possible to directly "Save As XAML" from Paint. [video - 19:00]

Rob doesn't really expect this to happen since it wouldn't make much sense for designers to use a tool as crude as MSPaint.

I thought it would be cool to create a way to convert Rob's sketch into actual XAML code, but like all those taking part in the video, I found the thought simply amusing. In addition I had no idea how I can easily analyze an image in a way that would allow me to interpret it as UI Elements.

And the thought passed.

A few weeks later I watched yet another Channel 9 video "Adobe Illustrator to XAML converter" where Mike Swanson shows off his Illustrator® plug-in that exports an Illustrator® drawing as XAML code. His tool is simply amazing, the fidelity it provides is astounding and it would surely be used by many artists to bring their artwork into XAML based applications. This somehow reminded me of Rob's comments, and it hit me: "Maybe it's too complicated to parse a bitmap and convert it into a UI, but it wouldn't be too hard for me to read a XAML representation of an Illustrator® drawing".

All I knew at the time was that XAML is XML and I can parse and read XML easily. It turned out I can do much more with XAML through the .NET framework but I'll leave the implementation details until later.

So how exactly do you use the SketchUI? Quite simply in fact:

1

You start out by drawing using Illustrator®. You must follow the illustration guide provided; otherwise SketchUI will not understand your sketch.

2

Using Mike Swanson's Adobe® Illustrator® to Avalon/XAML Export, save your illustration in XAML representation.

3

You must then use SketchUI to open the XAML file generated in the previous step. The application will try to create a hierarchy of the various components drawn. Once this is done, it will then try to figure what each n ode within this hierarchy represents. This logic is described within the differentiation section of the reference guide. Once the application is done it will open the file that it saved, which is located at the same place as the source file with the _UI suffix.

4

At this point you can copy the XAML generated by SketchUI and paste it within XAMLPad. The result should be the same as what you have drawn in Illustrator®. Note that any discrepancies are probably due to a problem with the initial image. Make sure you followed the rules in the guide.