Visual State Manager - Expression Blend Part 3

Visual State Manager (Expression Blend Part 3)
From the previous blog which gave an overview on setting a movie or a sound file to the Silverlight media element, let’s take the application to the next level by adding some more functionality using Visual State Manager, State Groups and States. This relationship between VSM and States is that the states are executed by the former. Here again I am emphasizing on building minor features without much effort in terms of XAML or C#. Since the features from Expression Blend keep getting changed I am keeping the discussion somewhat generic and not to forget, VSM as a feature is among the top 10 for Expression Blend.
1) From previous blog (Part 2-Expression Blend), leave the sound or video file in place and create a Visual Stage Group and two states called myState and myNextState with the state group name being myGroup underneath it as seen from the image below:


2) Next you can leave the default transition to 0s which explains why we want our state to be in effect immediately.
3) While myState is selected and the recording mode is ON, by confirming the red button being active, select the ‘Stop’ button and change its opacity to 35%
4) Navigate to the code snippet that represents the click event for the STOP button and type the following into the method: VisualStateManager.GoToState(this, "myState", true);
5) While myNextState is selected, change the opacity of ‘Stop’ button to 100
6) Navigate to the code snippet that represents the click event and type the following into the method: VisualStateManager.GoToState(this, "myState", true);
7) Navigate to the code snippet that represents the click event for the PLAY button and type the following into the method: VisualStateManager.GoToState(this, "myNextState", true);
8) Compile and run the project and upon clicking Stop button, observe how the opacity property can be leveraged to give a disabled look and feel for STOP button.
9) Next, click on the PLAY button to reinstate the opacity back to 100% for the STOP button


To conclude, with these 8-9 simple and easy to use steps we have been able to add functionality at the design stage itself. Note the amount of code written in order to leverage the benefits of VSM is very minimal