Using Blend 2.5 Visual State Manager to Create a Silverlight 2.0 Image Viewer
Recently Microsoft released Blend 2.5 June Preview. So, of course I started looking around to find what was new. I was blown away by a new panel called the State panel. This new panel allows you to create State Groups that you can then add states to (called a Visual State Manager (VSM)). You can even specify the time (in seconds) it takes for a State to transition from one to the next. So, I then started thinking about a practical application for this new feature. Of course I could have made an application that had custom buttons (really just a series of grids and not actually a Button Control) and used the State panel to make MouseEnter and MouseLeave effects. But, this seemed to me to not really show the power of this new feature. So, then I came up with an idea to make an Image Viewer and use the VSM to handle the animation for me. Here is how it works: when you roll over the thumbnail it grows to a larger size, when you roll off of it, it shrinks back down to the thumbnail size (see Figure 1-0). Let’s get started now and build the StateImageViewer UserControl.
Figure 1-0: The StateManagerViewer UserControl in action.
Victor is a senior application engineer at IdentityMine, a top-tier software company specializing in designing and developing cutting edge software applications, creating customized WPF/Blend and Silverlight training programs and creating tools for designers and developers. Victor has worked with Fortune 500 companies such as Microsoft, Harrah's, Mattel, NBC/Universal, Disney, Best Buy, GameStop, Vivendi Universal Games, and New Line Cinema among others. Victor, a former Flash/ActionScript engineer still stays active in the Flash community by writing articles and tutorials on www.actionscript.org where he is also a moderator.