Share via

Create a Silverlight 1.0 site that has interactivity

  • Article

This page applies to Silverlight 1 projects only

Interactivity in Microsoft Silverlight 1.0 applications is created by using event handlers in the JavaScript code-behind files of the XAML documents where you design your user interface. The following procedure shows you how to make your application play an animation storyboard in response to a mouse click.

To create a Silverlight 1 site that has interactivity

  1. In Microsoft Expression Blend, click New Project on the File menu.

    The New Project dialog box appears.

    Cc296370.ef6e983a-52a3-4258-a42d-a76beb1e48f1(en-us,Expression.10).png

  2. Under Select a project type, click Silverlight 1.0 Site. The other fields display default values for the project name and location. You can leave those fields as they are and click OK.

    A new Silverlight project is created and the startup page, Page.xaml, opens for editing.

  3. From the Toolbox, select the Pen Cc296370.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png tool. Draw a curving shape by clicking to create points and dragging to create curves. Click on the first point to close the shape.

    Cc296370.25239939-a612-49fd-9b4a-743971738d5e(en-us,Expression.10).png

    For a list of ways to modify a path with your mouse, see Pen and direct selection usage.

  4. Right-click your new path object under Objects and Timeline, click Rename, and then enter the name MyPath.

    Cc296370.93b269b5-d07e-4b73-9543-644f6e50e0fd(en-us,Expression.10).png

    If an object is going to be referenced from a code-behind file, it needs a name. This object will need to be referenced from code in order to hook up a Click event handler.

  5. Under Objects and Timeline, click the New Cc296370.86937695-03dd-44ea-aa30-28d4029b3ad0(en-us,Expression.10).png button. The Create Storyboard dialog box appears. Leave the Name field as Storyboard1 and the Create as a Resource checkbox selected, and then click OK.

    Cc296370.68230d0a-c687-4ca3-af6a-63e7f2e7a9a7(en-us,Expression.10).png

    A new storyboard is created and timeline recording is turned on.

  6. With the timeline playhead Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.10).png at the 0-second mark, click the Record Keyframe button to record the current position of the MyPath object.

    Cc296370.a9d19126-f7dd-43b9-9663-6a39e02af8e6(en-us,Expression.10).png

  7. Move the timeline playhead Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(en-us,Expression.10).png to the 1-second mark, and then use the Selection tool to move the MyPath object. A keyframe is set at the 1-second mark to record the new position of the MyPath object.

    Cc296370.8a2c43ac-1a9f-497d-8aab-5e94c74d1560(en-us,Expression.10).png

  8. In the Project panel, double-click the Page.xaml.js file to open it for editing.

  9. Uncomment the following line of code by removing the // characters:

                    // this.control.content.findName("Storyboard1").Begin();

    Cc296370.76e80641-82b4-4cb5-bb0d-447c70a01f8a(en-us,Expression.10).png

    Expression Blend 2 generates initial JavaScript code to show you how to hook up an event handler to a mouse button click on the root element. The event handler calls the Begin method for Storyboard1, which is why you did not change the Name field when you created the storyboard. For more information about Silverlight 1.0 scripting, see Silverlight scripting and mouse events.

  10. Test your Silverlight 1.0 site by pressing F5 and clicking in the browser window to trigger the animation storyboard.

See also

Concepts

Create a button that controls a storyboard in a Silverlight application

Create, modify, or delete a storyboard

Modify a storyboard to repeat or reverse at the end of its cycle