Modify the transition time between state changes (Windows Phone)

Controls look different depending on which state they are in. For example, a button changes color slightly when you move your pointer over it. "PointerOver" is one of the states of a button. You can customize the transition time between states of system controls by modifying a copy of the control's template.

The following procedure uses a button, but you can customize any system control that comes with Blend for Visual Studio 2012 or any imported custom control that inherits from the Control class.

Tip

You can also modify the states and transition times of user controls. For more information, see Define different visual states and transition times for a user control (Windows Phone).

To modify the transition time between states

1. Create a reusable template for a system control, such as the Button control .

2. If you are not already in the editing mode of a template, right-click a control on the artboard, point to Edit Template, and then click Edit Current. Optionally select the object, and then click Template in the breadcrumb bar.

   

3. While Blend is in template-editing mode, the states of the button (such as Normal and PointerOver) are displayed in the States panel. States are contained in state groups (such as CommonStates and FocusStates).

   

   Next to CommonStates, you will see a text box with the value of 0 seconds ("0s"). This is the default transition duration for all the transitions between the states in the state group. For example, it takes 0 seconds to transition from any state to the Normal state. You can change this default transition duration.

4. Click Add transition  for the PointerOver state under CommonStates, and then click the PointerOver to Normal transition.

   

5. In the new line for the PointerOver to Normal transition, change the value in the text box from "0s" to "0.5s."

6. Save your work (Ctrl+S), and then press F5 to build and test your application. After your application opens in a browser window, move your pointer over the button to see how slowly it transitions back to its previous state when the pointer moves off the button.

You can also modify your control in the following ways:

• You can change the appearance of your button in different states.

  For more information, see Modify the appearance of a system control in different states (Windows Phone).

• You can add animation to your control.

  For more information, see Animating objects (Windows Phone).

• You can apply this template to another button in your project, or draw a new button that already has the template assigned.

See Also

Tasks

Define different visual states and transition times for a user control (Windows Phone)

Create a reusable template to style a system control (Windows Phone)