1-3 第一個實務範例 - 媒體播放器(基本款)

        緊接著，我們來實際建立一個專案，來開發我們第一個Silverlight應用程式。這是一個非常簡單非常基本款的MediaPlaye媒體播放器，只有兩個按鈕，一個媒體負責播放、一個負責媒體暫停，從這個範例當中，我們將帶領讀者開發一個最簡單的Silverlight應用程式，在這個過程當中您也可以逐步熟悉Silverlight開發的方式。

備註：

請讀者參考CodeStorage中的教學影片檔『SimpleMediaPlayer』，其中有如何開發此應用程式的Step By Step操作步驟和順序說明，其網址為：『http://codestorage.ria101.com.tw/CodeStorageRIAUser.html?CodeUid=120』。

建立操作介面

        首先，請依照先前的說明，利用VS2010建立一個Silverlight專案，建立出來的專案目前是空白的：

        接著，由於我們要在場景中佈置一些控制項，因此請以滑鼠右鍵點選Silverlight專案中的MainPage.xaml檔案，並且選取『於Expression Blend中開啟』：

        接著，會出現底下的畫面：

        接著，請點選左方工具箱中的『>>』符號，點選後會出現對話視窗，請勾選Show All，並且從對話視窗中找到MediaElement：

        點選該控制項之後，MediaElement將會加入到工具箱中，接著，請點選工具箱中的MediaElement控制項，然後在場景中(MainPage.xaml)繪製出需要的大小：

備註：

請注意，未來當本書中透過Expression Blend在場景中佈置任何控制項時，倘若在工具箱中找不到，都請透過這樣的方式，將控制項加入在工具箱當中。

        接著，依照類似的方式，從工具箱中找出Button控制項，並且加入兩個到主場景中：

        可以透過上圖畫面左方的屬性視窗，來設定按鈕上的文字。接著，請點選畫面左下角Objects and Timeline中，的LayoutRoot：

如果找不到『Objects and Timeline』視窗，可從主選單的Windows項目中將其點選出來。

接著點選右方的屬性視窗：

設定LayoutRoot控制項的底色，將場景的底色調整成上圖的樣式。

請注意，在Blend當中，Brushes區塊可讓我們設置圖形或是控制項的顏色，而其中幾個重要的部分如下：

接著，請點選主場景中的每一個控制項，並且設定其名稱：

請依照這樣的方式，將底下幾個控制項分別設定其名稱：

l   MediaPlayer àMedia1

l   播放鈕àButton_Play

l   暫停鈕àButton_Pause

接著，請將按下主選單中的FileàSave(或Save All)鈕，把這個專案儲存。然後切換到VS2010(先不用關閉Expression Blend)。

撰寫程式碼

切換到VS2010之後，你會看到底下畫面：

VS2010會問你這個檔案(page.xaml)被其他應用程式修改過，是否要載入?請選擇『Yes』或『Yes to ALL』，接著會看到底下的畫面：

備註：

如果這時候預覽視窗中的畫面消失了，請按下鍵盤的Ctrl+Shift+B重新Build一下整個專案。

接著，我們來撰寫程式，Silverlight中的每一個物件，也都有相對應的事件可以使用，但是產生事件處理函式(Event Handler)的方式有些許不同(增強)：

請展開Xaml Code的部分：



您可以將畫面設定為分割顯示，或是僅顯示XAML指令碼或UI。

請找到Button_Play：

當您建立『事件名稱』加上『=』之後，VS2010會詢問你是否要新增一個Event Handler，請選擇<New Event Handler>，按下Enter，接著針對Button_Pause也比照辦理，最後完成如下：

接著請展開MainPage.xaml，開啟code behind程式碼，會看到這兩個Event Handler已經建立出來：

你可以大方的建立底下的程式碼：

Private Sub Button_Play_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)         Me.Media1.Play()     End Sub     Private Sub Button_Pause_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)         Me.Media1.Pause()     End Sub

接著請在ASP.NET專案中加入一個wmv影片檔，並且取得其 URL：



請特別注意，影片檔是加入在ASP.NET的專案中，並非加入到Silverlight專案中。

接著切回Silverlight專案，VB的使用者接著可在上方的事件下拉清單中，找到Page_Loaded：

再撰寫底下程式碼，把wmv的url在場景載入時填入Silverlight的Media控制項中：

請C#的讀者注意，C#的開發環境中並沒有『事件下拉清單』，因此請直接撰寫底下程式：

public Page() {     InitializeComponent();     this.Loaded += new RoutedEventHandler(Page_Loaded); } void Page_Loaded(object sender, RoutedEventArgs e) {     this.Media1.Source = new System.Uri("http://localhost:57141/Silverlight WEB 720p 2M-128 vbr.wmv"); } private void Button_Play_Click(object sender, RoutedEventArgs e) {     this.Media1.Play(); } private void Button_Pause_Click(object sender, RoutedEventArgs e) {     this.Media1.Pause(); }

完成後，請在方案總管中，選擇Rebuild Solution：

接著就可以執行了。

測試執行

 

完成後，請點選ASP.NET專案中的『XXXXXX_TestPage.aspx』(其中的XXXXX是您的專案名稱)，按下滑鼠右鍵選擇『在瀏覽器中顯示』：



順利的話，你會看到第一個陽春版的媒體播放器已然完成：

你會發現，透過Silverlight建立一個媒體播放器相當的簡單，而且可以毫無障礙的和ASP.NET整合在一起。儘管我們還沒有把可以拖曳的進度捲軸，和播放時間軸等控制項加進來，但是在後面的章節中我們會陸續完成這個部份。

如果不順利的話???

如果不順利，畫面沒有出來的話怎麼辦，請參考本書的教學影片SimpleMediaPlayer，其網址為：『http://codestorage.ria101.com.tw/CodeStorageRIAUser.html?CodeUid=120』Step By Step跟著操作看看，即可順利完成。