Which I believe easily one of the most impressive and innovative enhancement to Expression Blend!
Why do I say so? Read on.
One of the key element that makes Expression Blend such a powerful tool, is its capability to allow designers to customize and have complete control over the visual look and feel of every element in WPF and Silverlight applications, which would turn out exactly the same as it looks in Blend, thanks to XAML.
So, when customizing the look, feel, transition animations, etc of a control, the steps are pretty different for both WPF and Silverlight, briefly shown below:
 |
 |
- Create a Storyboard.
- Define an transition animation.
- Add an event trigger for the control, targeting the Storyboard.
|
- Create a Storyboard
- Define an transition animation
- For Silverlight 1.0 Sites, JavaScript has to be written in the code behind to trigger Storyboards for each event.
- For Silverlight 1.0 Applications, managed code has to be written in the code behind to trigger Storyboard for each event.
|
Thus, in order to “style” each control, the designer would have to define the transition animations that are stored in a Storyboard, and the look and feel of various states, and for Silverlight applications, they also need to write code to trigger the transition animations.
With the introduction of the Visual State Manager (VSM), that will be included in the June preview of Expression Blend, these steps could be further simplified, but not replaced. As VSM is introduced to simplify the customization of visual states of controls.
Visual States are essentially the various states of a control that could be seen visually. For example, a checkbox could have a few visual states:
| Unchecked |
–> |
 |
| Checked |
–> |
 |
| MouseOver |
–> |
 |
MouseLeftButtonDown
(or MouseDown) |
–> |
 |
With VSM, you could easily customize the various visual state of a control, along with the animations that will be in effect upon each state transition, and the very duration of each transition animation.
The Interaction Panel of Expression Blend will now include a State Explorer, allowing designers to now dive down, view, and customize the various visual states of any control. The duration of transitions can be defined for each visual state group, or for a specific visual state, or even for transitions to other visual states.
VSM is not only supported for template-based controls, but also User Controls, where states could be defined, instead of customized based on the available states.
Do take note that the VSM will be available for Silverlight 2 Beta 2 Application Projects for the June preview of Expression Blend, but the preview version for WPF will be available as a separate download.
To find out more about the VSM, check out the awesome posts by Christian Schormann of the Expression Team:
- Creating Control Skins with Visual State Manager – An Introduction (Make sure you see the video!)
- Visual State Manager: Goals
- Visual State Manager for User Controls: A Simple Chord Finder Example
The introduction of VSM greatly simplifies the process of “styling” both WPF and Silverlight applications, by providing a consistent solution of managing “styles” of controls.
I for one love the idea of not needing to write any code in order to “style” the applications I craft, and most definitely reduce the learning curve of designers going from WPF to Silverlight and vice versa.
Kudos to the Expression Team in bringing such a huge improvement to Expression Blend!
