electric beach

Christian Schormann

Tuesday, June 3, 2008

Creating Control Skins with Visual State Manager – An Introduction

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.

StateExplorer

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.

AddStateGroup

AddState

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);

from within.

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.

Summary

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. 

posted by cs at 06:00  

30 Comments

  1. [...] There are some nifty new tricks up Expression Blend 2.5’s sleeve for this release. One of them is known as the Visual State Manager, or VSM for short, which makes styling your controls easier. To learn more about this feature, visit Christian Schormann’s blog where he provides an overview of Creating Control Skins in the Visual State Manager. [...]

    Pingback by Expression Blend and Design : Upcoming Expression Blend 2.5 Feature – Visual State Manager — June 3, 2008 @ 14:00

  2. [...] Creating Control Skins with Visual State Manager – An Introduction [...]

    Pingback by Development in a Blink » Blog Archive » VSM Video – Visual State Manager in Silverlight — June 3, 2008 @ 17:55

  3. [...] Schormann posted a video that demonstrates the new Visual State Manager (aka VSM). The quick and dirty is that the VSM [...]

    Pingback by Visual State Manager : JohnPapa.net — June 3, 2008 @ 18:37

  4. Thank you very for this great feature (VSM). This feature is going to save so much time.

    Great job!

    ..Ben

    Comment by BenHayat — June 3, 2008 @ 18:37

  5. [...] Creating Control Skins with Visual State Manager – An Introduction and Visual State Manager: Goals and Visual State Manager for User Controls: A Simple Guitar Chord Finder Example (Christian Schormann) [...]

    Pingback by Dew Drop – June 4, 2008 | Alvin Ashcraft's Morning Dew — June 4, 2008 @ 04:40

  6. [...] Creating Control Skins with Visual State Manager – An Introduction (Make sure you see the video!) – Visual State Manager: Goals – Visual State Manager for User [...]

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

  7. [...] 随之而来的是Expression Blend 2.5 July 2008 Preview,其中最大的亮点在于一个被成为VSM(Visual State [...]

    Pingback by Silverlight Tips(2) : Mdong·s Space — June 5, 2008 @ 04:38

  8. [...] stuff in this release including easier custom skinning of controls (via the Visual State Manager  – more “wpf like”), better control over your state (like JavaScript onMouseOver Events) [...]

    Pingback by . : TechEd 2008 and Silverlight 2 Beta 2 — June 5, 2008 @ 07:22

  9. [...] Sidebar: Visual State Manager [...]

    Pingback by Silverlight: Build Business Applications? « Tales from a Trading Desk — June 5, 2008 @ 12:31

  10. [...] http://electricbeach.org/?p=98 (videó középtájt). [...]

    Pingback by Silverlight 2 Beta 2 - Visual State Manager - VBandi — June 5, 2008 @ 12:49

  11. [...] Visual States : Creating Control Skins with Visual State Manager – An Introduction [...]

    Pingback by Robs Usability Development : Silverlight, ASP.NET, Ajax, Agile, MVC & Volta » Silverlight 2 Beta 2 — June 6, 2008 @ 15:24

  12. [...] de un technology preview y puede ser descargada gratuitamente. Como principal novedad lleva el VSM ( Visual State manager) para crear controles y [...]

    Pingback by Crónica de una vida - Silverlight 2 beta 2 y nuevas versiones de Expression Blend and Design — June 8, 2008 @ 07:21

  13. [...] model called Visual State Manager (VSM) that allows for easier templating for controls. Check Christian Schormann’s post for an introduction to [...]

    Pingback by Katrien's MSDN Blog : Silverlight 2 Beta 2 and related downloads — June 8, 2008 @ 08:55

  14. [...] 这里 和 这里的教程, 以及这里, 这里 和 [...]

    Pingback by Silverlight 2 Beta2版发布了 - Joycode@Ab110.com — June 8, 2008 @ 11:57

  15. [...] Good Overview and video of the Visual State Manager [...]

    Pingback by Silverlight 2 Beta 2 Rundown : JohnPapa.net — June 8, 2008 @ 18:49

  16. [...] to define and transition between UI states in your application.  For more information  check out Christian Schormann’s VSM blog post and this great VSM screen cast and associated demo files which I stole from… ah, I mean [...]

    Pingback by Brad Abrams : Silverlight Roles, Profile and Authentication Example Updated for Silverlight Beta2 Now with Visual State Manager (VSM) goodness! — June 8, 2008 @ 19:24

  17. [...] queréis aprender más sobre esto, leed estos tutoriales aquí y aquí, y estos vídeos aquí, aquí y [...]

    Pingback by Publicado Silverlight 2 Beta 2 « Thinking in .NET — June 9, 2008 @ 10:53

  18. [...] 这里 和 这里的教程, 以及这里, 这里 和 [...]

    Pingback by Felix Wang | Evangelizing the Next Web : Silverlight 2 Beta2发布了 — June 9, 2008 @ 22:47

  19. [...] Rich Controls: Beta 2 includes a new templating model called Visual State Manager that allows for easier templating for controls. Other features include the introduction of [...]

    Pingback by . : Silverlight 2 Beta 2 is available for download — June 11, 2008 @ 03:44

  20. [...] queréis aprender más sobre esto, leed estos tutoriales aquí y aquí, y estos vídeos aquí, aquí y [...]

    Pingback by Spartan-Code» Blog Archive » Publicado Silverlight 2 Beta 2 — June 11, 2008 @ 16:40

  21. [...] las nuevas versiones de Expression Blend 2.5 June preview que tiene la nueva característica de Visual State Manager, que permite visualizar estados de un botón o un componente según la interacción con el [...]

    Pingback by Expressate! : Descarga Expression Blend 2.5 June preview y DeepZoom Composer — June 17, 2008 @ 10:36

  22. [...] Visual State Manager tutorial Be the first to rate this postCurrently 0/5 Stars.12345 Posted on June 17, 2008 17:28 by digitaltekniq Tags: Categories: Expression Studio | Silverlight | Expression Blend Actions: E-mail | Permalink | Comments (0) | Trackback [...]

    Pingback by Expression Blend - Visual State Manager tutorial — June 17, 2008 @ 14:32

  23. [...] to define and transition between UI states in your application.  For more information  check out Christian Schormann’s VSM blog post and this great VSM screen cast and associated demo files which I stole from… ah, I mean [...]

    Pingback by Silverlight Roles, Profile and Authentication Example Updated for Silverlight Beta2 Now with Visual State Manager (VSM) goodness! | Silverlight — July 2, 2008 @ 00:35

  24. [...] at Christian’s Blog “Electric Beach”  there is a great introduction to using the new Visual State Manager in Expression Blend June [...]

    Pingback by Christian Schormann's Visual State Manager Demo : — July 2, 2008 @ 04:14

  25. [...] Creating Control Skins in the Visual State Manager by Christian Schormann [...]

    Pingback by kirupaBlog - If it isn’t broken, take it apart and fix it! » Blog Archive » Using VSM to Create Sophisticated Button Rollovers — July 2, 2008 @ 20:41

  26. [...] Creating Control Skins in the Visual State Manager by Christian Schormann [...]

    Pingback by ArkInfotec.com » Blog Archive » Using VSM to Create Sophisticated Button Rollovers — August 5, 2008 @ 01:29

  27. [...] Template Editing features, please check out the tutorials here and here, and the videos on it here, here, and [...]

    Pingback by autogodo.com » Blog Archive » Silverlight 2 Beta2 Released — October 2, 2008 @ 06:32

  28. [...] queréis aprender más sobre esto, leed estos tutoriales aquí y aquí, y estos vídeos aquí, aquí y [...]

    Pingback by Spartan Code – Blog » Publicado Silverlight 2 Beta 2 — April 15, 2010 @ 09:19

  29. [...] Creating Control Skins with Visual State Manager – An Introduction [...]

    Pingback by Parts & States Model with VisualStateManager (Part 4 of 4) | karen corby's fabulous blog — September 16, 2010 @ 10:11

  30. [...] If you just can’t wait till Friday, Christian Schorman has a VisualStateManager sneak peak. [...]

    Pingback by TechEd Orlando | karen corby's fabulous blog — September 16, 2010 @ 11:58

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress