WPF Linear Gradient Fill and animated Fade

So much is not obvious in WPF. For example, say you have a linear gradient filling a control. Want to transition to another color? Just animate to a new brush. Oh, if only you could.

Of course, you can switch brushes with a style trigger. But if you want a slow and sexy transition, you are stuck animating each gradient stop one at a time. That’s right. Yuck.

Anyway, there is no time for judgment. Let’s just hope future feature enhancements enable this. Meanwhile, here’s how you do it with WPF4:

The scenario is a simple buttons list. You want them to track your mouse’s movements and highlight. Then lose their highlight slowly as you move away.

I have wrapped them in a ScrollViewer. And these aren’t really buttons, they are just Border controls. But, it just goes to how you can do the same magic to just about any control.

A shared Style resource is attached to each of the Border controls, and if you look at the code (here) you can see the syntax is tricky, but not rocket science.