Silverlight for Windows Phone 7開發系列（4）：動畫開發

前言

上一篇文章講述了如何使用MediaElement控制項來播放網路電台，講述了MediaElement控制項支援的媒體檔案格式以及其一些限制性，同時講述了Slider控制項的使用和資料繫結的方法。這篇文章講述如何使用Silverlight進行動畫的開發。

 

新增圖片和設定檔

我使用Paint.net做了些電台的（徽標）logo檔案，存放在Images檔案裡面。

我把電台的配置資訊儲存到XML檔案裡面，以後可以通過修改該XML檔案來擴充電台資訊，提高可擴充性。甚至可以把設定檔存放到網上，程式每次啟動的時候自動更新。

<?xml version="1.0" encoding="utf-8"?> <stations>   <station id="1" name="Mix 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 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 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>     

 

Stations標籤是各個Station標籤的容器，id是電台的唯一標識，name是電台的名字，url是線上播放的地址，不確定是否為模擬器 的原因，我試過網路電台只是支援mp3格式，我想在真機會像官方文檔所說那樣支援多種格式，所有支援的媒體檔案格式請看上篇文章。image是電台的 logo圖片檔案的名字，存放在上述的Images檔案夾下面。

 

把Config和Images檔案夾拷貝到專案檔夾下面，然後把檔案加入到項目中

先點擊“Show All Files”按鈕，然後右擊Config和Images檔案夾，選擇“Include In Project”菜單。

需要注意的是，需要檢查這些檔案的屬性，例如SilverRadio.xml檔案的屬性如下：

Logo圖片檔案的屬性如下：

注意XML檔案和Logo圖片的檔案屬性不一樣的，我發現新增檔案的時候，Silverlight for Windows Phone已經自動化佈建好，不需要改動。但是我做Silverlight 4的時候，需要手工改動相應的屬性，XML的Build Action為Content，而圖片的為Resource。還有一個需要注意的是Silverlight不支援Embedded Resource，第一眼會覺得嵌入資源（Embedded Resource）比資源檔（Resource）更加貼切（我自己開始這樣認為），可是Silverlight不支援這種檔案形式，這種形式只支援在 WPF使用，但是Silverlight的Build Action保留了好多不支援的檔案形式的選項，使用時需要注意哪些是Silverlight支援的，否則程式會出現找不到檔案等異常錯誤。

 

LINQ for XML讀取設定檔

使用LINQ讀取XML設定檔，先定義一個實體類如下：

public class Station {     public int Id { get; set; }     public string Name { get; set; }     public Uri Url { get; set; }     public string Image { get; set; } }

 

下面是電台容器類Stations

public class 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);     } }

 

關於容器類的命名

我喜歡使用名詞加上s作為容器類的名稱，之前寫blog過程中，有好幾個讀者說名詞加s不好理解，我想是由於中文的名詞沒有複數的緣故，但是我看過 一些.NET Framework的源碼，容器類也是使用名稱加s的方式表示，習慣就好了，使用加s（例如Stations）而不是加上具體容器的名稱（例如 StationList）的好處是重構容器類型的時候不需要修改容器的名稱。因為具體容器可能會修改，例如從List修改為Dictionary，但是可 以繼續保留原有容器的名稱Stations。

LINQ for XML

LINQ for XML主要有三個關鍵的類組成XDocument, XElement和XAttribute。我覺得弄明白這三個類已經能入門LINQ for XML了。XDocument表示XML文檔，調用靜態函數Load就可以把文檔載入到XDocument的對象中。XElement表示一個元素（節點），通過XElement的屬性Attribute（容器）就能取出該節點的相關屬性。XAttribute表示節點的屬性。

在上述例子中把Station的每個節點取出來，然後把屬性值傳遞給建立的Station對象。最後把所有Station對象存放到List容器中。

 

圖片轉盤的實現

先看，有了感性認識比較好理解最終的實現效果。這是一個使用動態圖片轉盤的方式呈現所有電台，效果見，使用者可以轉動的方式換電台，選中的 電台會顯示在最中間和最前方，顯示最大比例，其他圖根據與選中圖的距離按比例縮小，類比3D轉盤的效果。下面詳細講述這個轉盤類的實現。這個類的實現參考 了Flash vs Silverlight: Image Carousel.

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> 

 

定義一個使用者控制項StationCarousel，該控制項繼承於UserControl，包含了一個Canvas容器，在這個例子中，使用 Canvas容器而不是Grid和StackPanel的原因是Canvas具有最大的可控性，由於Canvas是絕對值定位的，所以在Canvas裡面 的圖片（Image）可以計算出位置資訊的絕對值，然後進行呈現。

由於發稿到《程式員》雜誌，暫時不能發全文，全文見 Silverlight for Windows Phone 7開發系列（4）：動畫開發