Change state in response to user interaction

This page applies to Silverlight 2 projects only

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.


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.

  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 Dd185503.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(en-us,Expression.10).png button to switch from the properties view to the events view.


    To switch the Properties panel back to the properties view, click the Properties Dd185503.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(en-us,Expression.10).png button.

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


    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);
        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 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 Dd185503.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png, 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

Community Additions