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 1.1 Balloons

Pete Brown - 25 June 2007

I had to try out some code-based animation and dynamic controls tonight without messing up my much larger solution.

As it happens, my son absolutely loves balloons (beyond loves: he's obsessed - "balloon" was his first word outside of mama dada; I don't know if all 1 1/2 year olds are into them as much as him), especially this one site - pogo poppit - that has balloons floating up the screen on the intro page. He's only interested in the intro page, so we luckily never had to sign up for access and all the inevitable spam/spyware/whatever. 

I combined the two things and decided to bring that in-house and create my own quick and dirty simple Silverlight 1.1 version of the floating balloons. This project has one user control (the balloon), within which I dynamically set properties for size and color. I tried creating the animations completely from code, but it turns out that isn't possible yet in Silverlight (you have to put dummies in the xaml, or load a Xaml snippet using CreateFromXaml). That was one useful thing I learned from this.

This was a really quick project (I did it just this evening), which helps show you just how productive the toolset is, even in its alpha state. After figuring out that I couldn't create the animations from code, I spent the majority of the remaining time just tweaking the animations.

I took two animation approaches:

  1. Pure xaml animation: The cloud animation is all in the xaml
  2. Runtime-modified animation: The balloons have a stub animation in the balloon xaml file (the balloon is a user control). I set all the properties on that at runtime. The animation just as defined in the xaml is not usable without the code.

Other tidbits:

  • The balloons are vector images drawn in Expression Design. They are 100% xaml. I named one of the gradient stops so I could change the color at runtime. By keeping the specular highlight white, I didn't have to worry about keeping two gradient stops in sync. 
  • The clouds are simple PNGs, scaled in the Xaml file.
  • The blue gradient background is a page background, not something in silverlight
  • My original version had balloons out of control. When it got to about 120 balloons on my humble P4, the animation was definitely choking, so I put in some governing code. If you really want 300 balloons, convert the code to an xbap and take advantage of the hardware acceleration :)

You can run it here. Note that everything is sized for my wife's laptop's screen (1400x1050)

Silverlight Balloons

You can download the project and design files in a zip file here.

Feel free to take the code and modify it to try out other ideas. If you have questions, post them here and I'll try and answer. Remember, this was build in Silverlight 1.1, first alpha. If you are running this on a later version, it likely will break. In that case, check my blog to see if I have posted an updated version.

       
posted by Pete Brown on Monday, June 25, 2007
filed under:        

5 comments for “Silverlight 1.1 Balloons”

  1. Pete Brownsays:
    <p>BTW, I noticed this completely tanks my wife's machine (99% cpu while running). I'll have to check on that, as I haven't dug into it to see if the issue is the core animation in sL, object creation from my code, or something else. In any case, based on this, I will be wary of including any type of long running continuous animation in my main SL project.</p>
  2. Oskarsays:
    You think you had it bad - my poor wife had to hear "bayoo! bayoo! bayoo!" several months before she heard "mammy"...

    Now you need to let us click and pop the darn things, as stress relief for the rest of us.
  3. Binaryjamsays:
    Hope you don't mind I took your picture as used it when I referred to your blog.

    http://binaryjam.wordpress.com/2007/06/25/balloons/

    This comment can self distruct if you want it to.

Comment on this Post

Remember me

5 trackbacks for “Silverlight 1.1 Balloons”

  1. Pete Brown's Blogsays:
    I was concerned about the performance of Silverlight animation as uncovered in my balloons example .
  2. Pete Brown's Blogsays:
    I made a few quick updates to the Silverlight 1.1a Balloons example this weekend, and put the new version
  3. Pete Brown's Blogsays:
    As a follow-up to last night's CMAP presentation, here are some of the links I spoke about. My Blog
  4. Pete Brown's Blogsays:
    As a follow-up to last night's CMAP presentation, here are some of the links I spoke about. My Blog
  5. POKE 53280,0: Pete Brown's Blogsays:
    The Silverlight 1.1 July Alpha Refresh is out, and with it, I can release this post. This version of