Jerry Nixon @Work: WPF Linear Gradient Fill and animated Fade

Jerry Nixon on Windows

Wednesday, June 30, 2010

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.

imageOf 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.