I have seen a number of implementations of animated film strip on websites and I’ve always wondered how it’s been done. Using Silverlight, I feel it’s pretty straightforward with the built-in animation API, but with normal HTML it becomes a non-trivial task, especially if everything is to be client side scripted. With my limited knowledge of JQuery, I decided to give that a go using ASP.NET 2.0.
WPF: Auto Arrange Animated Panel
March 20, 2009 — Ed FohMy attention has been diverted as of late, from WPF commands to trying to create something cool in WPF. I’ve been greatly inspired by Kevin Moore, with his WPF Bag of Tricks, especially his cool animated panel that can rearrange things inside. I looked through the code, and there were many things I did not understand. Being fustrated, it was a perfect opportunity to learn something new, at the same time building something fun. After all programming should be fun. 
Before I start talking about specifics, let’s look at the UI for this sample.
Please have a look at the demo video, I’m sure some of you will enjoy this.
The essential part of this sample is in the custom ArrangePanel class inherited from System.Windows.Controls.Panel. Before we go into that, there are some interesting things about WPF’s layout mechanism you should know about. WPF booasts a dynamic layout mechanism where controls should not be statically placed on the Window/Page, like how we tranditionally do in WinForms. The controls in the visual tree “talk” to each other before they decide how to lay themselves out . This happens in the FrameworkElement‘s MeasureOverride and ArrangeOverride methods. Here’s an illustration of this intent.
