Upgrade your Internet Experience
Welcome Sign in
|
Microsoft.com
|
Expression Product Site
|
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.

Dd185503.alert_note(en-us,Expression.30).gifNote:

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.

    Dd185503.74c3b2ef-32ab-4aaa-839d-852741d9b2c2(en-us,Expression.30).png

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

    Dd185503.alert_tip(en-us,Expression.30).gifTip:

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

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

    Dd185503.98d2b5bb-eedc-4a13-bf87-7b7514868f87(en-us,Expression.30).png
    Dd185503.alert_tip(en-us,Expression.30).gifTip:

    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.

    C# 
    private void goClick(object sender, MouseButtonEventArgs e)
{

}

    Visual Basic 
    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:

    C# 
    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;  
}

    Visual Basic 
    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 Silverlight tools for Visual Studio 2008 installed. Install the tools and then try to type a name into the Events panel in Expression Blend.

    For more information, see Microsoft .

  • 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 Dd185503.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.30).png), 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

Page view tracker