Silverlight Visual State Manager using Blend


Expression Blend makes creating and managing states easy. This is the 4th article in the Expression Blend Series.
 
Create a new Blend silverlight project.
 
Click on the States tab in Blend. The States Panel would open as shown below :

statetab in Expression blend
 
If the States window is unavailable. Check the States option in the Window menu.

Window menu in Expression blend
 
Click on Add State Group shown below :

Add state group in Expression blend
 
A new State group is added as shown below :

new state group in Expression blend
 
Rename the state group as StatesGroup.

rename state group in Expression blend
 
Click and Turn on Transition preview.

transition preview in Expression blend
 
click on Add State.

add sate in Expression blend
 
On clicking the Add state button the screen is modified as shown below.
Note that all the changes made hence forth to the screen would be recorded and saved as that state.

visual state recording in Expression blend
 
A new State is created.
 
visual state in expression blend

Rename the Visualstate as MouseEnter.

rename visual state in expression blend
 
Similarly add a new state as shown below :

add visual state in expression blend

add visual state in expression blend
 
Also add a rectangle keeping the base state as selected as shown below :

add rectangle in expression blend
 
Lets add a Slide In Transition.

expression blend transition slide in
 
Add a Easing Function to the transition effect as shown below :

easing function in expression blend
 
Now when you select and swap the states , a nice slide transition is experienced. You could also change the Transition effect to experience different transition effects.
 
You could easily swap between these states as discussed in the previous article.
 
http://www.c-sharpcorner.com/UploadFile/Mahadesh/8886/
 
Thanks. Happy Coding..


Similar Articles