Search

Recently, I was invited to speak at a Portland Silverlight user group meeting about designing great application experiences using Silverlight and Blend, and in doing so I demonstrated a lot of the cool new capabilities that Blend provides for easily creating transitions, animations, and effects. The meeting was a lot of fun, and I covered a lot, so I thought I would review some of what was discussed at the meeting on my blog. I'm breaking the post into two parts; the first part will address application themes, simple page transitions, Blend shapes, and master-details transitions, and the second part will address path ListBox, built in Blend pixel shaders for use in state changes, and fluid layout.

Artefact Animator provides an easy to use framework for procedural time-based animations in Silverlight and WPF. Download the latest version from http://artefactanimator.codeplex.com/.

Inspired by the Flash community and forged out of frustration, Artefact Animator brings to WPF and Silverlight what Tweener has done for Flash. If you’ve ever tried to get into animation in C# you’ll soon realize there are way too many steps to get you where you need to be. The consequences are that developers don’t love to animate UI and designers are limited by what they can animate when working with dynamic content. 

Windows Presentation Foundation (WPF) supports browser-style navigation that can be used in two types of applications: standalone applications and XAML browser applications (XBAPs). To package content for navigation, WPF provides the Page class [MSDN]. The WPF support of page navigation is very similar to the page navigation in the web. Each page has its own content and each page can contain hyperlinks to point to other pages similar to the web. But unlike the web, WPF has great build in support for animations.

A recurring problem with MVVM is how to incorporate animations in a nice MVVM way. The problem is that StoryBoards need to be started from the view, since they are usually configured in XAML. This means that the ViewModel needs a reference to the view, in order to tell it when the animation should start. Keeping a reference from the ViewModel to the View is obviously “not done” in the MVVM pattern.

I've had a few projects where it's been necessary to use animations to transition between "screens" in the application. While I use the visual state manager as often as I can for this, sometimes the transitions aren't really changing the state of the control itself, but simply animating the change of underlying data.

The PathListBox control is a cool new addition to the Blend 4 SDK, and allows the elements inside a ListBox to lay out along any Path control shape. You’ll need to install the Blend 4 SDK to get access to the PathListBox control, but note that this is available outside of Expression Blend 4 (you don’t need to purchase or install Blend 4).

One of the neat bonus features of the PathListBox is that you can animate the Path that it is bound to, and the items will follow the animation! This gives Silverlight functionality similar to the AnimationUsingPath class that WPF has had since .NET 3.0, and provides basic Motion Path Animation.

Silverlight provides a flexible animation engine that can be used to transform and manipulate objects in a timeline. While you can do nearly anything you’d like to objects using Storyboards things get a little tricky when you want to synchronize storyboards with audio or video files. There are several different approaches that can be taken to keep things in sync.

Buy from: