Create a button that controls a storyboard in a Silverlight application

Creating a button in a Microsoft Silverlight 1.0 application involves drawing the elements that make up the button, wrapping them in a layout panel for easy copying, and writing JavaScript code that will perform some action when button events occur (such as when someone clicks your button).

Note

For a complete sample using multiple button events, see the ButtonGallery sample, which you can open by clicking Welcome Screen on the Help menu, and then clicking ButtonGallery on the Samples tab.

Draw the elements of your button

You can use any elements to create the look of your button, including shapes, lines, text, and images. The following procedure shows you how to draw a rectangle and a text block, but you could use any one of the procedures listed in the Add elements to a XAML document in a Silverlight project topic.

To draw the elements of your button

1. With a Silverlight 1.0 project open in Microsoft Expression Blend 2, select the Rectangle tool from the Toolbox.

   

   If you cannot see the Rectangle tool, right-click the tool containers to locate and select the Rectangle tool.

   

2. Draw a rectangle on the artboard by dragging your pointer. As you draw, the pointer will change to a crosshair .

   

3. With the new rectangle element selected under Objects and Timeline, change its appearance. For example, under Brushes in the Properties panel, click Fill on the Gradient brush  tab, and then define colors for the gradient stops.

   

   Note

   You can make more changes to the appearance of the rectangle by using the procedures in Appearance and Transformations.

4. Select the TextBlock control from the Toolbox.

   

5. Draw a text block element on top of the rectangle. You might have to resize the rectangle or the text block elements or move them around by selecting the Selection tool  from the Toolbox and dragging the blue adorners around the elements on the artboard.

   

6. With the new text block element selected under Objects and Timeline, press F2 to enter text-editing mode, and type Button to change the text that is displayed in the element. Click outside the text block element to exit text-editing mode.

   Note

   For more information about how to modify the appearance of your text block, see the topics under Text and typography.

7. To finish the look of your button, you can draw more elements on the artboard using the procedures listed in Add elements to a XAML document in a Silverlight project.

Back to top

Wrap your button elements in a layout panel

By wrapping your button elements in a single layout panel (a Canvas element), you simplify the process of duplicating your button. This is because you can copy and paste the layout panel instead of selecting all the elements that make up your button and then duplicating them. Additionally, wrapping your button elements in the Canvas layout panel also makes it simpler to create event handlers for your buttons. For example, you can create an event handler that responds when the pointer moves across the layout panel as a whole instead of responding when the pointer moves across a part of the button.

To wrap elements in a layout panel

1. Under Objects and Timeline, hold the CTRL key when you select all the elements that make up your button.

2. Right-click your selected elements, point to Group Into, and then click Canvas.

   

3. Right-click the new canvas element under Objects and Timeline, click Rename, enter a new name for your button (for example MyButton), and then press ENTER.

   Now, when you want to duplicate your button, you can copy and paste the MyButton element.

Back to top

Create an animation storyboard to change the appearance of your button

Typically, when users click a button in an application, the button shows a visible change. The following procedure shows you how to create an animation storyboard that makes your button elements expand.

Note

You could animate any elements in your application, not just the elements that belong to the button. For example, you could have a small image that would circle around your button when it is clicked.

To create the animation storyboard

1. Under Objects and Timeline, click the New button .

   

   The Create Storyboard dialog box opens.

   

2. By default, the Name of your storyboard is Storyboard1. Keep the name as Storyboard1 because the code in the next procedure refers to that name.

3. Also by default, the Create as Storyboard check box is selected. Do not clear the check box because you do not want the animation to run immediately when the application is loaded in the browser window. Instead, you want the animation to be completely controlled (started and stopped) by code.

4. Click OK.

   Expression Blend creates the storyboard and enters animation mode.

   

   Note

   You could optionally change the location of the Interaction panel by pressing F6. When the Interaction panel is under the artboard, you can view more of the timeline.

5. Under Objects and Timeline, select the MyButton element.

6. Above the timeline, click the Record Keyframe button .

   A new keyframe is set to record the current appearance of the button elements.

7. Move the timeline playhead  to the half-second mark (the animation's ending time) and click the Record Keyframe button  again.

   A new keyframe is set to record the current appearance of the button elements. The button will resemble this at the end of the animation.

   

8. Move the timeline playhead  to the quarter-second mark. This is where you will create a change in the appearance of your button.

   Note

   If you cannot move the timeline to exactly the quarter-second mark (0:00.250), it is because the snap resolution is too low. To increase the snap resolution, click the Snapping options button , set the Snap resolution per second to 20, and then click OK.

9. With the timeline playhead at the quarter-second mark and the MyButton element selected, change the size of your button on the artboard. You can do this by dragging the bottom-right resizing handle when holding the ALT key to maintain the center point.

   

   New keyframes are automatically added to the timeline at the quarter-second mark to record the new size and position of your button. Notice that a RenderTransform element has been added under Objects and Timeline to specify the new size (Scale) and new position (Translation) of your button, and that keyframes for these elements have been added where you had set keyframes on MyButton earlier. Expression Blend assumes that you want to animate from the starting and ending keyframes that were set on MyButton. Therefore, it sets starting and ending keyframes on the RenderTransform element for you.

10. Click the Play  button to test your animation.

11. Exit animation mode by clicking the Close Storyboard button . This makes sure that any changes that you make to your elements now are not a part of the animation storyboard.

12. Save all your files.

Back to top

Create an event handler to trigger the animation storyboard when your button is clicked

The work of registering an event handler and writing the code for the event handler can all be done in the code-behind file. This enables programmers and designers to work separately, easily combining the presentation of an application and the code when both are finished. Additionally, a programmer could cause other actions to occur when a button is clicked by adding code to the event handler, such as navigating to a web page. For an example, see Create a hyperlink in a Silverlight application.

To create the event handler

1. In the Project tab, double-click the code-behind file, Page.xaml.js, to open it for editing.

   The Page.xaml.js file already contains the following JavaScript code:

   • A definition for the Page object.

   • Registration for the MouseLeftButtonDown event.

   • A definition of the event handler for the MouseLeftButtonDown event.

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   Note

   For information about JavaScript in Microsoft Silverlight and the structure of objects, see Scripting and mouse events.

2. The code to call your storyboard when the left mouse button is clicked is already present, but commented out using double slashes (//).

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

   Remove the double slashes to uncomment the code.

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

3. Save all your files.

4. Test your project by clicking Test Project on the Project menu, or by pressing F5.

   If the test build is successful, your project will automatically open in your default web browser by using the local development server that is included with Microsoft Expression Studio. For more information about how to test Silverlight projects, see Test a Silverlight project from Expression Blend.

   Click your button to see whether your storyboard is triggered. Notice that clicking anywhere inside the browser also triggers your storyboard. This is because the event handler was registered in the scope of the root element (Page).

5. Comment out the line of code where the event handler is registered by adding double slashes in front of the line so that it resembles the following:

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. Add the following line of code after the line that was commented out:

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   Notice that the only difference between these two lines of code is the element on which the event handler is registered. In the line that you commented out, the event handler was registered on the rootElement. In the line that you pasted in, the event handler was registered on the MyButton element by using the findName method to locate the element.

7. Save all your files again.

8. Test your project by clicking Test Project on the Project menu, or by pressing F5.

   Click your button, and click away from your button, to confirm that the animation storyboard is triggered only when you click your button.

Back to top

See also

Concepts

Test a Silverlight project from Expression Blend