WPFBlog

Roto-what?!

Rotoscoping is a technique, patented by Max Fleischer in 1917, where animators trace live-action movement, frame by frame as in most Disney films. You make a series of drawings where something moves slightly in each subsequent drawing, then you play them back in sequence to make an animation.

Now why do I care about doing this type of animation in WPF? …I don’t. You see, the inspiration for this post came while I was googling something about WPF and LINQ. One of Josh Smith’s recent blog posts came up as a result and like I sometimes do, I got distracted long enough to have a read through the short entry.

Josh takes a collection of images he created and sequentially numbered, then uses a timer to run through the enumeration, setting each item as the source of an image element.

Here’s his video of the app in action:

While his solution works just fine, the fact that there was C# code in the background running the show made me a bit architecturally uneasy. I wondered if it would be possible to do the whole thing in XAML and leave the code behind to load the data and set the data context. Then I’d use data binding in the XAML file to handle the rest.

A couple hours later after stealing Josh’s images and the XAML below is the result:

The code-behind is reduced to loading and binding data as illustrated below:

I won’t go over the code in detail since there are plenty of comments in the code, however I will outline the technique by explaining the jist of the idea:

In order to make this work we bind our collection of images to a ListBox. Then we specify a style trigger hiding any unselected ListBoxItem (hint: this is all of them initially!).

Then we simply animate the SelectedIndex property of the ListBoxItem from 0 till the Count of the enumerable structure of datacontext data. As each is selected, it becomse Visible, then collapsed again when we move to the next SelectedIndex.

We kick it all off with a Window.Loaded event trigger and we’re done!

The source code to this solution is here.