WPF is a fantastic platform for creating User Interfaces (UI) that allow all the sexy and powerful fashions of the day. Sexy features like reflections, animations, flow documents & 3D are all native to WPF. Powerful programming concepts such as declarative programming & test driven development are available and encouraged. While many new developers to WPF have a hard enough time learning XAML and the binding model that is new with WPF, I feel that a key concept of Usable Interfaces can get forgotten. This therefore is the first in a series of posts on producing Responsive UI in WPF.
This series of posts will try to keep a narrow focus on producing UI that are responsive. Where necessary I will digress to cover essential background concepts. There is an assumption, however, that the audience has basic WPF skills and has at least covered the WPF Hands on Lab 1.
I thought it would be nice to jump straight to some code that can give us some responsive User Interfaces straight out of the box. WPF has a the concept of Storyboards that allow values to transition from one value to another over a given time. The great thing about Storyboards is they cater for Binding, they don’t have to be a linear transition, they are smart enough to cancel out when they are no longer valid and you can program them declaratively in XAML. Read more...
In the example below we show the usage of 2 Storyboards. These Storyboards declare that the opacity value on the target ("glow") shall change from its current value to 1 (Timeline1) or 0 (TimeLine2). Each Storyboard is set to run for 0.3 seconds. The first timeline is started by the trigger associated to the IsMouseOver event. The second trigger is associated with the exit of the condition that started the first time line. This means when we mouse-over a button, a glow will gradually illuminate. When we mouse-off the illumination will fade away. What is great about Storyboards is that in this example, if you mouse-over then mouse-off quicker than 0.3 seconds the first story board will hand over to the second story board without completing and the second story board will fade from a value somewhere between 0 and 1 until it becomes 0.