electric beach

Christian Schormann

Tuesday, June 3, 2008

Visual State Manager: Goals

Our goal for Silverlight 2 was to provide a control skinning model that is imminently usable for visual designers, providing an easy entry ramp, yet with sufficient power for sophisticated application skins. Our design goals did include:

  1. Make sure that skin design can be a task for a visual designer. Avoid requiring skills visual designers are not likely to have. Reduce the learning curve for common skinning tasks
  2. Create a model that can work with both Silverlight and desktop WPF 
  3. Create a model that can be tooled easily and effectively
  4. Allow for skinning of composite controls, i.e. control skins that contain other controls as parts (for example the up/down buttons in a slider)  
  5. Make it possible to create interchangeable skins
  6. Skinned controls should be portable to desktop WPF with reasonably little effort

We addressed these design goals as follows:

  • The Silverlight model uses styles and control templates just like WPF.
  • We added a clean and simple conceptual model that separates the visual aspects of a control skin from the behavioral aspects of the control. Visual states completely encapsulate the concept of the different looks a control can have, in a way that enables visual designers to simply focus on how the control needs to look in different states. 
  • We added a well-defined, differentiated transition model. With VSM, transitions between visual states can be explicitly defined, either in a very simple general way, or as specific and detailed as required. Most importantly, the transition model, while it permits the definition of detailed manual transitions, also allows designers to simply specify transition timing, generating all other details automatically. This approach is fast, easy and flexible.
  • The control code provides default hookup of events and properties to state changes. In the future, it will be possible to extend and override the default hookup provided by the control, but this ability is not available yet. The ability to extend and override visual states could be implemented on top of the existing system, so this is by no means a systemic issue with the model – we simply did not have the time to provide this capability in this round.
  • Tooling. The June preview of Expression Blend provides explicit tooling for the VSM model. Controls provide a list of desired visual states to Blend, and Designers can simply pick a visual state from a list and then tweak visuals and transitions using the Blend artboard. No deep understanding of control events and properties is required.
  • State groups allow complex controls to reduce the number of individual states that need to be exposed for editing
  • As an added bonus, visual states are also available for user controls, not just for fully template-based controls. User controls are a great choice when interchangeable skins are not required. Making user controls with dynamic visuals that respond to control state is much easier with VSM and the consistency with styling of template-based controls significantly reduces learning effort and production cost.  
posted by cs at 07:41  


  1. Hi Christian,
    I’m trying to find a less verbose way to create an image button in which I swap out 4 different png images for the 4 common button states:Normal, MouseOver, Pressed, Disabled. Here’s what I’ve done. Is there a better way?

    It would seem that I could use one image and just swap out the source, but that doesn’t seem to work.


    Comment by BruceDenham — June 4, 2008 @ 11:55

  2. I’m glad you have recognized the need for state management. I have done this over and over again in some form, in Flash, in WPF and in Silverlight.
    I’m curious how you deal with “hijacked” transitions (state change while in transition) and with transitions triggered by events. E.g. I found you often need something like a “join” concept for events.
    Is this limited to controls or will you be able to use this at a higher level (“page” states) as well?

    Comment by fkruesch — June 4, 2008 @ 23:27

  3. [...] 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 [...]

    Pingback by Visual State Manager, new feature of Expression Blend « Kok Chiann’s Blog — June 5, 2008 @ 01:16

  4. [...] 2 Beta was released earlier today and one of the big changes is the switch to using Visual State Manager for control design/development. Another is that many of the core controls (Button, ListBox, etc.) [...]

    Pingback by Continuing access to Silverlight 2’s generic.xaml resources [SilverlightDefaultStyleBrowser updated for Silverlight 2 Beta 2!] | Silverlight — June 7, 2008 @ 00:24

  5. [...] e qui Posted: Monday, June 09, 2008 11:45 AM by pietrobr Filed under: [...]

    Pingback by Pietro Brambati Blog : Silverlight 2 beta 2 – Controlli e Visual State Manager — June 9, 2008 @ 02:46

  6. [...] Visual State Manager: Goals [...]

    Pingback by Pietro Brambati Blog : Silverlight 2 - risorse — July 1, 2008 @ 01:32

  7. [...] Visual State Manager: Goals [...]

    Pingback by Pietro Brambati Blog : Silverlight 2 – (alcune) risorse — July 3, 2008 @ 23:12

  8. [...] of these controls will use the new Visual State Manager templating model and be fully customizable in XAML by hand or through Expression Blend.  They [...]

    Pingback by Shawn Burke's Blog : Control Freak. — September 16, 2008 @ 20:41

  9. [...] of these controls will use the new Visual State Manager templating model and be fully customizable in XAML by hand or through Expression Blend.  They [...]

    Pingback by Control Freak. - Readed By Wrocław NUG members - Wroc.NET — September 16, 2008 @ 23:29

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress