Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Creating a Movie Viewer for Silverlight 1.0

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Microsoft ilverlight and Rich Internet Applications

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Creating a Movie Viewer for Silverlight 1.0

This example runs on Silverlight 1.0 Release Candidate, and the user interface was created using Expression Blend 2 August Preview.

Creating a Movie Viewer for Silverlight 1.0

 

Our first example application is a movie viewer (Fig. 19.1) that plays Windows Media Video (WMV) videos. This example runs on Silverlight 1.0 Release Candidate, and the user interface was created using Expression Blend 2 August Preview. The XAML was gen-erated primarily by Expression Blend. We discuss the XAML as we show you how to build the user interface.

 

The movie viewer’s GUI includes play/pause, stop and full-screen buttons, a timeline with a marker at the current time, a volume control and thumbnails of other videos that you can view. The timeline also shows the percentage of the video that has been down-loaded. In this example, you’ll learn to create user interfaces in XAML and to use Java-Script to handle events. We’ll also demonstrate how to use JavaScript to manipulate the Silverlight DOM (Document Object Model). You can test a live version of this application at test.deitel.com/examples/iw3htp4/silverlight/MovieViewer/index.html.

 

To create the project in Expression Blend, open Expression Blend and select New Project in the Project tab. To create a Silverlight 1.0 application, select Silverlight Applica-tion (JavaScript). Name the project MovieViewer and select the location where you would like to save it.




1. Creating a User Interface In XAML Using Expression Blend


 

To show how XAML works, we first create elements in Expression Blend, then discuss the corresponding generated XAML in Scene.xaml (which you’ll see in Fig. 19.12).

Canvas Elements

The root element of the XAML file is a Canvas element. A Canvas element acts as a container for other user interface elements and controls their position. The parent Canvas el-ement is created when you create a new Silverlight project in Expression Blend. The parent Canvas has a default Name of Page, Width of 640 px and Height of 480 px. The Name attribute provides an ID to access the element programmatically. The Canvas’s properties can be edited in the Properties panel (Fig. 19.2). Additional Canvas elements can be cre-ated in Expression Blend using the Canvas tool in the toolbar, shown in Fig. 19.3. The XAML can be manually edited by selecting XAML in Expression Blend’s View menu.


2. Using Storyboards

 

The Storyboard element allows you to define animations. In Expression Blend, you can create a Storyboard by opening the Open, create or manage Storyboards panel and click-ing the Create new Storyboard button (Fig. 19.4). Select the Create as a Resource check-box (Fig. 19.5). This enables you to start the Storyboard from anywhere in the application’s JavaScript at any time (as opposed to starting the Storyboard automatically when the application loads). Name the Storyboard timelineTimer and click OK. This Storyboard will be used as a timer, because a dedicated timer object does not exist in Sil-verlight 1.0. A Storyboard must have a target object, so we will create an invisible object. Create a Rectangle of any size in any location using the Rectangle tool, name it invisi-bleRectangle, then set its Visiblity to Collapsed using the Properties panel. Move the time-line playhead to 0.1 seconds, then click the Record Keyframe button (Fig. 19.6). In this



new keyframe, change any property of the rectangle. If you create the keyframe without changing a property, the Storyboard will not do anything. Close the Storyboard by opening the Open, create or manage Storyboards menu and clicking Close Storyboard.

 

Expression Blend provides the Gradient brush tool (Fig. 19.7) to visually create and modify gradients. First, use the Selection tool to select the Page Canvas in the design area. Then, select the Gradient brush for the Background and select the gradient slider on the right (Fig. 19.7). Change the red, green and blue values to 71.




Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.