Chapter 6

Adding Interactivity

After completing this chapter, you will be able to:

  • Use default Microsoft Expression Blend behaviors.
  • Run storyboards based on behaviors.
  • Use behaviors to change properties of objects.
  • Use the ToggleButton control.
  • Modify the properties of behaviors.
  • Create visual states and switch between them.
With Microsoft Expression Blend, you can add interactivity in several ways. For example, the standard developer method is to create event handlers and add code to handle the events. You were introduced to the basics of event handlers in Chapter 4, "XAML and C#.” By using this method, you can have any amount of interactivity you want in your application. Another avenue to interactivity is via behaviors. Behaviors were developed expressly for designers so that they could add interactivity to applications without writing code. To use behaviors, you simply drag the them onto objects in Expression Blend, set their properties, and enjoy the resulting interactivity. Expression Blend ships with several built-in behaviors, and the designers and developers of the Microsoft Expression Community actively add to that set by uploading their own behaviors to Expression Gallery, which you can find at http://cut.ms/YIr.

Using Default Microsoft Expression Blend Behaviors

In this section, you’ll use several default behaviors in your project. The most popular of these are ChangePropertyAction, GoToStateAction, and ControlStoryboardAction.
  • ChangePropertyAction
    • By using this behavior, you can easily change or increment the property of an object and then, optionally, define a transition. A few examples of such properties are Opacity, Visibility, Content, or Brushes for Background, Foreground, Border, and so on.
  • GoToStateAction
    • This behavior is very useful for switching visual states of your current scene. Use it to apply a trigger that activates a specified state.
  • ControlStoryboardAction
    • By using this behavior, you can control and manipulate existing storyboards. You have already used this behavior in Chapter 5.

Objects and Timeline Expression Blend

Running Storyboards Based on Behaviors

Sometimes you need to start an animation for an object in response to events that happen with other objects. In this exercise, you will see how to do that.

Running Storyboards Based on Behaviors

Using the ToggleButton Control

As you saw in the previous example, it’s easy to attach a behavior to a button, but sometimes you need opposite actions on the same event. For example, it would be nice if the first click on the button showed the InfoBar, the second click hid it, the third click showed it again, and so on. To implement this, you need a ToggleButton rather than a Button control. The ToggleButton works as a switch and has two states: Checked and Unchecked. For this reason, a ToggleButton is the best control for implementing a switch between any two states. In this exercise, you’ll see how it works for hiding and showing the InfoBar.

Triggers Expression Blend

Creating visual states and switch between them

You can add various kinds of interactivity to your application by using behaviors, as you’ve seen in the preceding exercises of this chapter. You can also create interactivity by defining a different visual appearance for each visual state of an element and then adding behaviors or code to switch between those states based on user actions. One specific behavior In Expression Blend, GoToStateAction, triggers visual state changes in the element to which you apply the behavior. This is a natural way to create several states for the existing game project.

Expression Blend States




You can easily make this a point to YOUR company OR hide it all together.