WYSIWYG crutch

While I had two classes in college on HTML, I didn't really start producing sophisticated HTML until I was exposed to Macromedia Dreamweaver. With Dreamweaver's easy, GUI-based means of laying out tables, my game got better, and, years later, when it came to pass that tableless design was to replace table-based design as the in vogue, industry standard for laying out web pages, I had progressively learned enough HTML to be able to step away from the WYSIWYG crutch of Dreamweaver and venture into the waters of CSS without a comparable crutch. That said, Dreamweaver got me to where I am presently. I needed the crutch initially.

Presently, I'm learning a little XAML, and I am again finding the value in a WYSIWYG crutch. I found a means to design in Adobe Illustrator (which I have used for over a decade and am very comfortable with) and then export from Illustrator to XAML. I use and recommend Mike Swanson's XAMLExport which may be had at here: http://www.mikeswanson.com/XAMLExport

Here is an example of producing XAML with XAMLExport in sixteen steps.

One. To begin with I create a new Illustrator file and first consider what size I want the whole of the Silverlight movie I am to create to be. I decide I want my movie to by 300 pixels in width and 200 pixels in height. To prepare for this in Illustrator I'm going to make a rectangle which will serve as a background for the entire movie. To be sure the rectangle exports at the appropriate pixel dimensions, I: First, select the rectangle tool from the toolbar, and second click to create a rectangle instead of dragging out a rectangle freehand. In clicking, a dialog box appears requesting dimensions for the rectangle. I give 300 points for the width and 200 points for the height. When my Illustrator file is exported to XAML, point values will be cast to pixel values.

Two. My rectangle is created.

Three. Next I create a new layer in Illustrator and lay out some vector shapes on it. The image of the sun shown here would be a pain to write in XAML, but hours of work have become seconds of work with the help of Illustrator. (I'm building in Illustrator instead of Expression Blend as I'm already strong in Illustrator.)

Four. I want to add an image to my Silverlight movie. Unfortunately, there is no way to carry an image over to XAML with XAMLExport so I will instead make a rectangle to serve as a placeholder for the image. Again, dimensions are important, so I make a new layer, select the rectangle tool, and then click to type numeric values for rectangle dimensions.

Five. A rectangle is made.

Six. I decide I want my background to have a gradient fill and I give it one. The gradient effect will carry over to the XAML. At this point, I am done with my Illustrator file. I select Export... under the File menu and then pick XAML for Silverlight (*.XAML) as the "Save as type" value at the dialog box which appears. I save out a file with a .xaml extension.

Seven. I close Illustrator and open Visual Studio. I create a Silverlight movie. I open the default MainPage.xaml file that is made at the movie's generation.

Eight. I copy the contents of the .xaml file I made in Illustrator into the Grid control at MainPage.xaml. Ideally, I could make the d:DesignWidth and d:DesignHeight values in the UserControl tag match the 300 x 200 dimensions of my content at this point too.

Nine. I preview my movie. It works! Everything is lovely... well, save for the missing image.

Ten. Within the XAML, I look for the box to replace with an image. Every separate layer I made in Illustrator became a different Canvas in the XAML generated (with notes to clarify which layer was which). The individual shapes I made in Illustrator were cast to Paths. I find the Canvas that corresponds to "Layer 3" where I built my placeholder rectangle.

Eleven. I make a new Canvas below the "Layer 3" Canvas and I put an Image in the new Canvas.

Twelve. I test anew. Looks like my Image hugs the upper left corner of the Canvas it is in.

Thirteen. I add a Margin parameter to my new Canvas.

Fourteen. How did I know what values to use for the Margin? A closer look at the Data parameter for my placeholder box reveals four vertices. I find the number pair for the upper left corner and use the pair for the first two values in my Margin parameter. (The second two values can simply be zeros as they are extraneous given that the image will hug the upper left corner of the Canvas.)

Fifteen. I remove the "Layer 3" Canvas as I no longer need my placeholder. (I only needed the placeholder box to set the Margin parameter at the Canvas holding my Image.)

Sixteen. I preview my movie once more. All is well.