Change state in response to user interaction

When you create your own user control, you can add states and state groups to change the appearance of your user control depending on which state it is in. To change these states in response to user interaction (such as a mouse click), you add event handler methods to call the GoToState method.

Note

When you modify the template of a system control, such as a button, default states are already defined, in addition to the response of the control to user interaction. You cannot add or remove the default states. However, you can change the appearance of the control in those different states, and you can use the following procedure to change states.

To change state in response to a mouse click

1. If you have not already created state groups and states, you can Define different visual states and transition times for a user control. For example, the following image shows a user control that represents a card in a card game. The SideDisplayed state group includes a state that displays the card face up (FaceUp), and a state that displays the card face down (FaceDown).

   

2. Under States, select Base to turn off state recording.

3. Under Objects and Timeline, select the [UserControl] object to hook up an event that will respond to action over the surface area of the whole user control.

4. In the Properties panel, click the Events  button to switch from the properties view to the events view.

   Tip

   To switch the Properties panel back to the properties view, click the Properties  button.

5. Next to the MouseLeftButtonDown event, enter a name for the event handler method, such as "goClick."

   

   Tip

   Alternatively, you can simply double-click in the event text box to generate a default name for the event handler method.

   After you press ENTER, Microsoft Expression Blend opens your project in Microsoft Visual Studio 2008 if you have it installed. If you do not have a code editor installed, Expression Blend copies the code for the event handler method to the Clipboard so that you can open the code-behind file for the user control in a text editor and paste in the code from the Clipboard.

   private void goClick(object sender, MouseButtonEventArgs e)
   {
   
   }
   

   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
   
   End Sub
   

   For more information about Visual Studio 2008 interoperability with Expression Blend, see Edit a code-behind file.

6. To make your user control change state, call the GoToState method with the name of the state. For example, paste the following boldfaced code into your code-behind file:

   private bool isFaceUp = false;
   
   private void goClick(object sender, MouseButtonEventArgs e)
   {
     if (isFaceUp)  {    VisualStateManager.GoToState(this, "FaceDown", true);  }  else  {    VisualStateManager.GoToState(this, "FaceUp", true);}  isFaceUp = !isFaceUp;
   }
   

   Private isFaceUp As Boolean = False
   
   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
     If isFaceUp Then    VisualStateManager.GoToState(Me, "FaceDown", True)  Else    VisualStateManager.GoToState(Me, "FaceUp", True)  End If  isFaceUp = Not (isFaceUp)
   End Sub
   

7. Build your project (CTRL+SHIFT+B).

8. Test your project (F5), and then click your user control to see it change states.

Troubleshooting

• If you get the error "Cannot change the code-behind file. The following class was not found" when you type a name into the Events panel in Expression Blend, you may have to switch to your external code editor (typically Microsoft Visual Studio) to reload the solution. Reloading will include the new files that define the missing class. If you get the error "Cannot load the solution" in Visual Studio 2008, you might not have the Microsoft Silverlight Tools for Visual Studio 2008 installed. Install the tools and then try to type a name into the Events panel in Expression Blend.

• If you do not see your user control when you test your project (F5), and the browser window does not indicate an error, you might not have drawn an instance of your user control in the startup document. The startup document is the first document that appears when you run your application. If you created a user control in a separate document, you have to build your project (CTRL+SHIFT+B), open your startup document (typically Page.xaml) open the Asset Library , select your user control from the Custom Controls tab, and then draw the user control on the artboard.

• If you have trouble building your application, you might not have the correct version of Microsoft Silverlight installed. For more information, see Install the Silverlight 2 tools and runtime.

Next steps

• You can add animation, such as making the button spin around when the mouse pointer moves over it. For more information, see Add animation that will play after a change in state.

• You can see real-life scenarios that use states and state groups in the "How Do I?" video tutorials at the Expression community website.