Monday, October 27, 2008

VSM Redux – Silverlight 2 RTW

Silverlight's Visual State Manager (VSM) exhibited a couple of problems in Silverlight 2 Beta 2 which I described in my earlier blog post. To summarize, in SL2 Beta 2:
  1. Radio Buttons, Checkboxes, and ListBoxItems ran into problems when trying to animate the same property for Normal, Mouseover, and Checked states.
  2. Animating Brushes was buggy, and caused bad behavior.
So, now that Silverlight 2 has been completed and the final Release To Web (RTW) version is out, do these problems still exist, or have they been solved? Let's find out!

To start with, I upgraded Page Brooks' excellent light bulb demo app to SL 2 RTW. This app demonstrated problem #2 (brush animation bugs) very succinctly. I then added in some code to test out radio buttons to determine if they would still lose their states when animating the same property across multiple state groups. Here's what the test app looks like:

Radio Button Test – Problem #1
To start out, let's take a look at the standard radio button behavior on the bottom radio button:
Normal Mouse Over Checked

Notice that the Normal and MouseOver states (which are in the same state group – "Common States") animate the background highlighting, and the Checked state animates the black dot in the center. So, the 2 state groups are each modifying a different property, and mousing over a checked RadioButton still animates the background highlighting.

However, many custom controls are built in a way that animates the same property across multiple state groups. Let's see what happens when we do so. The two circles on the top are custom radio button styles, but all 3 radio buttons are in the same group. The custom radio buttons' backgrounds are grey normally. They should turn yellow on Mouse over, and black on being checked. So, I'll mouse over the first radio button:

 Now I'll select the first radio button:
 So far, so good. However, I'll now mouse over the checked radio button again:

The radio button failed to maintain its checked state, instead applying the mouse over state. When I mouse back out, the checked state does not restore:

So, it seems this problem of animating the same property across multiple VSM state groups still exists in Silverlight 2 RTW.

Brush Animation Test – Problem #2
Moving on, let's test out the brush animation bug. In Silverlight 2 Beta 2, VSM would incorrectly animate changes to the properties (color) of a brush. Every once in a while, the brush color would fail to change. In Page's program, the light bulbs should light up from left to right. A picture of the bug is below:

So, now, let's try it in the upgraded SL2 RTW version of the code:

Moving the mouse very quickly back and forth across the light bulbs produced no errant unlit bulbs at all. It looks like the Brush animation problem has been fixed in the new version of Silverlight!