WP7 Tutorial 10 : Adding Visual States to the Custom Control

Posted by on
As a part of the WP7 Tutorial Series, in the last tutorial, we saw how to create a custom button in Expression Blend.  In this tutorial, you will update the control template to add different visual states that allow the button to show an outline when it is focused, and to shift its position on the page to indicate when it is pressed.
1. In the Objects and Timeline panel, select the Border control.
2. Now, switch to the States panel and check the visual states available for the button control.
blend14 WP7 Tutorial 10 : Adding Visual States to the Custom Control
3. Under the FocusStates category, select the Unfocused state to turn on recording for the state triggered when the button does not have the focus. Any changes to the template while in this mode apply only to that particular state.
blend21 WP7 Tutorial 10 : Adding Visual States to the Custom Control
4. To hide the border around the button when it loses focus:
  • Select Border in the Objects and Timeline panel
  • In the Properties panel, expand the Brushes category and select the BorderBrush property
  • Click the Show advanced properties icon477e8e3c 33f9 481b b4d5 e400e2946b50 WP7 Tutorial 10 : Adding Visual States to the Custom Control and set the Opacity property of the brush to 0

blend31 WP7 Tutorial 10 : Adding Visual States to the Custom Control
5. Go back to the States panel and select the Pressed state in the CommonStates category to turn on recording for the state triggered when the mouse is clicked.
6. In the Properties panel, expand the Transform category and select the Translate transform. Set the X and Y values to 2. This change produces a slight shift in the position of the button whenever it is clicked, suggests that it is pressed down.
blend41 WP7 Tutorial 10 : Adding Visual States to the Custom Control
7. Finally, in the States panel, select the Base template to turn off recording mode
8. Press CTRL + S to save the updated file.
9. Now that you have completed adding visual states to the custom control, you are ready to test the updated button:
  • Press F5 to build and run the application
  • Enter some text and then press the Tab key to change the input focus to the button
  • Notice that, when the button has focus, a border appears around the button indicating that it is active
  • Now, press the space bar or click the button and notice how its position shifts to indicate that it depressed
Thats it!

Comments

Post a Comment