Change states 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 click), you add event handler methods to call the GoToState method.

For more information, see GoToState  on MSDN.

Note

In a Microsoft Silverlight project, 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 can't 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 states in response to a click

To change states, you can use the GoToStateAction behavior, or you can use an event handler method.

For information about using a behavior, see Add a behavior to an object.

The following procedure shows you how to add an event handler method to change state.

1. If you have not already created state groups and states, you can define different visual states and transitions 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).

   For more information, see Define different visual states and transition times for a user control.

   

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

3. In the Objects and Timeline panel, 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 Events  to switch from the properties view to the events view.

   Tip

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

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 the code-behind file for the user control in a code editor and pastes in the code for the event handler method.

   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, see Modify 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 bold 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 2010, you might not have the Silverlight tools for Visual Studio 2010 installed. Install the tools and then try to type a name into the Events panel in Expression Blend.

  For more information, see Microsoft Silverlight Tools for Visual Studio 2010 .

• 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 Assets panel (click Assets ), select your user control from the Project category, and then draw the user control on the artboard.

• If you have trouble building your application, you might not have the correct version of Silverlight installed.

  For more information, see Install the Silverlight tools and runtime.

Next steps

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

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.