Add Behaviors to Objects in Expression Blend (Compact 2013)

3/26/2014

The following walkthrough demonstrates how to add behaviors and triggers to XAML objects by using Blend for Visual Studio. Once you have a functional Expression Blend project, you can then convert this project into a XAML for Windows Embedded project by using Windows Embedded XAML Tools.

To create an Expression Blend project

Perform the following steps to create a new Expression Blend project, to which you will add a behavior.

1. Start Blend for Visual Studio.

2. On the main menu, click File> New Project. In the New Project dialog box, select the Silverlight template folder on the left, and then select the XAML (Windows Embedded Compact) template on the right.

3. Enter a name and location for your project, and then click OK. The following figure illustrates the New Project dialog box.

   

To add an object and a behavior

Next, add an object to MainPage.xaml in your Expression Blend project, and then add and configure a behavior. For this walkthrough, you will add a Button control and associate a ChangePropertyAction behavior with it. This behavior will change the background color of the page when you click the button.

1. In the Asset window, select Controls. Locate the Button control and drag a button into the MainPage.xaml design area. You may resize the button or change any of its properties if you want.

2. Also in the Asset window, select Behaviors. Locate the ChangePropertyAction behavior. Drag this behavior into the design area and drop it onto the button.

3. Locate the Properties window for the behavior. You will notice that the behavior properties are divided into several categories. For this demonstration, you will configure settings in the Trigger and Common sections.

4. In the Trigger section, change the SourceName to the name of your button and the EventName to Click.

5. In the Common section, change the TargetName to LayoutRoot (this is the container for your Expression Blend project). Change the PropertyName to Background and select a background color in the Value control.
   The following figure illustrates these steps. Here, the design area has been split to also show the corresponding XAML code underneath.

   

to test the project

Testing the project is very simple. In Expression Blend, press F5, or select Run Project from the Project menu. The local Expression Blend server starts, and the XAML program runs. The following figure illustrates the running program, showing the behavior after the button has been clicked.

See Also

Concepts

Behaviors, Actions, and Triggers