Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Change states in response to user interaction

Visual Studio 2012

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 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, 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.

To change states in response to a click

  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 6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd to switch from the properties view to the events view.

    Tip Tip

    To switch the Properties panel back to the properties view, click Properties cee1494c-ef95-4dd4-9fbc-9d02edfa78b7.

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

    Tip 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, Blend for Visual Studio 2012 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);  
        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)  
        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.

  • 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 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 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 0d8b8d29-1af9-418f-8741-be3097d76eab), 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.

© 2015 Microsoft