Developing For .NET

Last night at RVNUG, a friend of mine pointed me to The WPF Toolkit. The toolkit is a collection of controls and features that extend the current WPF offering from Microsoft. Chief among these is the DataGrid control, but something more appealing caught my eye: Visual State Manager.

Basically, the VSM is a very easy to use feature of Blend 2 SP1 that supports Silverlight 2. It allows the developer to easily set the visual state of user controls and control templates based on the current state of the control, such as MouseOver and Pressed. I had seen this when I was exploring Silverlight 2 in Blend 2, but I’ve been focusing on WPF and was curious as to why I didn’t have the same functionality I had seen in Silverlight. Of course, now I know: VSM is currently only included as part of Blend 2 for Silverlight 2 development. But, if you install the WPF Toolkit and follow the instructions in the link above to update your Registry, you can gain access to the same basic functionality for WPF Applications.

Using VSM in WPF

Previously, these state changes could be accomplished using Storyboards and Timelines, and then assigning their beginning and ending to Triggers. The Timeline tool in Blend is robust and feature rich, but I think for a non-graphically oriented developer it can be more than a little daunting. And it seems to be overkill for simple animations. That’s where VSM comes in: it greatly simplifies the task of adding small animations to element states.

The Silverlight implementation is very nice and intuitive right out of the box: the states are already defined and all you have to do is activate one and make your changes to the art board. Unfortunately, the current version for WPF is not as straightforward. In WPF, once you have the State manager visible, you have to create the State Groups and define the Visual States you wish to modify. Once I figured out what was going on, this is not painful by any means, but it took some trial and error to get it working right. Don’t forget to add a reference to %Program Files%\WPF\WPF Toolkit\…\WPFToolkit.dll to each project in which you wish to use VSM.  Trust me, it will save you a lot of heartache!

So first things first, we need something that VSM can interact with. Since VSM cannot be applied to the default template of a control, we need to create our own. For this article, I created a button and then created an empty template. Once you create the template, either by ‘edit a copy’ or ‘create empty’, the States Manager will appear under the Triggers Manager on the left hand pane. At this point, the only item visible in the States Manager is Base. You can go ahead and create the default look of your template at this point.

Set up the State Manager pane

To begin with we need a Visual State Group to hold our Visual States. In the Top Border of the States Manager pane on the far right side is a small icon with a plus sign on it. Hovering over it will reveal that this is the “Add state group tool. Pushing it will create a new Visual State Group header under Base. Click on the title (VisualStateGroup) and rename it as you see fit. I’m not sure that the group names matter, but to be on the safe side I followed the same scheme that Silverlight reveals and called my first one “CommonStates”.

Now that we have a group to hold our collection of Visual States, we can start adding states. On the CommonStates header bar is another icon with a plus symbol: this is the “Add state” button, so press it to add a new state. Rename VisualState to the desired state. The state names do matter if we are to get the desired result, so I added three typical states: Normal, MouseOver, and Pressed.

Altered States

Now that we have all the missing pieces defined, we can use them just as we do in Silverlight 2. Clicking on the desired state in the State Manager pane will turn on State Recording [as indicated by the red border around the art board and the header message “State recording is on”]. Now you can easily adjust the display elements of the content to whatever you want them to be at that particular state. A classic example would be brightening a button on MouseOver.

When you are done editing the visual elements, click on Base in the State Manager pane to exit state recording mode. It is important that you do this, because otherwise you could easily alter just a given state when you think you are altering the control template itself. Take it from me, this is very frustrating when you do not receive the results you expect. And then, of course, to correct it you need to back all of your changes out and reapply them outside of state recording mode.

Adding transitions

If you have done all of the above, your button should be changing its visual appearance when you mouse over or press the button. You may think this is the end, but wait, there’s more! Leaving it as above will force the change from one state to another to happen immediately. While we have become accustomed to such UI, it is not the most pleasing effect. Instead, users react much better to very slight, more realistic animations. In other words our users will find our software more appealing if it takes a little time to change from one state to another. These quick, smooth changes from one state to another are very short and simple animations called “Transitions”.

To add a Transition, find the Visual State (such as “MouseOver”) in the State Manager pane and look to the right side of the header bar. There you will find an arrow icon adorned with a plus symbol (notice a pattern developing here?) Click on that and a helper window will appear with a collection of Transitions you can modify. In my case, I chose the two with the ‘*’. The one with the * on the left side indicates the transition from any other state to the selected state, and the one with the * on the right indicates the transition from the selected state to any other state.

Clicking on the desired Transition will add it beneath the selected state. On the Transition you will find a text box that lets you enter the desired amount of time you wish the particular Transition to take. The available range is 0 to 1 second. It doesn’t take much for our Transition to have the desired effect, so try .1 or .2s at first to get the feel for it, then adjust as you desire.

Conclusions

Now when you run your project, you should detect the pleasing effects of Transitions. Overall, I find this much much easier than Storyboards and traditional animations. I’m sure that eventually the tooling for WPF Applications will improve to match what is in Silverlight, but overall it is a minor complaint. I want to thank the CodePlex guys for letting us in on this great secret!