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?
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.
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 http://TrackerRealm.com.