Silverlight for Windows Phone 7 Development Series (4): animation Development

Preface

PreviousArticleThis article describes how to use the mediaelement control to play a network station, the media file formats supported by the mediaelement control, and some restrictions. It also describes how to use the slider control and bind data. This article describes how to use Silverlight for animation development.

Add images and configuration files

I used paint.net to create some radio station logo files, which are stored in the images files.

I save the radio station configuration information to the XML file. Later, I can modify the XML file to expand the radio station information and improve the scalability. You can even store configuration files online,ProgramIt is automatically updated every time it is started.

<? XML Version = " 1.0 " Encoding = " UTF-8 "?> < Stations > < Station ID = " 1 " Name = " Mix 1, 106.5 " URL = " Http://icecast.arn.com.au/1065.mp3 " Image = " 1065. PNG " /> < Station ID = " 2 " Name = " 101.7 ws FM " URL = " Http://icecast.arn.com.au/1017.mp3 " Image = " 1017. PNG " /> < Station ID = " 3 " Name = " The edge96one " URL = " Http://icecast.arn.com.au/961.mp3 " Image = " 961. PNG " /> < Station ID = " 4 " Name = " Mix 1, 101.1 " URL = " Http://icecast.arn.com.au/1011.mp3 " Image = " 1011. PNG " /> < Station ID = " 5 " Name = " Gold 104.3 " URL = " Http://icecast.arn.com.au/1043.mp3 " Image = " 1043. PNG " /> < Station ID = " 6 "Name = " 97.3 FM " URL = " Http://icecast.arn.com.au/973.mp3 " Image = " 973. PNG " /> < Station ID = " 7 " Name = " Mix 1, 102.3 " URL = " Http://icecast.arn.com.au/1023.mp3 " Image = " 1023. PNG " /> < Station ID = " 8 " Name = " Cruise 1323am "URL = " Http://icecast.arn.com.au/1323.mp3 " Image = " 1323. PNG " /> </ Stations >

The stations tag is the container of each station tag. The ID is the unique identifier of the station. The name is the name of the station, and the URL is the address of online playback. It is not sure whether it is a simulator, I tried to use the network radio station only to support the MP3 format. I want to support multiple formats as stated in the official documentation. For all supported media file formats, please refer to the previous article. Image is the name of the logo image file of the radio station, which is stored in the images folder above.

Copy the config and images folders to the project folder and add the files to the project.

Click "show all files", right-click the config and images folders, and select the "include in project" menu.

You need to check the attributes of these files. For example, the attributes of the silverradio. xml file are as follows:

The attributes of the logo image file are as follows:

Note that the attributes of the XML file and the logo image file are different. When I add a file, Silverlight for Windows Phone is automatically set and does not need to be changed. However, when I do Silverlight 4, I need to manually change the corresponding attributes. The XML build action is content, and the image is resource. One more thing to note is that Silverlight does not support embedded resource. At first glance, we will think that embedded resources are more appropriate than resource files (I started to think so ), however, Silverlight does not support this file format. This format can only be used in WPF, but the build action of Silverlight retains many unsupported file format options, which of the following statements are supported by Silverlight during use? Otherwise, the program may encounter exceptions such as file not found.

How to read the configuration file using LINQ for XML

To read the xml configuration file using LINQ, define an object class as follows:

Public classStation{Public intId {Get;Set;}Public StringName {Get;Set;}PublicUriURL {Get;Set;}Public StringImage {Get;Set;}}

Below is the stations of the radio station container class

ass Stations : List <Station > { Public void Load ( String Xmlfile ){ Xdocument Xdoc = Xdocument . Load (xmlfile ); VaR Query = From Xelem In Xdoc. descendants ( "Station" ) Select New Station {Id =Convert . Toint32 (xelem. Attribute ( "ID" ). Value), name = xelem. Attribute ( "Name" ). Value, url = New Uri (Xelem. Attribute ( "Url" ). Value, Urikind . Absolute), image = xelem. Attribute ( "Image" ). Value ,}; clear (); addrange (query );}}

Container class naming

I like to use the term "S" as the name of the container class. When I wrote a blog, several readers said that it was hard to understand the term "S". I think the Chinese term does not have a plural number, but I have read some. net Framework source code. The Container class is also represented by adding the name to S. It is a habit to add S (such as stations) instead of the specific container name (such as stationlist) the advantage is that you do not need to modify the container name when restructuring the container type. Because the specific container may be modified, for example, from list to dictionary, but the name stations of the original container can be retained.

LINQ for XML

LINQ for XML consists of three key classes: xdocument, xelement, and xattribute. I think the three classes can be used to get started with LINQ for XML. Xdocument indicates the XML document. You can call the static function load to load the document to the xdocument object. Xelement indicates an element (node). The relevant attributes of the node can be retrieved through the attribute (container) of xelement. Xattribute indicates the node attributes.

In the preceding example, each node of the station is obtained and the attribute value is passed to the new station object. Finally, store all the station objects in the list container.

Implementation of image Turntable

First, with a perceptual knowledge, it is better to understand the final implementation effect. This is a way to use the dynamic picture turntable to present all the radio stations. For more information, see. The user can change the radio station in a rotating way. The selected radio station will be displayed in the middle and in the front, showing the maximum proportion, other images are scaled down proportionally based on the distance from the selected image to simulate the 3D turntable effect. The following describes the implementation of this turntable class in detail. For implementation of this class, see Flash VS Silverlight: Image usel.

XAML

< Usercontrol X : Class = "Silverradio. stationcarousel" Xmlns = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation" Xmlns : X = "Http://schemas.microsoft.com/winfx/2006/xaml" Width = "480" Height = "300"> < Canvas X : Name = "Layoutroot" Background = "Transparent"> </ Canvas > </ Usercontrol >

Defines a user control stationcarousel, which inherits from usercontrol and contains a canvas container. In this example, Canvas containers instead of grid and stackpanel are used because canvas has maximum controllability, because the canvas is an absolute value, the image in the canvas can calculate the absolute value of the position information and then present it.

The full text cannot be published as it is published in programmer magazine. For the full text, see Silverlight for Windows Phone 7 Development Series (4): animation development.