Search code examples
visual-studio-2012windows-store-appsblendexpression-blend-5

Blend 5 Visual State Manager

This question relates to VS2012 and Blend 5.

What are the rules governing whether or not the visual state manager is available in Blend? I've always been able to access the visual state manager in blend when developing Windows Store Apps in C#/XAML. I'm trying to do the same in Javascript/HTML5 and the visual state manager isn't there.

I can actually open C# and Javascript apps in Blend side-by-side and see that the states tab in not available in JS.

Solution

  • The concept of Visual States is not available when building Store apps with HTML and JavaScript. The "states" pane is only available when building XAML apps (WPF, Silverlight or Windows Store XAML). In the same way the Styles, HTML property and CSS property panes are only available when working on Windows Store HTML apps.

    You can use Blend to set the CSS classes for different states. You can set the current view orientation on the Device pane. Using the css media queries you can set different properties on a similar class that is used in html. You can do this the same way as you would changing other CSS properties.

    I hope this screenshot explains it a little further. In this example I set a green color to the filled state and a red one to the snapped state. The media query causes one to be picked over the other.

    enter image description here

    update:

    I decided to write a tutorial about the subject that goes into a bit more detail.