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
Width properties are often set to the
Auto value (which is internally represented as
DoubleAnimation class cannot deal with this value. It uses
To properties and calculates the values in between.
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.
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
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 source code 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 source code of the
SizerControl can be found in SizerControl.cs. An example can be found in TestWindow.xaml.