Styling dynamic visuals, or “skinning”, is an important task for visual designers working on interactive applications for web and desktops. With Beta 2 of Silverlight, and the associated June preview of Expression Blend, we are making this work much easier and faster – and we are adding more creative options at the same time.
Very importantly, the model does not only work with controls explicitly written to support skinning via templates (such as the built-in and 3rd party controls) – designers can use the same model and tools to easily define dynamic visuals for UserControls they create.
From the title of this blog, you may have guessed that something called Visual State Manager (or in a more handy acronym, VSM) is involved, and you’d be very right with that guess. VSM is a small new API that builds on existing Silverlight and desktop WPF concepts.
VSM is currently available as part of Silverlight 2, but we will also support it in the desktop WPF. A preview version of VSM for WPF will be available as a separate download.
Please note that the Blend tools released this week are a preview version. Our tooling for VSM is not at all complete today and does not expose all the capabilities of VSM yet. Stay tuned…
Visual States and Transitions
The easiest way to get an overview of VSM and the associated tooling is to watch a short demo (click here to download the video):
VSM introduces two basic concepts: Visual states and state transitions. A control, such as a button, usually has multiple visual states that define how the button should look like when the mouse is hovering over it, or when it is pressed etc. Transitions are used to define how visuals dynamically change as the control moves from one state into another.
There is one additional concept, visual state groups, that makes it possible to avoid state explosion for controls with multiple sets of independent states. You have seen them in the video, but otherwise we will ignore state groups for the moment.
A visual state is simply a description of how a control looks like in a particular state. Visual states can be static (i.e. nothing changes over time) or they can be animated. Visual states are described in terms of differences from a basic “natural” state, which is effectively the design of the control as it looks like when freshly initialized. In other words, the base state of a control is the “neutral” look you design on the Blend artboard before you define how the control reacts to changes in its state.
Technically, visual states are described by storyboards. If a visual state is meant to be animated (for example, a button pulsing while being in mouse over state), this storyboard can contain any animations you desire. For non-animated states, all it needs to contain is a single key frame for each property that is different from the base state of the control.
Transitions describe how a control gets from one visual state into the next. With VSM, transitions can be automatically generated or manually defined. For automatic transitions, VSM takes care of everything, so there is no need to specify key frames or worry about start and end values of the animation. But there still is flexible timing control, both for states as a whole or for individual elements within a state.
You can be as general or specific as you like: You can define default transition times that are applicable for all state changes, or you can specifically set times for just that one crucial transition from a button’s “MouseOver” to “Pressed” state. You can define a transition by simply setting a global transition time, or you can define individual timing for any property affected by the transition. You can even define explicit manual transitions using all the normal animation capabilities of the system. The model is fast and easy for all the common day-to-day tasks, and there is a lot of flexibility if you need it.
Transitions between states sometimes get interrupted by user actions, for example when a user moves the the mouse out of a control before the transition to mouse over state has had time to finish. VSM’s automatic transitions handle these scenarios gracefully, and begin the transition to a new state right where the previous state or transition was interrupted – smoothly and without a jump or break.
VSM and UserControls
VSM and State Explorer are not only available in template-based controls. You can also use them for UserControls. With template-based controls, the controls themselves let VSM know which states are required, so that StateExplorer can provide the right user interface to select and edit states. For UserControls that you create on the fly, you can just create states as you go along. The State Explorer interface shows extra functions that let you create new states and state groups when you edit a user control.
Once you have added at least one state group and a few states, you can select and tweak the look of each state, including transitions, in just the same way as shown for templates.
To switch states for a user control, in this preview a little bit of code is required. The states in the screen shots above are for the little lamp control you have seen in the video. Let’s say you have an instance of this control called Signal. You could then change its state by calling:
VisualStateManager.GotoState(Signal, “On”, true);
from outside the control or
VisualStateManager.GotoState(this, “On”, true);
Using VSM in UserControls simplifies many ad-hoc components quite a bit, and makes it really easy to change the look of the user control, once the logic is wired up. It is a great practice to handle as many of the dynamic changes of a user control with calls to GotoState() rather than directly manipulating visuals, because the visual states then encapsulate the dynamic look of the user control and can be edited independently by a visual designer, using the fast and simple State Explorer interface.
Visual state manager and the associated tool support in the June preview of Expression Blend make it much faster and easier to create rich, dynamic skins for template-based controls. They also enable visual creation dynamic user controls with state-based visuals.
Visual state manager is not a replacement for the template technology introduced with WPF, but an evolution. A preview version of VSM for WPF will be available soon. This enables VSM-based controls and skins to be written to work across WPF and Silverlight.
The beta and preview released this week will give you a first taste of VSM – but we will continue to evolve the model to give you the ultimate in ease of use and power for application skinning.