Modify the appearance of a system control in different states (Windows Phone)

Controls look different depending on which state they are in. For example, a button changes color slightly when you move the mouse pointer over it. PointerOver is one of the states of a button. You can customize the appearance of different states of system controls.

Modify the appearance of a Button control

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

To modify the appearance of a button in different 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 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).

   

   The parts of the template are displayed in the Objects and Timeline panel. It is the appearance of these parts that you can modify for a selected state.

   

4. Click PointerOver in the States panel. Notice that a red circle appears at the top of the artboard to let you know that state recording is on. This means that any property changes you make will be recorded for the selected state. In the Objects and Timeline panel, the parts of the template that have properties set differently from when Base is selected are identified by red circles around the expander buttons.

5. To change the size of the button when in the PointerOver state, click [Grid] in the Objects and Timeline panel.

Tip

The Grid is a layout panel that arranges child objects according to horizontal alignment, vertical alignment, and margins.

6. In the Properties panel, under Transform, click the Scale tab . Change the X and Y values to 1.1.

7. 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 mouse pointer over the button to see it expand.

Troubleshooting

• Some template parts have properties that are bound to values outside the template. For example, the Fill property of the Background part is template-bound to the Background property of the button. This means that when you draw a button that uses this template, the template will take on the value that you set on the button itself. Template binding makes it possible to design a customized control, but still enable some changes when you include the controls in your application.

  Bound properties are identified in the template by a yellow bounding box. If you want to change a template-bound property, first click Advanced options  next to the property, and then click Reset.

• You cannot add custom states and state groups to the template of a system control. However, you can create a custom user control and then define custom states and add code to change states based on user interaction.

  For more information, see the following topic:

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

Next steps

• You can change the time it takes the button to expand when the mouse pointer moves over it. For more information, see Modify the transition time between state changes (Windows Phone).

• You can add animation, such as making the button spin around when the mouse pointer moves over it. 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

Modify the transition time between state changes (Windows Phone)

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