Using Behaviors is a way to add interactivity to your application without writing any code. Blend has strong support for Behaviors which allows you to simple drag and drop behaviors onto objects, set a few properties and you're up and running. Not only can you use the Behaviors included with Blend, you can also write your own or download Behaviors from the Expression Gallery.
In this tutorial, we will take a static lemonade stand and make it interactive by using the eight Behaviors included with Blend 3.
Select and right-click the Cup Grid in the Objects Panel. Choose Make Into UserControl. Keep the default name CupControl and hit OK.
Add a new Storyboard by clicking the “+” icon at the top of the Objects panel. On the popup change the name to DrinkLemonade and hit OK. To make editing the animation easier, change the Workspace by selecting from the top menu Window > Workspaces > Animation. Move the yellow playhead to the 0.5 second mark. With the Direct Selection Tool, select the top 3 points of the lemonadeWall Path. Select multiple points by holding Shift when clicking. Pull the points down to be parallel with lemonadeBottom. Bring lemonadeTop down and scale to match lemonadeBottom.
Reset the Workspace by selecting from the top menu Window > Workspaces > Design. Close the Storyboard by clicking the “x” icon at the top of the Objects panel. Open the Assets Panel and click Behaviors. Click and Drag ControlStoryboardAction onto the Cup Grid. The available properties for that behavior will now show in the Properties panel. Keep the default Trigger of MouseLeftButtonDown and the Option of Play and set the Storyboard property to DrinkLemonade.
On the Assets panel under Behaviors, drag a copy of the PlaySoundAction onto the Cup Grid. On the Properties panel click New to create a new Trigger. On the Select Object popup, select StoryboardCompletedTrigger and hit OK. From the dropdown select the DrinkLemonade as the Storyboard. Set the source to “drinksound.mp3” and the volume to 1.
Now to throw away the cup after you enjoy it. On the Assets panel under Behaviors, drag a copy of the RemoveElementAction onto the Cup Grid. Just like the last step, set the Trigger to the Completed event of the DrinkLemonade Storyboard.
Switch back to MainPage.xaml and make sure there is an instance of the CupControl on the Artboard. Hit F5 to Run the Project and click the cup. If the Behaviors are hooked up properly, the DrinkLemonade animation should play removing the lemonade followed by the cup disappearing and a satisfied “Ahhh” sound.
On the Assets panel under Behaviors, drag a copy of the FluidMoveBehavior onto stackPanel. On the Properties panel, set AppliesTo equal to Children, duration to 00:00:00.5 and EaseX to Cubic In. Now move the CupControl into stackPanel, by clicking and dragging the CupControl over stackpanel and holding down the Alt key. Copy and Paste six more CupControls into stackPanel.
On the Assets panel under Behaviors, drag a copy of the ChangePropertyAction onto the TextBlock. On the Properties panel, change the EventName to MouseEnter and the PropertyName to Opacity. Set Value to 100%. Drag another copy of the ChangePropertyAction onto the TextBlock. This time set the EventName to MouseLeave, PropertyName to Opacity and the Value to 20%. Set the Duration to 00:00:01 and the Ease to Exponential In.
Hit F5 to Run the Project and if the new Behaviors are setup correctly, the cups will load by sliding across the top of the stand. And the “Lemonade” sign will now act like a link that is clickable and responds to MouseEnter and MouseLeave events. Nice job, now let’s add some color to the scene.
On the Assets panel, click the Project tab and double-click the BalloonControl to add an instance to the Grid. Now navigate back to the Behaviors tab in the Assets panel and drag a copy of MouseDragElementBehavior onto the BalloonControl in the Objects panel. This Behavior simply allows the object it’s attached to be dragged around the screen with a mouse click and has no properties exposed for customization.
On the Assets panel under Behaviors, drag a copy of the GoToStateAction onto the BalloonControl. On the Properties panel, press New to create a new Trigger. On the Select Object popup, select KeyTrigger and hit OK. Change the Key to Left and click the circular target icon next to TargetName. Move your mouse over the Grid and you will notice elements are highlighted and your cursor has changed. Click the BalloonControl to make it the Target of your Behavior. Click the StateName dropdown and you will now see a list of the BalloonControl states. Select the Red State. Add two more GoToStateActions to balloonControl, linking the Up key to the RedGreen State and the Right key to the RedGreenBlue State.
Hit F5 to Run the Project, and you can now use the mouse to drag and drop the balloons to a new position. Using the key controls Left, Up, Right you can control how many balloons are displayed. And you can still click the sign and enjoy a good glass of lemonade. All of this by dragging and dropping behaviors onto elements and setting a few properties. Write the code once (or get your friend to do it) and reuse over and over.