The Visual States Manager is a powerful tool in Expression Blend that allows UI/UX developers to quickly and easily accomplish a variety of animation related tasks without having to do manual key framing or write significant amounts of code. Over my next few posts, I will be demonstrating a variety of ways in which states can be used to make your development process easier.
Today I will be discussing how to use the GoToState behavior in combination with the Visual States Manager to automatically animate the hiding and showing of interface elements. This tutorial assumes you have a basic understanding of how to use the layout controls in Blend.
1. Create a new project in blend. Either a Silverlight application or a WPF application works.
2. In the main LayoutRoot grid, create a square using the rectangle tool, make it about 100 x 100 or so.
3. Copy this square twice (for a total of three squares)Place all of the squares into a horizontally oriented stack panel.
4. Set this stack panel to auto width and height, and set horizontal and vertical alignment to center. You can then give the center and right squares a left margin of 10 to space them out if you would like.
5. In the main LayoutRoot grid, create three buttons of an equal size (roughly square).
6. Place the three buttons in a horizontally oriented stack panel that is set to auto width and height, and give the center and right buttons a margin of 10 to space them out. Change the labels of the buttons to 1, 2, and 3 respectively from left to right. You can place this stack panel anywhere you want, as long as is not overlapping the other stack panel.
At this point, your layout should look something like this:
And your layout hierarchy something like this:
Now that we have the layout done, it is time to animate it using visual states. By default, the user will see all three square on the screen. The buttons will be used to control how many squares are seen at a time.
7. Go to the states tab and select ‘Add state group.’
8. Use the ‘Add state’ button to add three states, name them one, two and three.
9. Click the ‘Turn on fluid layout’ button.
10. Change transition duration to 0.3s.
11. Click on the state named ‘one.’ In this state, we only want the left most square in the stack panel to be visible. Set the opacity of the center and right squares to 0, and set their visibility to collapsed.
12. Click on the state named ‘two.’ In this state, we want to left square and center square to be visible, but not the right one. Set the opacity of the right square to 0, and the visibility to collapsed.
13. We don’t need to do anything to the ‘three’ state since it already shows all three squares.
14. Go to the assets tab and click on the behaviors category. Drag the GoToStateAction behavior onto all three buttons like so:
15. Click on the GoToStateAction behavior you just dragged to button three. In the properties panel, select ‘Three’ in the StateName field.
16. Do this same thing on the other two buttons, changing StateName to ‘Two’ and ‘One’ Respectively.
17. Compile and run the application, when you click the 1, 2, and 3 buttons, you will see the elements animate and realign themselves smoothly and automatically and display the correct amount of squares.
If you have any questions about building your software product or need help with your software project then feel free to contact us.
BlogSlayer is the official blog of FrogSlayer, a custom software product development shop in Bryan/College Station, Texas. Our specialty is getting your product to market in 90 days or less. If you would like a free consultation for your project or big idea, email us at email@example.com. You can also connect with us on Twitter, Facebook, or LinkedIn.