Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Silverlight Balloons for Silverlight 2 Beta 1

Pete Brown - 05 March 2008

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();


    timer.Interval = TimeSpan.FromSeconds(0.5);
    timer.Tick += new EventHandler(timer_Tick);
void timer_Tick(object sender, EventArgs e)
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.

posted by Pete Brown on Wednesday, March 5, 2008
filed under:      

11 comments for “Silverlight Balloons for Silverlight 2 Beta 1”

  1. Tomsays:
    Thanks for the wonderful description of updating 1.1 code to run on the new beta, and also for sharing your code. I really like this demo app, but one thing kind of scares me a little, and I see this with a lot of Silverlight apps. The CPU usage is very high. In your demo it starts off reasonably low, then ends up almost maxxing out both cores of a Core 2 Duo @ 2.1GHz as it reaches a steady state of balloon density with a SL client area of only around 1024x768.

    I realize this is just a demo app, the first beta of SL 2.0, and so on, and you mentioned performance being far from locked down. I was just wondering if you anticipate a significant boost in rendering speed within SL, or if you see some major optimization opportunities for this demo at the application level. (Or maybe you intended for it to use this much CPU?)
  2. Pete Brownsays:
    I'm actually surprised that you see that performance on your machine. I ran it on a dual core 3ghz (running at 3.6) on 32 bit Vista Ultimate at home, and saw the performance stay pretty steady even when running it for quite some time. I also tried it out here at MIX in one of the electric alley PCs, which are defintely nothing special.

    Now, there are some things I did in this that are far from ideal. For example, I didn't reuse the balloon usercontrols: I create new ones and destroy old ones. That is far from ideal given the gc activity that will result from that. I'm also animating a number of alpha blended objects and animating the background: IOW, I tried to build an over-the-top look at animation. In a typical application, you won't have that many animations on-screen unless maybe you are writing a game. If a game, you'll be used to doing all sorts of things to eek performance out anyway, as that is the norm on aly platform :)

    I would expect peformance to continually be tweaked and adjusted/improved up to RTM and then beyond.

    Now, that all being said, if your machine is responsive, high CPU utilization is not always a bad thing - after all, that's what the CPU is there for. It's only when you start tanking the browser or make it so you can't use other applications that you need to be truly concerned.

  3. Pete Brownsays:
    So, I ran this on my wife's laptop and saw that it did indeed use a very large percentage of CPU the entire time it was running.

    There are some changes I can make that will likely improve performance a bit. I'll try a few things out and post an update if they improve performance.

  4. Scott Conradsays:
    I think it is because the balloons aren't being garbage collected. You are removing them from the canvas, but I am not sure the balloon objects are being removed :)

    My computer is a Q6600 4 core 4 gigs of ram vista 64. With this page open and the balloon in another tab currently hidden, CPU usage is 4,5,6,5 respectively with AV running. When i show the tab that has the animation running, I get 32,45,17,32. This shows that it is multithreaded to take advantage of multiple cores, but that is pretty high for what you are doing. Definitely not your fault. Also, the cpu is switching from 1800hmz a core to 2700mhz per core and still pulling that percentage utilization.

    Actually I just took a minute and on your floatstoryboard completed method i added this to the end:

    sender = null;
    floatStoryboard = null;
    target = null;

    It lopped 12% off the utilization off each core :)

    Hope this helps.
    if you want to email it is scott dot conrad + "s" @ g mail. co m

    Have a great day.
  5. Pete Brownsays:
    Hi Scott, thanks for the feedback.

    Your post got me to thinking: I'll double-check my code when I get back, but it may be that I neglected to remove the storyboards and/or the hash, and therefore there are references around. Makes sense.

    If I'm doing all that and they still aren't being collected, might be a good bug report. Setting to null shouldn't be required.

    Thanks again!

  6. Scott Conradsays:
    Hey Pete, i checked it again today, and settings the things to null really made a difference. Apparently the garbage collector isn't working as well as we would think it would :). I found out that the garbage collector is effectively asked to work in C# 3.0 CLR or compiler or whatever when we set things to null, so i figured I would give that a shot. I read Jesse Liberty's book on C# 3.0, and although it is catching a fair amount of criticism on amazon, it really is a good book. He taught me a few things about the garbage collector which I put to use in the example you posted here.

    I would post a bug report, but you being a MVP might get it looked at a big better. I have also been playing around with making a clone of Vertigo's slideshow impelementation, and I found that if you add an external Silverlight control on the page loaded event, any animation that is not hooked into the constructor will have a ghost object left. I was attempting to emulate(and have since) coverflow in silverlight, and the scale animation on an image control that has an opacity mask will in fact leave a ghost of the original image, solely based on how the control is added to the control that is adding the control in the page loaded event. My email was stated above, and if you need further info, please let me know :)

    -Scott Conrad
  7. Pete Brownsays:
    Thanks Scott

    I'll definitely try out some changes on my side and see what effect they have.

    If you do run across any bugs, a great place to post them is on silverlight.net. The product team does see those reports:



Comment on this Post

Remember me

2 trackbacks for “Silverlight Balloons for Silverlight 2 Beta 1”

  1. Community Blogssays:
    Jesse Liberty on where to get started in SL2, Brad Abrams exposes new SL2 control skins, Ralf Rottmann
  2. Community Blogssays:
    Jesse Liberty on where to get started in SL2, Brad Abrams exposes new SL2 control skins, Ralf Rottmann