Use built-in behaviors in Blend to add interactivity (HTML & JavaScript)

With Blend for Visual Studio you can create interactive applications using built-in drag and drop behaviors.

In this example, you’ll use one of the built-in JavaScript behaviors in Blend to change a message in the app when user begins dragging an item in a list, and then change it back when the user stops dragging the item.

To follow along with this example, download this project from the samples gallery. That way, you can review not only the code, but you’ll also have all of the assets you need to follow along and modify the project as you go.

This sample app includes a list view that displays an illustrated list of flavors. You can reorder the list by dragging items from the existing location and placing them somewhere else in the list. This example builds on the sample app by using behaviors to display different messages when the user drags an item, and then drops the item in a new location.

Defining a behavior

Behaviors have two parts: a trigger, and an action. A trigger reacts to an event (a mouse click, for example), and that trigger invokes one or more actions.

To apply a built-in behavior in Blend, you first add the behavior to the element. You then define the trigger that you want the behavior to respond to, and then you define the action that you want to have occur.

In this example, you'll define two behaviors (two EventTriggerBehavior behaviors). You'll then define an event trigger for each behavior. The first trigger is an itemdragstart event (dragging the item), and the second trigger is an itemdragend event (dropping the item).

Each trigger raises two SetStyleAction actions: one SetStyleAction sets the selected div visibility property to hidden, and the other SetStyleAction sets the selected div visibility property to visible.

In the finished app, when the user starts dragging the item in the list, the "Mix it up!" message is visible, and the "Pick a flavor!" message is hidden. When the user stops dragging the item, the "Mix it up" is hidden, and the "Pick a flavor!" is visible.

Hide the "Mix it up!" message

When you open the sample app, both of the messages ("Pick a flavor!" and "Mix it up!") are visible. By default, you want the "Pick a flavor!" message to be visible, and the "Mix it up!" message to be hidden. To achieve this, you set the default visibility property for the #mixit div (which contains the message "Mix it up!") to hidden.

To hide the "Mix it up!" message

1. If you downloaded the project, open the Sample ListView Drag and Drop for Blend Behaviors folder, and then open the JavaScript folder. Right-click the Controls_ListViewReorderDragDrop.sln file, click Open With, and then click Blend for Visual Studio.

2. In the Live DOM panel, locate the #mixit div by typing mix in the Search text box, or by clicking the "Mix it up!" message on the design surface.

   Tip

   If you search for the #mixit div in the Live DOM panel, you may need to expand objects in the hierarchy to locate it.

3. In the Properties panel, type vi in the Search text box to locate the visibility property. In the visibility drop-down list, click hidden.

   

The "Mix it up!" message on the design surface is no longer visible.

Add a built-in behavior

You can add a built-in behavior in one of two ways:

• You can drag the behavior from the Assets panel onto the element in the Live DOM panel or on the design surface.

• You can apply a behavior to the selected element by clicking Add New Behavior in the Behaviors category in the HTML Attributes panel.

In this example, you'll use the HTML Attributes panel to add and define the behaviors.

To add the behavior

1. In the Live DOM panel, type list into the Search text box to locate listView in the object hierarchy.

2. With listView selected in the Live DOM panel, in the HTML Attributes panel, in the Behaviors category, click Add new behavior .

3. In the Add New Behavior dialog box, click EventTriggerBehavior, and then click OK.

   

   Notice in the Live DOM panel that a blue marker appears on the listView to indicate that a behavior is attached to it.

   

Define the event trigger

The EventTriggerBehavior invokes an action when an event is fired. Now that you've added the behavior, you can choose which event you want the behavior to respond to. In this example, you'll use the itemdragstart event. The itemdragstart event is raised when a user begins to drag an item from a ListView control. For more information, see ListView.onitemdragstart event.

To define the itemdragstart event for the EventTriggerBehavior

• With the EventTriggerBehavior selected in the Behaviors category of the HTML Attributes panel, in the event drop-down list, click itemdragstart. Leave sourceSelector blank.

  Tip

  You can also type in the value editor to more easily locate the event that you want in the list.

  

Add and define the actions for itemdragstart event

The SetStyleAction sets a new property for the selected element when the trigger is fired. The first SetStyleAction action for the itemdragstart event hides the "Pick a flavor!" message when the user starts dragging the item.

To add and define the first SetStyleAction for the itemdragstart event

1. In the Behaviors category, click Add action  to the right of Triggered Actions.

2. In the Add New Behavior dialog box, click SetStyleAction, and then click OK.

   

3. In the styleProperty drop-down list, click visibility. Press Enter.

   

   The styleValue attribute appears.

4. In the styleValue drop-down list, click hidden.

   

5. In the targetSelector text box, type #pickit.

   

The second SetStyleAction action for the itemdragstart event shows the "Mix it up!" message when the user starts dragging the item.

To add and define the second SetStyleAction for the itemdragstart event

1. Click Add action  to the right of Triggered Actions.

2. In the Add New Behavior dialog box, click SetStyleAction, and then click OK.

3. In the styleProperty drop-down list, click visibility. Press Enter.

   The styleValue attribute appears.

4. In the styleValue drop-down list, click visible.

5. In the targetSelector text box, type #mixit.

   

Add the second behavior

Now that you've finished defining the behavior for when the user starts dragging the item (the itemdragstart event), the next step is to define the behavior for when the user stops dragging the item (the itemdragend event).

To add the second behavior

1. Make sure the listView is still selected in the Live DOM panel. In the HTML Attributes panel, in the Behaviors category, click Add new behavior .

2. In the Add New Behavior dialog box, click EventTriggerBehavior, and then click OK.

Define the event trigger

Next, you'll define the itemdragend event for the second EventTriggerBehavior. The itemdragend event is raised when the user drops an item dragged from a ListView control. For more information, see ListView.onitemdragend event.

To define the itemstartend event for the EventTriggerBehavior

• With the EventTriggerBehavior selected in the Behaviors category of the HTML Attributes panel, in the event drop-down list, click itemdragend. Leave sourceSelector blank.

  

Add and define the actions for itemdragend event

The first SetStyleAction action for the itemdragend event shows the "Pick a flavor!" message when the user stops dragging the item.

To add and define the first SetStyleAction action for the itemdragend event

1. In the Behaviors category, click Add action  to the right of Triggered Actions.

2. In the Add New Behavior dialog box, click SetStyleAction, and then click OK.

3. In the styleProperty drop-down list, click visibility. Press Enter.

   The styleValue attribute appears.

4. In the styleValue drop-down list, click hidden.

5. In the targetSelector text box, type #pickit.

   

The second SetStyleAction action for the itemdragend event hides the "Mix it up!" message when the user stops dragging the item.

To add and define the second SetStyleAction action for the itemdragend event

1. Click Add action  to the right of Triggered Actions.

2. In the Add New Behavior dialog box, click SetStyleAction, and then click OK.

3. In the styleProperty drop-down list, click visibility. Press Enter.

   The styleValue attribute appears.

4. In the styleValue drop-down list, click visible.

5. In the targetSelector text box, type #mixit.

   

You can now use interactive mode to run the app, or press F5 to build and run your app. If you begin to drag an item in the list view, the message changes to "Mix it up!" When you stop dragging the item, the message returns to "Pick a flavor!"

Press Alt+F4 to close the app.