Search

In the next part of his Jounce series, Jeremy Likness diggs into Visual State Manager and transitions.

Source: C#er : IMage

One of the most common questions I get about Jounce is how to handle transitions, since the ContentControl immediately swaps out content. There are some third-party solutions, such as the TransitioningContentControl from the Silverlight toolkit, but Jounce can also handle this right out of the box.

In order to demonstrate how Visual States can be used to change the look of your controls, Timmy Kokke has created a cool traffic light control.

Source: Timmy Kokke's Blog

Visual States are an easy way to change the looks of your controls based on certain states. This state can be something like a mouse hover, some invalid state or any state you need in a control.

For this tutorial I chose a traffic light control that can be one of four states. Green, Orange, Red and Inconclusive (blinking orange). In the end I show you how to use behaviors on buttons to set the state of the traffic light. This makes the use of visual states perfectly suitable for use in MVVM projects. 

                                            

This article on how to use Visual State Manager is an edited version of a a section of a chapter David Kelley wrote for the book 'Professional Silverlight 4'.

Source: Hacking Silverlight

Part of the job of the designer or creative that you typically see being done in Expression Blend is skinning and templating controls, views, and other objects. For the most part, all controls have built-in templates, and in Visual Studio it is very difficult to get at these as they are part of the framework and not exposed. Expression Blend has a great tool to help you get at the templates by creating copies of templates for any control, putting them into your code and allowing you to edit them in the Designer using the Visual State Manager area labeled States that was mentioned earlier.

Imran Shaik demonstrates how to use TemplateVisualState attributes to allow manipulation of visual states in your controls.

In Silverlight 2.0/Expression Blend 2 SP1 creating a new VSM state was pretty straight forward, either for a UserControl or Custom Control a new Visual State could have been created by just clicking on create a new Visual state group, similarly XAML could have been manually editing the XAML.

In Blend 3.0/Silverlight 3.0 you can still create visual states the old way for UserControls but for custom controls this option becomes disabled/unavailable.