Auto-code generation for Silverlight Controls

    Charles Wiebe and John Hansen (Ottawa, ON)

Silverlight offers designers a new degree of flexibility in creating vivid and exciting graphics for asp.net web pages. These web pages are described in the Silverlight dialect of Xaml (XML) and an excellent WISWIG tool called Expression Blend can be used to create the xaml files.

The major issue with Expression Blend is that it creates a static layout of the page. If want to use Silverlight and Expression Blend to display a set of images found in a folder then each image must added separately to the xaml code. Looking at the xaml file you see a pattern emerging for how the images are displayed on the control, but the question how do you take advantage of that repetition in the xaml file?

This article shows you how to build a control that automatically adds images from an image directory to the Silverlight control without resorting to complex Javascript coding techniques. This way, as images are added or deleted, they are automatically displayed. Alternatively, the same control can be used to display images from different image directories. (I like to encapsulate these controls in Web Parts. Then they can be added to any asp.net web page or SharePoint page. Specify the directory and voila, you have a reusable control.) There are a few ways to accomplish this trick – this article describes an approach that automatically writes xaml code file on the fly using a small tool we’ve created, called Code Creator.

Figure 1 is a sample Silverlight Control that shows a deck of images and a selected image. Images displayed in Silverlight controls are clearer, because .net 3.0 libraries connect directly to DirectX graphics software.

Mouse over an image in the card deck and the other images ‘move’ to display a non-overlapped image. Select an image from the card deck to display the image in the resizable area.

Figure 1: Sample Silverlight Control

Figure 2: xaml for Sample Silverlight Control (Image can be viewed by clicking the hyperlink)

Figure 2 shows the (simplified) xaml for the sample Silverlight control. (The xaml is simplified to show two images in the card deck instead of the displayed four.) Xaml code marked in blue is the first repeat in a list of code that repeats to display a different image with a unique name, top location and image source. There are two repeats, one for the displayed image and a second for the mouse over effect. Code marked in red emphasizes per image attribute values.

Note: the same technique is applied to the Javascript file to synchronize the xaml and Javascript to work together.

Objective: Let’s populate the card deck of images from a directory.

To do this programmatically using CodeCreator, we need to:

1. Repeat the image rectangle showing the x:Name, Canvas.Top and ImageSource attributes in the Card deck rectangle with unique image information.

2. Repeat the mouse over effect showing the x:Name, Storyboard.TargetName and To attributes in the BeginStoryboard block with unique image information.

Figure 3: xaml code for Sample Silverlight Control with Repeat blocks (Image can be viewed by clicking the hyperlink)

Figure 3 shows a view of the reduced Xaml markup with ‘Repeat’ blocks. Code Creator takes advantage of comment markup in the xaml. The Code Creator ‘namespace’ is cc and Keywords include: Repeat, RepeatEnd, Evaluate, Declare and Replace. The ‘$’ character is used to denote calculated variables used in the xaml.

The tool that automatically generates code is called Code Creator.

Code Creator details:
- few basic functions – Replace, Repeat, Declare, Evaluate
- Accepts data from XML or CLR objects (very much like WPF).
- Built primarily on
- “StringBuilder” class.
- Tiny Interpreter class.
Tiny Interpreter (C#)
- Implementation of “Gang of 4” interpreter class
- Uses 80 line method employing REGEX to tokenize string
- Less 1000 lines of C# code
- Evaluates mathematical and logical expressions

Charles and John are Microsoft .net designers at https://TrackerRealm.com .

Comments

• Anonymous
  July 13, 2007
  Auto-code generation for Silverlight Controls LIVE Mobile Search V2 released Expose Stored Procedures

• Anonymous
  July 13, 2007
  Auto-code generation for Silverlight Controls LIVE Mobile Search V2 released Expose Stored Procedures