Yes, this is a plug for some new WPF goodness from a third party. If you’re simply not interested in third-party products, you can stop reading now. 🙂

The good folks at IdentityMine have just released two new “mixes” of WPF controls under their blendables brand (as well as an updated version of their essentials mix). Both of the new products deal with layout… one targets 2D layout and one targets 3D layout. I haven’t played much with the 3D mix yet, but I have tinkered with the CTP version of the 2D layout mix quite a bit and it contains some definite WPF goodness. For those who are interested in seeing these products in action, a free trial version can be downloaded from blendables.com, including a suite of samples.

Partial Disclosure

Some have insinuated that I might be in the employment of the aforementioned IdentityMine. It is my policy to neither confirm nor deny any speculation regarding Mine Identity, but to instead encourage all rumors both near fetched and far (and I’ve heard some good ones!). Meanwhile, I try to keep my blog focused on WPF goodness, and there is definitely plenty in the newest products from IdentityMine.

In the interest of partial disclosure, I must admit that I know some members of the IdentityMine team, and depending on my mood, I might even call them friends. They may or may not have encouraged me to review the product. They certainly did not give me any remuneration for doing so! (C’mon… shouldn’t I at least get a free copy, guys? ;))

Now for the WPF goodness…

1. Animation Panels

The layout mix includes more than a dozen panels that can be used for laying out your WPF UI. These are not just ordinary panels though. They all derive from a custom AnimationPanel base class. This base class provides support for animating children of the panel to their appropriate sizes and positions. As such, if you resize a wrap panel, for example, the children will automatically animate to their new layout positions. The type and behavior of the animation is easily configured (or even disabled, if desired).

2. Full Set of Native Panels

The blendables layout mix includes its own implementation of the most common native WPF panels (Canvas, StackPanel, WrapPanel, DockPanel, and Grid). These panels work exactly like their native counterparts, but since they derive from AnimationPanel, they bring all of the animation goodness to the table.

3. Some Cool New Panels

In addition to the native panels, there are some cool new panels including AnimatedTimelinePanel, AutoStretchStackPanel, CameraPanel, Carousel, RadialPanel, RandomPanel, RelativeCanvas, and StackedStackPanel. Some of these are self explanatory. For those that are not, I’d encourage you to look at the samples included with the layout mix to see them in action. Again, all of these derive from the AnimationPanel base class and provide support for all the animation features in the product.

4. Enter and Exit Animations

One of the questions I receive a lot is, “How do I add enter and exit animations to items in my databound ItemsControl?” The answer is always that enter animations are easy, but exit animations are rather tricky. Once an item is removed from the databound collection, its corresponding visuals are automatically removed from the element tree. This means that there is nothing left to animate out.

The blendables layout mix magically solves this problem by coordinating the lifetime of its children on your behalf. All you have to do is set the ExitAnimator, ExitAnimationRate, and ExitTo properties (or optionally handle the ChildExiting event and set an exit location in your handler). There are similar properties for simplifying enter animations.

5. Layout-to-Layout Animations

Another big question since the introduction of the WPF platform is, “How do I implement layout-to-layout animations?” Again, this is not easily done using the native panels because a child element can only have a single parent. There is no way to animate a child from one parent to another. I describe the typical way of simulating layout-to-layout animations in this article.

The Layout Mix offers the first real solution to the layout-to-layout problem by introducing a new panel called SwitchPanel. This panel exposes a Layouts collection which can contain any number of the other animation panels. At any given moment, one layout is active. To switch to another layout, simply change the ActiveLayoutIndex property. The children of the SwitchPanel will automatically animate to their new positions as determined by the new active layout. The animation is configurable via the SwitchAnimator and SwitchAnimationRate properties. This is very cool!

6. Layout-Specific Templates

Each layout specified in the Layouts collection of a SwitchPanel can have its own associated data template. This is really handy when using the SwitchPanel as the items host for an ItemsControl. You simply set the SwitchTemplate property on the animation panel. When that layout becomes active, any SwitchPresenter element within the subtree will be represented using the visuals in the specified SwitchTemplate.

7. Penner Easing Equations

The layout animations, enter and exit animations, and switch animations all leverage a simplified animation model. You simply set the appropriate “Animator” property using what is referred to in the product as an “iterative animator”. This is simply a frame-based animation class that is used to animate from one value to another value over a given duration or at a specified rate.

The cool thing about the iterative animator approach is that it easily supports Robert Penner’s easing equations to drive the animators. The Penner equations are familiar and appealing to designers that come from the flash world. Both the layout mix and the 3D mix provide the full set of Penner equations via a static PennerEquations class and the equations can easily be referenced by name in markup. It looks like this:

<blendables:WrapPanel LayoutAnimator="BounceEaseIn" ... />

8. Extensible Animation Model

You can define your own iterative animators too. I noticed that the layout mix includes support for all the equations created by Robert Penner, himself. For example, it contains all 3 of the “bounce” equations: BounceEaseIn, BounceEaseOut, and BounceEaseOutIn. However, other developers have gone a step further and defined a BounceEaseInOut version, as shown in this google code project.

I was able to create a similar animator for use in the layout mix by defining my own iterative equation:

public class BounceEaseOutInEquation : IterativeEquation<double>
{
    public override double Evaluate(TimeSpan currentTime,
        double from, double to, TimeSpan duration)
    {
        return ( currentTime.TotalSeconds < duration.TotalSeconds / 2 )
            ? PennerEquations.BounceEaseOut.Evaluate(currentTime, from, to, duration)
            : PennerEquations.BounceEaseIn.Evaluate(currentTime, from, to, duration);
    }
}

Then, I simply needed to define a DoubleAnimator class that used my iterative equation:

public class BounceEaseOutInAnimator : DoubleAnimator
{
    public BounceEaseOutInAnimator()
        : base(new BounceEaseOutInEquation()) {}
}

To specify my animator for use in an animation panel, I simply define an instance of the animator class as a resource and refer to it using a StaticResource reference, as shown here:

<Page.Resources>
  <src:BounceEaseInOutAnimator x:Key="BounceEaseInOut" />
</Page.Resources>
  <blendables:SwitchPanel SwitchAnimator="{StaticResource BounceEaseInOut}" ... />

9. Extensible Panel Model

Not only is the animation model extensible, but the panel model itself is also easily extended. Writing a custom animation panel is very similar to writing any other WPF panel. In fact, I was able to transform several of my own panels into animation panels very quickly with only a few minor changes. First, instead of deriving from Panel, I derived from AnimationPanel. Then, instead of overriding MeasureOverride() and ArrangeOverride(), I overrode MeasureChildrenOverride() and ArrangeChildrenOverride(). Within the latter function, instead of calling the Arrange() method on each child, I called the ArrangeChild() method of the base class and supplied the child as a parameter. Voîla! I had a custom animation panel.

10. SimpleBinding and EvalBinding

Some who have seen my responses in the WPF Forum may have noticed that I’m a big fan of a feature called EvalBinding that was part of the blendables essentials mix when it released a couple of years ago. I’m happy to see that you also get the SimpleBinding and EvalBinding markup extensions as part of the layout mix (and even the 3D mix).

EvalBinding lets you include code expressions in markup as part of a binding. For the nitty gritty details, you can check out the EvalBinding whitepaper on the blendables site.