Animated transitions in WPF

Question

I can't figure out what I'm missing here.

Here's the problem:
Consider a (Control|Data)Template with a Trigger that switches visibility of some inner UI elements. E.g. show a TextBlock when IsReadOnly==true and show a TextBox when IsReadOnly==false.

Everything is perfect if you do this without animation - one or two setters would do the job. But what if you want a fancy animation? Then you would specify which animations to start in EnterActions and ExitActions.

But the problem is what exactly the animations should do? Modifying width/height seems really ugly, because fixed sizes in WPF are almost always a wrong way to go and also it's absolutely unflexible.

So far, the best I've come up with is modifying MaxHeight/MaxWidth to some extent, this gives just a little more flexibility but still seems brutal.

How do you tell WPF to animate Width/Height of an element from 0 to "as much as needed"?

UPD: Currently I do animate Opacity and RenderTransform, and it works. It's just that sometimes I'd like to see animations where elements slide around without transformation. This is not a critical question, but a quite interesting one for me.

Answer 1

For most animations, you should use either render transform or opacity or both. I almost never use anything else.

To make your text "Grow", animate Scale of a render transform. Do not forget about the center point.

Use Expression Blend to quickly get to the desired effect.

Answer 2

I think the best option is to animate the opacity : make the TextBlock fade out while the TextBox fades in, and vice versa.

Answer 3

Check out Transitionals Framework. It might be what you need.