slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Silverlight, Rich Internet Applications and Multimedia PowerPoint Presentation
Download Presentation
Silverlight, Rich Internet Applications and Multimedia

Loading in 2 Seconds...

play fullscreen
1 / 96

Silverlight, Rich Internet Applications and Multimedia - PowerPoint PPT Presentation


  • 140 Views
  • Uploaded on

24. Silverlight, Rich Internet Applications and Multimedia. Had I the heavens’ embroidered cloths, Enwrought with gold and silver light. William Butler Yeats This world is but a canvas to our imaginations. Henry David Thoreau Something deeply hidden had to be behind things. Albert Einstein.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Silverlight, Rich Internet Applications and Multimedia' - arawn


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
24
  • Silverlight, Rich Internet Applications and Multimedia
slide2
Had I the heavens’ embroidered cloths,Enwrought with gold and silver light.

William Butler Yeats

This world is but a canvas toour imaginations.

Henry David Thoreau

Something deeply hidden hadto be behind things.

Albert Einstein

slide3
Individuality of expression is thebeginning and end of all art.

Johann Wolfgang von Goethe

It is my intention to present—through themedium of photography—intuitive observationsof the natural world which may have meaningto the spectators.

Ansel Adams

objectives
OBJECTIVES

In this chapter you will learn:

  • What Silverlight is and how it relates to Windows Presentation Foundation.
  • To use Silverlight controls to create Rich Internet Applications.
  • To create custom Silverlight controls.
  • To use animation for enhanced GUIs.
  • To display and manipulate images.
  • To use Silverlight with Flickr’s web services to buildan online photo-searching application.
  • To create Silverlight deep zoom applications.
  • To include audio and video in Silverlight applications.
slide5
24.1   Introduction
  • 24.2   Platform Overview
  • 24.3   Silverlight Runtime and Tools Installation
  • 24.4   Building a Silverlight WeatherViewer Application
  • 24.4.1  GUI Layout
  • 24.4.2  Obtaining and Displaying Weather Forecast Data
  • 24.4.3  Custom Controls
  • 24.5   Animations and the FlickrViewer
  • 24.6   Images and Deep Zoom
  • 24.6.1  Getting Started With Deep Zoom Composer
  • 24.6.2  Creating a Silverlight Deep Zoom Application
  • 24.7   Audio and Video
  • 24.8   Isolated Storage
24 1 introduction
24.1  Introduction
  • SilverlightTMis Microsoft’s platform for building Rich Internet Applications (RIAs)
  • RIAs are comparable in responsiveness and rich user interactivity to desktop applications.
  • Silverlight is a robust, cross-platform, cross-browser subset of the .NET platform.
  • Silverlight is a subset of WPF.
24 1 introduction cont
24.1  Introduction (Cont.)
  • Silverlight supports multimedia—images, graphics, animation, sound and video.
  • Most computers sold today are “multimedia ready,” with CD-RW and DVD drives, audio boards and special video capabilities.
  • Computers will be needing faster processors, larger memories and wider communications bandwidths.
  • WPF and Silverlight, through .NET 3.5, provide facilities for developing powerful multimedia applications.
24 2 platform overview
24.2  Platform Overview
  • Silverlight runs as a browser plug-in on popular browsers and operating systems.
  • Silverlight applications consist of user interfaces described in XAML and code-behind files containing application logic.
  • Silverlight 2 includes APIs for collections, input/output, generics, multithreading, globalization, XML and LINQ.
  • It also includes APIs for interacting with JavaScript and the elements in a web page, and APIs for local storage.
  • Like WPF, Silverlight provides a powerful data-binding model.
24 3 silverlight runtime and tools installation
24.3  Silverlight Runtime and Tools Installation
  • Install the Silverlight 2 Runtime plug-in from www.microsoft.com/silverlight/resources­/installationFiles.aspx?v=2.0.
  • You’ll also need the Silverlight Tools Beta 2 for Visual Studio 2008 from go.microsoft.com/fwlink/?LinkId=120319.
  • Microsoft also provides the Silverlight 2 SDK Beta 2, obtainable at www.microsoft.com/downloads/ and searching for “Silverlight 2 SDK”.
24 4 building a silverlight weatherviewer application
24.4  Building a Silverlight WeatherViewer Application
  • A basic Silverlight application has two XAML files:
      • Page.xaml defines the application’s GUI.
      • App.xaml declares your application’s shared resources that can be applied to various GUI elements.
  • Since our example applications contain only a single page, we do not use App.xamlandApp.xaml.cs.
24 4 building a silverlight weatherviewer application cont
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • Select File > New Project... in Visual Studio 2008.
  • In the Project types window under Visual C#, select the Silverlight option. Then in the Templates window, select Silverlight Application.
  • In the Add Silverlight Application dialog, select Add a new Web to the solution for hosting the control. In the ProjectType drop-down menu, select WebSite.
24 4 building a silverlight weatherviewer application cont1
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • The Page.xaml file (Fig. 24.1) is similar to the default XAML for a WPF application.
  • In Silverlight, the root element is a UserControl.
24 4 building a silverlight weatherviewer application cont2
24.4  Building a Silverlight WeatherViewer Application (Cont.)

Silverlight project

Web Application project

Fig. 24.1|New Silverlight application in Visual Studio.

24 4 building a silverlight weatherviewer application cont3
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • A compiled Silverlight application is packaged by the IDE as a .xap file.
  • The web page that hosts the Silverlight application references the Silverlight plug-in and the application’s .xapfile.
  • The Web Application Project is used to test the Silverlight application in a web browser.
24 4 building a silverlight weatherviewer application cont4
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • The first time you debug a Silverlight application, a DebuggingNotEnabled dialog appears.
  • Select the Modify the Web.Config file to enable debugging option.
  • At the time of this writing the Design view is read-only and the Properties window is not yet enabled for Silverlight development.
  • You can drag and drop Silverlight controls from the Toolbox into the XAML view.
24 4 building a silverlight weatherviewer application cont5
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • TheWeatherViewerapplication (Fig. 24.2) allows the user to input a zip code and get weather information for that location.

a)

Fig. 24.2| WeatherViewer application displays a six-day weather forecast.The program can also display detailed information for a selected day. (Part 1 of 2.)

24 4 building a silverlight weatherviewer application cont6
24.4  Building a Silverlight WeatherViewer Application (Cont.)

b)

Fig. 24.2| WeatherViewer application displays a six-day weather forecast.The program can also display detailed information for a selected day. (Part 2 of 2.)

slide18

Outline

  • The main layout controls of WPF are available in Silverlight.
  • The XAML for the layout of the WeatherViewer application is shown in Fig. 24.3.

WeatherViewer.xaml

(1 of 4 )

Importing this namespace allows use of the custom WeatherDetailsView control.

This application uses a Grid layout container.

Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 1 of 4.)

slide19

Outline

WeatherViewer.xaml

(2 of 4 )

Padding defines the distance between the edge of the container and embedded elements.

Defining a TextBox.

Defining a Button.

The weather forecast is displayed inside a ListBox control.

Defining a horizontal StackPanel as the ListBox’s ItemsPanel.

Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 2 of 4.)

slide20

Outline

WeatherViewer.xaml

(3 of 4)

Binding the image to data from the web service’s XML response.

Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 3 of 4.)

slide21

Outline

WeatherViewer.xaml

(4 of 4 )

Defining the WeatherDetailsView custom control element.

Fig. 24.3 | WeatherViewer displays day-by-day weatherdata (XAML). (Part 4 of 4.)

24 4 building a silverlight weatherviewer application cont7
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • Padding defines the distance between the edge of the container and embedded elements.
  • By setting the WeatherDetailsView’s Grid.RowSpan property to 2, the control expands to hide other controls.
slide23

Outline

  • The WeatherViewer application’s code-behind file appears in Fig. 24.4.

WeatherViewer.xaml.cs

(1 of 6 )

Import the System.Xml.Linq namespace, which enables LINQ to XML.

Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 1 of 6.)

slide24

Outline

WeatherViewer.xaml.cs

(2 of 6 )

Get the zip code entered by the user in the TextBox

Format the web-service URL with the zip code

Call the weatherService object’s DownloadStringAsync method to invoke the web service.

Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 2 of 6.)

slide25

Outline

WeatherViewer.xaml.cs

(3 of 6 )

The DownloadStringCompleted event handler has a parameter e of type DownloadStringCompletedEventArgs which contains information returned by the web service.

Check for an error and ensure that the result contains the desired information.

Convert the string containing the contents of the XML response to an XDocument.

Define the namespace for the XML returned by the web service and allow the application to access the data.

Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 3 of 6.)

slide26

Outline

WeatherViewer.xaml.cs

(4 of 6 )

The LINQ to XML query gathers the weather information and sets the corresponding values for a WeatherData object.

Class WeatherData includes all the necessary weather information for a single day of the week.

Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 4 of 6.)

slide27

Outline

WeatherViewer.xaml.cs

(5 of 6 )

Bind the results of the weatherInformation LINQ query to the ListBox to display the summary of the six-day weather forecast.

When the user selects a particular day, we bind the WeatherData object for the selected day to the custom control, which displays the details for that day.

Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 5 of 6.)

slide28

Outline

WeatherViewer.xaml.cs

(6 of 6 )

Fig. 24.4 | WeatherViewer displays day-by-day weather data(code-behind). (Part 6 of 6.)

24 4 building a silverlight weatherviewer application cont8
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • You must add a reference to the System.Xml.Linq assembly in addition to importing the namespace.

Error-Prevention Tip 24.1

When invoking a web service that returns XML, ensure thatthe namespace you specify in your code precisely matches the namespace specified in the returned XML. Otherwise, theelements in the returned XML will not be recognized in your code.

  • To add the code for a class to a project, right click the project in the Solution Explorer and select Add > Existing Item..., find the file containing the class’s code and click OK.
  • In Silverlight applications, you cannot bind to anonymous types.
24 4 building a silverlight weatherviewer application cont9
24.4  Building a Silverlight WeatherViewer Application (Cont.)
  • A sample of the web service’s XML response appears in Fig. 24.5.

Fig. 24.5|Sample web-service XML response.

24 4 building a silverlight weatherviewer application cont10
24.4  Building a Silverlight WeatherViewer Application (Cont.)

24.4.3Custom Controls

  • As with WPF, you can create custom controls using the UserControl element as a template.
  • To add a new UserControl to the project, right click the project in the Solution Explorer and select Add > New Item.... Select the Silverlight User Control template and name the file (Fig. 24.6).
24 4 building a silverlight weatherviewer application cont11
24.4  Building a Silverlight WeatherViewer Application (Cont.)

• Once added to the project, a UserControl can be coded similar to any other Silverlight application.

Fig. 24.6|Adding a new UserControl to a Silverlight application.

slide33

Outline

  • The XAML code for the WeatherDetailsView custom control’s GUI appears in Fig. 24.7.

WeatherDetailsView.xaml

(1 of 4 )

Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 1 of 4.)

slide34

Outline

WeatherDetailsView.xaml

(2 of 4 )

Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 2 of 4.)

slide35

Outline

WeatherDetailsView.xaml

(3 of 4 )

Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 3 of 4.)

slide36

Outline

WeatherDetailsView.xaml

(4 of 4 )

Fig. 24.7 | WeatherViewer's WeatherDetailsView customcontrol (XAML). (Part 4 of 4.)

slide37

Outline

  • Figure 24.8 shows the code-behind file for the WeatherDetailsView control.

WeatherDetailsView.xaml.cs

The Button’s Click event handler collapses the control, so the user can continue interacting with the main page of the application.

Fig. 24.8 | WeatherViewer's WeatherDetailsView customcontrol (code-behind).

24 5 animations and the flickrviewer
24.5  Animations and the FlickrViewer

•Animations in Silverlight are defined in Storyboards, which are created as Resources of a control and contain one or more animation elements.

•When a Storyboard’s Begin method is called, the embedded animations begin executing.

FlickrViewer Example

•A sample screen capture of the FlickrViewer example is shown in Fig. 24.9.

24 5 animations and the flickrviewer cont
24.5  Animations and the FlickrViewer (Cont.)

Fig. 24.9|FlickrViewer allows users to search photos by tag.

24 5 animations and the flickrviewer cont1
24.5  Animations and the FlickrViewer (Cont.)

• A tag is any user-generated word or phrase that helps organize web content.

• Flickr uses tags on uploaded files to improve its photo-search service, giving the user better results.

24 5 animations and the flickrviewer cont2
24.5  Animations and the FlickrViewer (Cont.)

• You can type one or more tags into the application’s TextBox and click the SearchButton to invoke the Flickr web service

• The web service responds with an XML document containing links to the photos that match the tags.

• The application parses the XML and displays thumbnails of the photos.

slide42

Outline

  • The application’s XAML is shown in Fig. 24.10.

FlickrViewer.xaml

(1 of 4 )

The animateInStoryboard contains a DoubleAnimation that animates the Height property of the largeCoverImage’s Border.

Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 1 of 4.)

slide43

Outline

FlickrViewer.xaml

(2 of 4 )

The animateOutStoryboard shrinks the Border until the image inside is no longer visible.

Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 2 of 4.)

slide44

Outline

FlickrViewer.xaml

(3 of 4 )

Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 3 of 4.)

slide45

Outline

FlickrViewer.xaml

(4 of 4 )

Fig. 24.10 | FlickrViewer allows users to search for taggedphotos (XAML). (Part 4 of 4.)

slide46

Outline

  • The code-behind for FlickrViewer application can be seen in Fig. 24.11.

FlickrViewer.xaml.cs

(1 of 6 )

To run this application you need to insert your Flickr API key here.

Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 1 of 6.)

slide47

Outline

FlickrViewer.xaml.cs

(2 of 6 )

Assign the value largeImageCover.ActualHeight to the Border’s Height so it can be animated.

Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 2 of 6.)

slide48

Outline

FlickrViewer.xaml.cs

(3 of 6 )

To load the large Image, use the URL of the thumbnail and remove the “_t” from the link.

set the To property to the Height of the page’s second row (minus 20 to account for the Border’s Margin).

Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 3 of 6.)

slide49

Outline

FlickrViewer.xaml.cs

(4 of 6 )

Reset the Border’s Height back to double.NaN, which allows the border to be resized with the window.

Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 4 of 6.)

slide50

Outline

FlickrViewer.xaml.cs

(5 of 6 )

Use a LINQ query to gather the necessary information from the attributes of the photo elements in the XML returned by the web service.

Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 5 of 6.)

slide51

Outline

FlickrViewer.xaml.cs

(6 of 6 )

Use a LINQ query to gather the necessary information from the attributes of the photo elements in the XML returned by the web service.

Fig. 24.11 | FlickrViewer allows users to search for photos(code-behind). (Part 6 of 6.)

slide52

Outline

  • For animations to function properly, the properties being animated must contain numeric values—relative values "*" and "Auto" do not work.
  • A sample of the XML response is shown in Fig. 24.12.

Values used to form the URL to the online photos.

Fig. 24.12 | Sample XML response from the Flickr APIs.

24 6 images and deep zoom
24.6  Images and Deep Zoom

• Silverlight’s deep zoom capabilities use Multi­Scale­Images to allow you to zoom far into an image in a web browser while maintaining quality.

• Deep zoom works by sending only the necessary image data for the part of the image you are viewing to your machine.

• To split an image or collage of images into the Silverlight-ready format used by MultiScaleImages, you use the Deep Zoom Composer.

• A MultiScaleImage’s Source is an XML document created by Deep Zoom Composer.

• A MultiScaleSubImage of a MultiScaleImage contains information on a single image in a collage.

24 6 images and deep zoom cont
24.6  Images and Deep Zoom (Cont.)

The DeepZoomCoverCollage Example

  • Figure 24.13 shows screen captures of the application.
    • Figure 24.13(a) shows the application when it’s first loaded with all 11 cover images displayed.
    • Figure 24.13(b) shows the application after we’ve zoomed in closely on the leftmost small cover image.
    • Figure 24.13(c) shows the application with an even deeper zoom on a different cover.
24 6 images and deep zoom cont1
24.6  Images and Deep Zoom (Cont.)

a) The full deep zoom collage.

Small images

nested among

larger images

in the collage

Fig. 24.13| Main page of the DeepZoomCoverCollage.(Part 1 of 3.)

24 6 images and deep zoom cont2
24.6  Images and Deep Zoom (Cont.)

b) Zoomed in on a small cover in the middle of the collage

Fig. 24.13| Main page of the DeepZoomCoverCollage.(Part 2 of 3.)

24 6 images and deep zoom cont3
24.6  Images and Deep Zoom (Cont.)

c) Deep zoom showing the details of the Visual C++ How to Program cover.

Fig. 24.13| Main page of the DeepZoomCoverCollage. (Part 3 of 3.)

24 6 images and deep zoom cont4
24.6  Images and Deep Zoom (Cont.)

24.6.1Getting Started With Deep Zoom Composer

  • Create a new project through the File menu, and specify the project’s Name and Location.
  • Figure 24.14 shows the New Project dialog.

Fig. 24.14| Deep Zoom Composer’s New Project dialog.

24 6 images and deep zoom cont5
24.6  Images and Deep Zoom (Cont.)
  • Click the Add Image… button to add your images.
  • Deep Zoom Composer supports .jpg, .tif, .bmp and .png formats.
  • Figure 24.15 shows the window with the Import tab open after the book-cover images have been imported to the project.
24 6 images and deep zoom cont6
24.6  Images and Deep Zoom (Cont.)

Fig. 24.15|Deep Zoom Composer showing the imported image files.

24 6 images and deep zoom cont7
24.6  Images and Deep Zoom (Cont.)
  • Use the Compose tab to organize the images on your collage.
  • Figure 24.16 shows what the composer looks like once you bring files into the project.
24 6 images and deep zoom cont8
24.6  Images and Deep Zoom (Cont.)

a) Deep Zoom Composer showing the entire composition.

Fig. 24.16|Deep Zoom Composer showing the editable composition. (Part 1 of 2.)

24 6 images and deep zoom cont9
24.6  Images and Deep Zoom (Cont.)

b) Zoomed in on the composition in Deep Zoom Composer

Fig. 24.16|Deep Zoom Composer showing the editable composition. (Part 2 of 2.)

24 6 images and deep zoom cont10
24.6  Images and Deep Zoom (Cont.)
  • When images are in the composition, you can move and resize them.
  • The Layer View view is used to control the order of overlapping images.
  • Use the Export tab to export the files to be used by a MultiScaleImage in your application.
  • Figure 24.17 shows the contents of the window under the Export tab.
24 6 images and deep zoom cont11
24.6  Images and Deep Zoom (Cont.)

Fig. 24.17|Deep Zoom Composer’s exporting capabilities

24 6 images and deep zoom cont12
24.6  Images and Deep Zoom (Cont.)
  • The files are exported to a new folder inside the directory thatyou created earlier for the Deep Zoom Composer project.
  • By default, Deep Zoom Composer selects the Export as Collection option using a PNG file format.
  • By exporting as a collection instead of a composition, subimage information is included in the output XML files.
  • Change the file format to JPEG and keep the Quality at 95—lower values result in smaller file sizes and lower-quality images.
  • Select the Export Images option, since we are using the export in our own Silverlight project. Note that Deep Zoom
slide67

Outline

  • Deep zoom images are created in Silverlight projects by using the MultiScaleImage element, which takes an XML file as its source.
  • Figure 24.18 shows the XAML code that produces the layout of this application.

DeepZoomCoverCollage.xaml

(1 of 2 )

Fig. 24.18 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (XAML). (Part 1 of 2.)

slide68

Outline

DeepZoomCoverCollage.xaml

(2 of 2 )

Set the source of the MultiScaleImage.

Fig. 24.18 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (XAML). (Part 2 of 2.)

24 6 images and deep zoom cont13
24.6  Images and Deep Zoom (Cont.)
  • Add the entire CoverCollageCollection folder to your web application project.
    • Copy the Cover­Collage­Collection folder into the ClientBin folder of the web application in Windows Explorer.
    • Right click ClientBin under the DeepZoomCoverCollageWeb project in the Solution Explorer in Visual Studio and click Refresh Folder.
  • You should see a CoverCollageCollection folder (Fig. 24.19).
24 6 images and deep zoom cont14
24.6  Images and Deep Zoom (Cont.)

Fig. 24.19|Solution Explorer after the deep zoom files have beenadded to the project.

slide71

Outline

  • The application’s event handlers for zooming and panning the image, and for displaying a book’s title when its cover is clicked are shown in Fig. 24.20.

DeepZoomCoverCollage.xaml.cs

(1 of 9 )

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 1 of 9.)

slide72

Outline

DeepZoomCoverCollage.xaml.cs

(2 of 9 )

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 2 of 9.)

slide73

Outline

DeepZoomCoverCollage.xaml.cs

(3 of 9 )

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 3 of 9.)

slide74

Outline

DeepZoomCoverCollage.xaml.cs

(4 of 9 )

MultiScaleImage’s ElementToLogicalPoint method converts the absolute coordinates raised by a mouse event to the logical coordinates required by ZoomAboutLogicalPoint.

A MultiScaleImage’s ZoomAboutLogicalPoint method zooms toward or away from the coordinates passed to the method, using the zoom factor to determine the scale of the zoom.

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 4 of 9.)

slide75

Outline

DeepZoomCoverCollage.xaml.cs

(5 of 9 )

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 5 of 9.)

slide76

Outline

DeepZoomCoverCollage.xaml.cs

(6 of 9 )

To pan, change the ViewportOrigin property of the MultiScaleImage, which returns a point representing the top-left corner of the viewport with respect to the collage’s top-left corner.

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 6 of 9.)

slide77

Outline

DeepZoomCoverCollage.xaml.cs

(7 of 9 )

To determine which cover the user clicked, create a Rect object for each subimage that represents the on-screen area that the image occupies.

We use Rect method Contains to determine whether the click was inside the rectangle.

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 7 of 9.)

slide78

Outline

DeepZoomCoverCollage.xaml.cs

(8 of 9 )

Use the subimage’s index in a LINQ to XML query to locate the subimage’s information in the Metadata.xml document.

Use use the Single method on our LINQ query result to get the one (and only) returned string.

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 8 of 9.)

slide79

Outline

DeepZoomCoverCollage.xaml.cs

(9 of 9 )

Obtain the title from the subimage’s original file name and display the title above the deep zoom image.

Fig. 24.20 | DeepZoomCoverCollage employs Silverlight'sdeep zoom (code-behind). (Part 9 of 9.)

24 6 images and deep zoom cont15
24.6  Images and Deep Zoom (Cont.)
  • A MultiScaleImage’s ZoomAboutLogicalPoint method zooms toward or away from the coordinates passed to the method, using the zoom factor to determine the scale of the zoom.
  • MultiScaleImage’s ElementToLogicalPoint method converts the absolute coordinates raised by a mouse event to the logical coordinates required by ZoomAboutLogicalPoint.
  • The viewport of a MultiScaleImage represents the portionof the image that is rendered on screen.
  • To pan, change the ViewportOriginproperty of the MultiScaleImage, which returns a point representing thetop-left corner of the viewport with respect to the collage’stop-left corner.
24 6 images and deep zoom cont16
24.6  Images and Deep Zoom (Cont.)
  • Figures 24.21–24.22 demonstrate what values are returned by various MultiScaleImage properties.
    • Assume the “container” of Fig. 24.21 is the viewport while the “image” is the entire collage.

Fig. 24.21| Various values used to by MultiScaleImage’s properties.

24 6 images and deep zoom cont17
24.6  Images and Deep Zoom (Cont.)

Fig. 24.22 | Ratios returned by MultiScaleImage’s properties.

24 6 images and deep zoom cont18
24.6  Images and Deep Zoom (Cont.)
  • Determining a clicked image’s book title requires the Metadata.xml file created by Deep Zoom Composer.
  • In the Solution Explorer, find this XML file in the collection folder you imported and drag the file to your Silverlight deep zoom project.
  • The file contains information on where each subimage is located in the collage.
  • To determine which cover the user clicked, create a Rect object for each subimage that represents the on-screen area that the image occupies.
  • We use Rect method Contains to determine whether the click was inside the rectangle.
24 6 images and deep zoom cont19
24.6  Images and Deep Zoom (Cont.)
  • A MultiScaleSubImage’s properties return the same ratios as a MultiScaleImage’s properties, except that the “container” represents the entire collage while the “image” represents the subimage.
  • Use the subimage’s index in a LINQ to XML query to locate the subimage’s information in the Metadata.xml document.
  • Obtain the title from the subimage’s original file name and display the title above the deep zoom image.
  • Use use the Single method on our LINQ query result to get the one (and only) returned string.
24 7 audio and video
24.7  Audio and Video
  • Silverlight uses the MediaElement element to embed audio or video files into your application.
  • The source for MediaElements can be either a file stored with the Silverlight application or a source on the Internet.
  • MediaElement supports playback in the following encoded formats
    • Video: WMV1, WMV2, WMV3, WMVA, WMVC1
    • Audio: WMA7, WMA8, WMA9, MP3
  • Microsoft’s Expression Encoder can be used to convert files into a supported format.
24 7 audio and video cont
24.7  Audio and Video (Cont.)
  • MediaElements can be in one of the following states—Buffering, Closed, Paused, Opening, Playing or Stopped.
  • A MediaElement’s state can be determined from its CurrentState property.
    • When in the Buffering state, the MediaElement is loading the media in preparation for playback.
    • When in the Closedstate, the MediaElement contains no media and displays a transparent frame.
    • When in theOpening state, the MediaElement is attempting to load the media from the given source.
slide87

Outline

  • Our VideoSelector application (Fig. 24.23) shows some of Silverlight’s media-playing capabilities.

VideoSelector.xaml

(1 of 3 )

DoubleAnimation that targets the Opacity property of the Rectangle that displays the video.

Fig. 24.23 | VideoSelector lets users watch several videosat once (XAML). (Part 1 of 3.)

slide88

Outline

VideoSelector.xaml

(2 of 3 )

A VideoBrush displays a video as a graphics object’s Fill—similar to an ImageBrush.

Fig. 24.23 | VideoSelector lets users watch several videosat once (XAML). (Part 2 of 3.)

slide89

Outline

VideoSelector.xaml

(3 of 3 )

Fig. 24.23 | VideoSelector lets users watch several videosat once (XAML). (Part 3 of 3.)

slide90

Outline

  • When the page loads, it first loads a new MediaElement for each source that is included in the sources.xml file (Fig. 24.24).

sources.xml

Fig. 24.24 | VideoSelector's list of video sources.

slide91

Outline

  • The code-behind file is shown in Fig. 24.25.

VideoSelector.xaml.cs

(1 of 4 )

Fig. 24.25 | VideoSelector lets users watch several videos(code-behind). (Part 1 of 4.)

slide92

Outline

VideoSelector.xaml.cs

(2 of 4 )

Define the XDocument that loads sources.xml.

Use LINQ to get each video element from the XML file.

UriKind.RelativeOrAbsolute argument for the MediaElement’s source allows us to prepare for either type of URI since we will not know which is being used until runtime.

Setting a MediaElement’s IsMuted property to true mutes its audio.

Fig. 24.25 | VideoSelector lets users watch several videos(code-behind). (Part 2 of 4.)

slide93

Outline

VideoSelector.xaml.cs

(3 of 4 )

Fig. 24.25 | VideoSelector lets users watch several videos(code-behind). (Part 3 of 4.)

slide94

Outline

VideoSelector.xaml.cs

(4 of 4 )

Fig. 24.25 | VideoSelector lets users watch several videos(code-behind). (Part 4 of 4.)

24 7 audio and video cont1
24.7  Audio and Video (Cont.)
  • The UriKind.RelativeOr­Absolute argument for the MediaElement’s source allows us to prepare for either type of URI since we will not know which is being used until runtime.
  • Setting a MediaElement’s IsMuted property to true mutes its audio.
24 8 isolated storage
24.8  Isolated Storage
  • Isolated storage is used to save user-specific data associated with one or more Silverlight applications from a single domain.
  • The current limit for isolated data storage on a client machine is 1 MB; however, the application may request a higher quota, which can be granted by the user.
  • The isolated storage is shared among all Silverlight applications from a given domain.
  • Applications use isolated storage to store data in a virtual file system.
  • Files called stores contain the information on the physical location of the data.
  • The same isolated storage is used by all browsers on the client’s computer.