前言
上一篇文章述了如何使用MediaElement控件來(lái)播放網(wǎng)絡(luò)電臺(tái)，講述了MediaElement控件支持的媒體文件格式以及其一些限制性，同時(shí)講述了Slider控件的使用和數(shù)據(jù)綁定的方法，
Silverlight for Windows Phone 7開(kāi)發(fā)系列（4）：動(dòng)畫開(kāi)發(fā)
。這篇文章講述如何使用Silverlight進(jìn)行動(dòng)畫的開(kāi)發(fā)。新增圖片和配置文件
我使用Paint.net做了些電臺(tái)的（徽標(biāo)）logo文件，存放在Images文件里面。
我把電臺(tái)的配置信息保存到XML文件里面，以后可以通過(guò)修改該XML文件來(lái)擴(kuò)展電臺(tái)信息，提高可擴(kuò)展性。甚至可以把配置文件存放到網(wǎng)上，程序每次啟動(dòng)的時(shí)候自動(dòng)更新。
Stations標(biāo)簽是各個(gè)Station標(biāo)簽的容器，id是電臺(tái)的唯一標(biāo)識(shí)，name是電臺(tái)的名字，url是在線播放的地址，不確定是否為模擬器 的原因，我試過(guò)網(wǎng)絡(luò)電臺(tái)只是支持mp3格式，我想在真機(jī)會(huì)像官方文檔所說(shuō)那樣支持多種格式，所有支持的媒體文件格式請(qǐng)看上篇文章。image是電臺(tái)的 logo圖片文件的名字，存放在上述的Images文件夾下面。
把Config和Images文件夾拷貝到項(xiàng)目文件夾下面，然后把文件加入到項(xiàng)目中
先點(diǎn)擊“Show All Files”按鈕，然后右擊Config和Images文件夾，選擇“Include In Project”菜單。
需要注意的是，需要檢查這些文件的屬性，例如SilverRadio.xml文件的屬性如下：
Logo圖片文件的屬性如下：
注意XML文件和Logo圖片的文件屬性不一樣的，我發(fā)現(xiàn)新增文件的時(shí)候，Silverlight for Windows Phone已經(jīng)自動(dòng)設(shè)置好，不需要改動(dòng)。但是我做Silverlight 4的時(shí)候，需要手工改動(dòng)相應(yīng)的屬性，XML的Build Action為Content，而圖片的為Resource。還有一個(gè)需要注意的是Silverlight不支持Embedded Resource，第一眼會(huì)覺(jué)得嵌入資源（Embedded Resource）比資源文件（Resource）更加貼切（我自己開(kāi)始這樣認(rèn)為），可是Silverlight不支持這種文件形式，這種形式只支持在 WPF使用，但是Silverlight的Build Action保留了好多不支持的文件形式的選項(xiàng)，使用時(shí)需要注意哪些是Silverlight支持的，否則程序會(huì)出現(xiàn)找不到文件等異常錯(cuò)誤。
LINQ for XML讀取配置文件
使用LINQ讀取XML配置文件，先定義一個(gè)實(shí)體類如下：
public class Station
{
public int Id { get; set; }
public string Name { get; set; }
public Uri Url { get; set; }
public string Image { get; set; }
}
下面是電臺(tái)容器類Stations
public class Stations : List
{
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);
}
}
關(guān)于容器類的命名
我喜歡使用名詞加上s作為容器類的名稱，之前寫blog過(guò)程中，有好幾個(gè)讀者說(shuō)名詞加s不好理解，我想是由于中文的名詞沒(méi)有復(fù)數(shù)的緣故，但是我看過(guò) 一些.NET Framework的源碼，容器類也是使用名稱加s的方式表示，習(xí)慣就好了，使用加s（例如Stations）而不是加上具體容器的名稱（例如 StationList）的好處是重構(gòu)容器類型的時(shí)候不需要修改容器的名稱，
電腦資料
《Silverlight for Windows Phone 7開(kāi)發(fā)系列（4）：動(dòng)畫開(kāi)發(fā)》(http://www.ishadingyu.com)。因?yàn)榫唧w容器可能會(huì)修改，例如從List修改為Dictionary，但是可 以繼續(xù)保留原有容器的名稱Stations。LINQ for XML
LINQ for XML主要有三個(gè)關(guān)鍵的類組成XDocumentXElement和XAttribute。我覺(jué)得弄明白這三個(gè)類已經(jīng)能入門LINQ for XML了。XDocument表示XML文檔，調(diào)用靜態(tài)函數(shù)Load就可以把文檔加載到XDocument的對(duì)象中。XElement表示一個(gè)元素（節(jié)點(diǎn)），通過(guò)XElement的屬性Attribute（容器）就能取出該節(jié)點(diǎn)的相關(guān)屬性。XAttribute表示節(jié)點(diǎn)的屬性。,
在上述例子中把Station的每個(gè)節(jié)點(diǎn)取出來(lái)，然后把屬性值傳遞給新建的Station對(duì)象。最后把所有Station對(duì)象存放到List容器中。
圖片轉(zhuǎn)盤的實(shí)現(xiàn)
先看效果圖，有了感性認(rèn)識(shí)比較好理解最終的實(shí)現(xiàn)效果。這是一個(gè)使用動(dòng)態(tài)圖片轉(zhuǎn)盤的方式呈現(xiàn)所有電臺(tái)，效果見(jiàn)上圖，用戶可以轉(zhuǎn)動(dòng)的方式換電臺(tái)，選中的 電臺(tái)會(huì)顯示在最中間和最前方，顯示最大比例，其他圖根據(jù)與選中圖的距離按比例縮小，模擬3D轉(zhuǎn)盤的效果。下面詳細(xì)講述這個(gè)轉(zhuǎn)盤類的實(shí)現(xiàn)。這個(gè)類的實(shí)現(xiàn)參考 了Flash vs Silverlight: Image Carousel.
XAML
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="480" Height="300">
定義一個(gè)用戶控件StationCarousel，該控件繼承于UserControl，包含了一個(gè)Canvas容器，在這個(gè)例子中，使用 Canvas容器而不是Grid和StackPanel的原因是Canvas具有最大的可控性，由于Canvas是絕對(duì)值定位的，所以在Canvas里面 的圖片（Image）可以計(jì)算出位置信息的絕對(duì)值，然后進(jìn)行呈現(xiàn)。