As a part of the Windows Phone 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.
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.
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 icon and set the Opacity property of the brush to 0
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.
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!
If you have liked this post, you might want to check out some more, on topics like Tutorials, WP7.
