One type of Trigger available in the Expression SDK is the DataTrigger. This a trigger that uses a Binding to determine when to execute its actions. If you are using MVVM (or any other pattern that relies heavily on view models or presentation models), this class is a perfect way to interact with the UI without needing to write any custom code in the model or codebehind.
For the purpose of this post, I’m going to be creating a simple header/button control that is powered by a view model and alters the user interface of the control based on data changes.
The view model representing the 3 header controls:
Nothing special here, it’s a simple class that notifies on property changed and provides an image, text and an enabled Boolean property. The concept here is the application will have one or more headers that can be enabled or disabled and are intended to give the user visual feedback when the change happens.
Next we need to create a UserControl to provide a visual representation for our header:
As it stands like this, the images and text appear but when the application disables a header, the control doesn’t know. One solution to this would be to find a way to bind the IsEnabled property to one or more visual properties inside this control and create one or more converters to convert from true/false to the appropriate values. For instance, suppose we had a converter that converted from Boolean to Colors. We could change the color of the TextBlock easily:
While this is easy to do (and I’ve done it numerous times), if there are multiple visual properties you have to deal with you’ll need to create more bindings and more converters. It’s not the best solution if you need to change a lot of properties. So what can we do better? A storyboard with a DataTrigger:
The DataTrigger uses a Binding to the IsEnabled property and when it’s a specific value (false or true), we use a ControlStoryboardAction (also from the Expression SDK) to begin a storyboard to perform our desired animations. When our header is disabled, we’ll change the image to black & white, change the text color to light gray and shrink the text. Here are the storyboards to do this:
In DisableStoryboard we use the ColorToneEffect bitmap effect to convert the image to black and white (this effect is also provided by the Expression SDK). After that we use a standard ColorAnimation and DoubleAnimation to perform the rest of the animations (text color and font size).
With these added, clicking the toggle buttons disables our headers and performs the desired animations:
For reference here is my MainPage.xaml:
And the codebehind for it:
And the full header control: