One of the most cool features of WPF is animation. WPF has a great architecture that offers almost unlimited possibilities, but every time I wanted to animate the Height and Width properties I had problems, because the “Height” and “Width” properties are often set to the “Auto” value (which is internally represented as double.NaN). The “DoubleAnimation” class cannot deal with this value. It uses “From” and “To” properties and calculates the values in between.
If the “From” property isn’t set, then “DoubleAnimation” starts with the current value and tries to animate to the To property. If the current value is “double.NaN”, then it cannot interpolate the intermediate values and throws the following exception:
Cannot animate the 'Height' property on a 'xxx' using a 'System.Windows.Media.Animation.DoubleAnimation'.
There is not a lot you can do about this one. I tried to bind the “From” property to the “ActualHeight” property. Although this might work when collapsing from “ActualHeight” to 0, there is no way to get expand it again, because you cannot go back to “ActualHeight”. I also tried to bind to “DesiredSize.Height”, but I wasn’t successful. There is another disadvatage when using animation with binding, because the entire storyboard needs to be froozen and this isn’t possible when you use binding in the storyboard.
Animating the “Height” property seems to be impossible, so we should divert to another scenario. A popular approach is to use “LayoutTransform” and use a “ScaleTransform” that animates the “ScaleY” property from 1 to 0 and back again. Although this works, the effect is quite different then animating the “Height” property (see my attached sample application for the difference). Another disadvantage is that it doesn’t respect the “MinHeight” and “MaxHeight” properties.
I decided to use a different approach and to adjust the size of the control by overriding the “MeasureOverride” method. This method multiplies the requested size with two new dependency properties and returns this new size. This works and because the multiply properties are set to 1.0 by default you don’t notice the control. Animating the multiplier to 0 hides the control completely and animating it back to 1.0 uncovers the entire control.
I called this control the SizerControl and provided sourcecode with it to demonstrate how it works. I tried to convert the control to a Transform class (CropTransform) to be able to use it as a LayoutTransform, but I couldn’t find decent documentation about creating custom transformations. Full sourcecode of the SizerControl can be found in SizerControl.cs. An example can be found in TestWindow.xaml.