The first real demo I did for Silverlight 1.1a was the Silverlight Balloons demo. I ended up building upon it a bit over time, as my son (now two years old) absolutely loved seeing the balloons float up the screen.

Well, since Silverlight 1.1a code no longer works on any PC in my house, I figured I'd better hop to it and update the examples :) (as an aside, by the time you read this, I likely will have archived all my Silverlight 1.1 alpha samples, so you won't find them on the server any more; the source is still available in the blog postings that reference it)

Differences from the 1.1a Approach

As I wasn't doing much of anything complicated in this demo, it is surprisingly similar to the 1.1 alpha code. The basic approach (balloons are instances of usercontrols) hasn't changed. There are some welcome differences, however.

Animation and Instantiating Balloons

One great difference was that I could build all the animations for the balloons using only code. In 1.1a, you had to create strings of xaml and use those in combination with (or instead of) code. Eliminating the strings definitely improves the code.

When I wrote this post, I hadn't yet put in the pop animation or the sway that appeared in the later 1.1a versions. I'll likely put that back in later.

I also added a gratuitous background animation that slowly modifies the gradient for the sky. :)

And, of course, we have a DispatcherTimer this time around, so no zero-length (or short-length) storyboards getting in the way.

void Page_Loaded(object sender, RoutedEventArgs e)
{
    DispatcherTimer timer = new DispatcherTimer();

    BackgroundColorStoryboard.Begin();

    timer.Interval = TimeSpan.FromSeconds(0.5);
    timer.Tick += new EventHandler(timer_Tick);
    timer.Start();
}

void timer_Tick(object sender, EventArgs e)
{
    LaunchBalloon();
}

Resizing Code

Another welcome change is the complete elimination of any resizing code. I didn't have to hook into any host resize events, I simply declined to specify an absolute size for the controls, and let the Grid in the page handle the resizing. No code at all, just as it should be (of course, due to browser limitations, you still need to change the width of the browser to see any resizing, the browser doesn't notify when just the height changes)

        // hey, where did the resizing code go?

I handled that by nesting a Canvas named "Sky" into the layout root: a 1x1 grid.

Color Generation

I changed the algorithm I used for setting the balloon color. Balloon colors should be bright, cheerful and highly saturated in most cases. It can be pretty hard to randomize colors with those attributes using just the RGB space, so I found an HSL to RBG algorithm and called that in the code. Originally, I had that as an extension method on the color struct, but I ran into some issues with that. The code that sets the color now looks like this:

Color color = ColorExtensions.ColorFromHsl(_rnd.Next(0, 10000) / 10000.0D, 1, 0.65);
color.A = (byte)(255 - (byte)(100 * scaleFactor));

HSL lets me randomize the hue while allowing me to fix the saturation and brightness. Net result: bright, colorful balloons. You can use this same technique if you want to do something like offer pseudo-3d shading for shapes/boxes where one side is bright, one is regular and one is dark.

You can see I also vary the alpha based on the scaleFactor. Close balloons are bigger and more transparent. Balloons far away are smaller and more opaque.

Better Performance

Finally, I have a boatload more balloons on the screen. Remember, this is Beta 1 code, so performance is far from locked down and features are still subject to change. That said, I'm really pleased with what I see in Beta 1.

Try it Out

You'll need to install Silverlight 2 Beta 1 before you try this out (I didn't include an install experience in this sample). Also, ignore the "click to activate"; as I didn't use the usual instantiation methods that avoid that.

To download the source, click here.

To run the application, click here.