Silverlight 2 講堂 -11：跑馬燈後傳(程式)

目前為止，你的跑馬燈已經完成70%了，剩下來加上一點程式碼就可以完成。或許你會覺得："老師，真的有這樣簡單嗎? 我看別人寫得很複雜ㄟ...." 。 別懷疑，做完這一堂課的練習你就會知道有多容易。將來各位如果要買Silverlight 2的書回家看的話，只要看到基本跑馬燈的範例程式的程式碼比這裡寫的還長的，你就可以不用買了 -- 因為那作者不懂Silverlight 2，買回去只是幫你製造麻煩。

因為目前還沒談到Silverlight 2如何動態取得資料，所以這一個基本跑馬燈當中，我是使用預先載入的圖檔來完成的，將來也可以修改成動態的跑馬燈。就讓我們完成它吧：

1. 使用VS 2008開發工具開啟MyCarousel專案，將Page.xaml開啟在XAML編輯器中。

2. 在button6控制項的標籤中，加入Click="LeftButton_Click"事件處理常式設定，然後按下滑鼠右鍵，選取[巡覽至事件處理常式]，開啟Page.xaml.cs程式檔：

3. 在Page.xaml.cs程式檔前面，先宣告引用System.Windows.Media.Imaging命名空間：

using System.Windows.Media.Imaging;

4. 在Page類別中，宣告一個BitmapImage型別的陣列成員，用來暫存要輪播的六張圖片：

private BitmapImage[] _pics = {     new BitmapImage(new Uri("1.JPG",UriKind.Relative)),     new BitmapImage(new Uri("2.JPG",UriKind.Relative)),     new BitmapImage(new Uri("3.JPG",UriKind.Relative)),     new BitmapImage(new Uri("4.JPG",UriKind.Relative)),     new BitmapImage(new Uri("5.JPG",UriKind.Relative)),     new BitmapImage(new Uri("6.JPG",UriKind.Relative)),                               };

5. 宣告一個整數成員變數，用來記錄目前button1所顯示的圖片在_pics陣列中的索引值，預設為零：

private int _index = 0;

6. 再宣告一個Image型別的陣列，用來記錄所有Button控制項上的Image控制項。然後在Page類別的建構函式中，將Image控制項記錄到陣列中：

private Image[] _images; public Page() {     InitializeComponent();    _images = new Image[]{image1,image2,image3,image4,image5,image6}; }

7. 當按下button6時，你是要逆時針旋轉圖片，所以建立一個MakeIndexLeft方法調整顯示圖片的起始索引值：

private void MakeIndexLeft() {     _index = (_index - 1) >= 0 ? (_index - 1) : 5 ; }

8. 接下來，建立一個ResetImageSource方法，根據圖片的起始索引值將新圖片套用到image控制項上：

private void ResetImageSource() {     int index = _index;     //要先清除圖片的參考     foreach (Image img in _images)     {         img.Source = null;     }     foreach (Image img in _images)     {         img.Source = _pics[((index < 6) ? index : (index - 6))];         index++;     } }

9. 在LeftButton_Click方法中，重設圖片索引值與Image控制項的圖片，然後啟動LeftClick時間軸動作：

private void LeftButton_Click(object sender, RoutedEventArgs e) {     MakeIndexLeft();     ResetImageSource();     LeftClick.Begin(); }

10. 回到Page.xaml，當按下button2控制項時要順時針旋轉，因此在button2控制項標籤中加入加入Click="RightButton_Click"事件處理常式設定，然後按下滑鼠右鍵，選取[巡覽至事件處理常式]，開啟Page.xaml.cs程式檔。

11. 在Page類別定義中加入一個MakeIndexRight方法調整顯示圖片的起始索引值(順時針旋轉用)：

private void MakeIndexRight() {     _index = (_index + 1) < 6 ? (_index + 1) : 0; }

12. 在RightButton_Click方法中，重設圖片索引值與Image控制項的圖片，然後啟動RightClick時間軸動作：

private void RightButton_Click(object sender, RoutedEventArgs e) {     MakeIndexRight();     ResetImageSource();     RightClick.Begin(); }

完成之後，先建置Silverlight專案，再建置網站，就可以透過瀏覽器檢視測試頁，結果如下：

跑馬燈範例連結(若是連不上時請先觀賞下面影片)

很容易吧!! 其實我們可以這樣看：

• Silverlight 1.0 --> 透過JavaScript開發
• Silverlight 2 --> 透過.NET Framework開發

換句話說，只要你會開發.NET的程式，就會開發Silverlight 2的應用程式!!

在Silverlight 2當中，加入了哪些新的控制項並不是重點，真正的重點在於整個執行環境的改變，所帶來的程式開發模型的轉變! 因此如何將這些前端的效果整合後端的資源，像Flash一樣可以跟使用者即時互動，這才是各位需要關注以及學習的重點。接下來的講堂內容，會開始朝向這方面發展。

Silverlight 2 講堂 -10：跑馬燈中傳(動作)

完成使用者操作介面設計之後，接著就開始設計動作。以跑馬燈來說，其實只需要有兩個動作：

• 逆時針旋轉
• 順時針旋轉

因此相對於前面的練習來說，是簡單許多的。

• 逆時針旋轉

要產生逆時針旋轉效果的話，就只需要將按鈕先順時針調整一個位置，再逆時針前進一個位置就好了：

 

1. 使用Expression Blend 2.5開啟MyCarousel專案的Page.xaml檔案。

2. 新增一個時間軸，取名為LeftClick。

3. 在第0秒的位置，參考上面的左圖，設定每一個按鈕的狀態。你可以使用前一堂課所介紹過的隱藏控制項的做法，把暫時不需要用到的控制項隱藏起來。完成的結果如下：

4. 在第1秒的位置，參考上面的右圖，設定每一個按鈕的狀態。完成後停止錄製，結果如下：

• 順時針旋轉

要產生順時針旋轉效果的話，就只需要將按鈕先逆時針調整一個位置，再順時針前進一個位置就好了：

 

1. 新增一個時間軸，取名為RightClick

2. 在第0秒的位置，參考上面的左圖，設定每一個按鈕的狀態，完成的結果如下：

3. 在第1秒的位置，參考上面的右圖，設定每一個按鈕的狀態，完成後停止錄製，結果如下：

接下來存檔，然後你就可以先透過時間軸工具列的播放按鈕( )，測試動作效果。結果如下：

再下一次的練習中，我們只要再加入一點點的程式碼，就可以完成跑馬燈了喔!!!

Silverlight 2 講堂 - 9：跑馬燈前傳(操作介面)

這一個講堂開講以來，短短的幾天就獲得許多的迴響，看來大家對於我的教法接受度還是挺高的。原本使用者操作介面要在此先打住，但是滿多朋友反映想知道如何建立跑馬燈效果。其實我前面教的基本操作如果你融會貫通的話，建立跑馬燈效果並非難事。

1. 啟動VS 2008 開發工具，新增一個Silverlight應用程式專案，取名為MyCarousel。

2. 啟動Expression Blend 2.5 設計工具，開啟MyCarousel專案，並將背景色調整為黑色，並將表單大小調整為800x600。

在前傳中，我們先設計使用者操作介面。

3. 加入一個Canvas控制項，填滿表單：

<UserControl x:Class="MyCarousel.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"      Width="800" Height="600>     <Grid x:Name="LayoutRoot" Background="Black" >         <Canvas HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch"/>     </Grid> </UserControl>

4. 在Canvas中加入第一個按鈕，設定大小為400x300，Left = 192，Top = 258，在[Properties]視窗中將Name設為button1：

完成後參考的XAML定義如下(2008.08.02 補充)：

<Grid x:Name="LayoutRoot" Background="Black">       <Canvas>           <Button Height="300" x:Name="button1" Width="400" Opacity="1" Canvas.Left="192" Canvas.Top="258"></Button>       </Canvas> </Grid>

5. 加入第二個按鈕，設定大小為320x240，Left = 454，Top = 186，Opacity = 85，在[Properties]視窗中將Name設為button2。選取button2之後按下滑鼠右鍵，然後選取[Order]-->[Send Backward]，將button2下推一層：

完成結果如下：

6. 加入第三個按鈕，設定大小為320x240，Left = 412，Top = 106，Opacity = 70，將Name設為button3。選取button3之後按下滑鼠右鍵，然後選取[Order]-->[Send Backward]兩次，將button3下推兩層。

7. 加入第四個按鈕，設定大小為320x240，Left = 232，Top = 18，Opacity = 55，將Name設為button4。選取button4之後按下滑鼠右鍵，然後選取[Order]-->[Send Backward]三次，將button3下推三層。

8. 加入第五個按鈕，設定大小為320x240，Left = 64，Top = 106，Opacity = 70，將Name設為button5。選取button5之後按下滑鼠右鍵，然後選取[Order]-->[Send Backward]兩次，將button5下推兩層。

9. 加入第六個按鈕，設定大小為320x240，Left = 8，Top = 186，Opacity = 85，在[Properties]視窗中將Name設為button6。選取button6之後按下滑鼠右鍵，然後選取[Order]-->[Send Backward]，將button6下推一層。目前完成的操作介面如下圖：

10. 接著在專案中加入6張320x240左右的圖，分別命名為1.JPG ~ 6.JPG。

11. 將1.JPG拖曳到button中後，調整適當大小。將Image控制項的Name設為image1，然後在設計區域中選取之後，按下[Alt]鍵嵌入對應的button1控制項中：

12. 在這裡使用一個小技巧，就是你可以在[Objects and Timeline]視窗中，將暫時不需要看到的控制項隱藏，只需點選控制項旁的 按鈕即可。例如下面的設定可以隱藏button1：

13. 重複前面步驟，依序使用2.JPG~6.JPG建立image2~image6控制項，並嵌入相對應的button2~button6控制項中：

完成的使用者操作介面以及[Objects and Timeline]視窗中控制項的階層架構如下圖：

做到這哩，你應該已經手忙腳亂了吧? 沒關係，先停一下喝個水休息一下。

接下來的"跑馬燈中傳"當中，我們將設計使用者操作介面的動作。

無言的結局......

最近為了寫Silverlight 2 講座，才開始在瀏覽器中安裝Silverlight執行環境。但是裝完之後，常常遇到一些網站又要叫我再裝一次。今天逛台灣微軟的網站又遇到了，就再裝一次吧!

1.0版? 不是早裝過了嗎? 不管了，再裝一次吧!

啥? 不能安裝，看看有啥錯誤訊息好了。不看還好，一看眼睛都亮了起來：

"如果您有安裝Silverlight 1.1，但想安裝為Silverlight 1.0........."   Orz Orz Orz

Silverlight 2 講堂 -8：透過程式處理事件

在第7堂課中，我們完成了動態切換顯示圖片的例子。但是在最後測試的時候，卻發現只有HideMyCat3時間軸的效果有出來，HideMyCat2時間軸的效果卻沒有顯示出來，這是為什麼呢?

先來看看Button_Click方法的程式碼：

private void Button_Click(object sender, RoutedEventArgs e) {         HideMyCat2.Begin();         image.Source = _pic1;         HideMyCat3.Begin(); }

看出問題了嗎? 因為HideMyCat2與HideMyCat3時間軸的動作效果中，都要改變image控制項的狀態；因此若是當HideMyCat2的動作位完成前就啟動HideMyCat3時間軸的話，HideMyCat2的動作效果就不會顯示。

要如何解決這一個問題呢?

事實上，Silverlight 2在用戶端執行時，是以物件導向的方式執行，原理與ASP.NET的Server Control相當類似。換句話說，每一個XAML當中的項目，在執行時期都是物件，所以都可以透過程式控制其效果，也因此你才可以在Page.xaml.cs的程式碼中直接透過呼叫Begin方法啟動時間軸。HideMyCat2時間軸在程式中是屬於System.Windows.Media.Animation命名空間所定義的的Storyboard型別物件，除了有Begin方法可以使用之外，也提供了Completed事件。因此我們可以透過Completed事件偵測HideMyCat2時間軸的動作是否執行完成，完成之後再替換掉Image控制項所顯示的圖片，然後啟動HideMyCat3時間軸的動作效果。我們只需要按照下面步驟修改程式就可以了：

1. 使用VS 2008開啟LayoutSample解決方案，並且開啟Page.xaml.cs程式碼。

2. 在Page類別的建構函式中，加入註冊HideMyCat2時間軸的Completed事件處理函式的程式碼。你可以直接在輸入完"HideMyCat2.Completed +=" 之後連按兩次[Tab]鍵，由VS 2008開發工具幫你完成剩下的程式碼即可。：

public Page() {         InitializeComponent();         HideMyCat2.Completed += new EventHandler(HideMyCat2_Completed); }

VS 2008會自動產生HideMyCat2_Completed方法如下：

void HideMyCat2_Completed(object sender, EventArgs e) {         throw new NotImplementedException(); }

3. 接下來在Page類別中宣告一個BitmapImage型別的成員變數，用來暫存下一張要顯示的圖片：

private BitmapImage _nextPic;

4.  修改HideMyCat2_Completed方法，當HideMyCat2時間軸動作完成之後，設定image控制項所要顯示的下一張圖片，然後在啟動HideMyCat3時間軸：

void HideMyCat2_Completed(object sender, EventArgs e) {       image.Source = _nextPic;        HideMyCat3.Begin(); }

5. 修改Button_Click、Button2_Click、Button3_Click方法內容如下：

private void Button_Click(object sender, RoutedEventArgs e) {                  HideMyCat2.Begin();         _nextPic = _pic1; } private void Button2_Click(object sender, RoutedEventArgs e) {         HideMyCat2.Begin();         _nextPic= _pic2; } private void Button3_Click(object sender, RoutedEventArgs e) {         HideMyCat2.Begin();         _nextPic = _pic3; }

如果要讓效果更好一點，你可以再針對Button控制項被選取時設計動作效果，就可以讓畫面更生動。( 各位可以自行練習看看! )

完成之後，先建置Silverlight專案，再建置網站，就可以透過瀏覽器檢視測試頁，結果如下：

Silverlight 2 講堂 -7：動態顯示圖片

在這一堂課中，我們要來學一點簡單的程式，再透過上一堂課學到的技巧，來產生動態切換圖片的效果。目標在這：http://www.agkdesign.net/viewr2/default.html。

因為我們目前還沒學到透過網路傳遞資料的技巧，所以先以靜態圖片為主。要透過Silverlight 2顯示圖片之前，首先第一件事，你必須將圖片調整成適合網頁顯示的大小。在這練習中我準備了三張處理過的圖片，先透過Expression Blend 2.5設計工具[Project]視窗的[Add Existing Item...]項目加入Silverlight應用程式專案中，這些圖檔將來就會變成專案資源(Resource) ，載入執行環境中使用。

1. 把三個圖片分別拖曳到設計的Page.xaml表單中，調整大小之後先置放在按鈕上，如下圖：

但是這樣的話，圖片跟按鈕是分開來的。所以接下來按住[Alt]鍵之後，再用滑鼠選取圖片之後在按鈕上左右晃一下，圖片就會嵌入到Button控制項中，變成控制項的一部分!!

<Button Height="100" Margin="0,30,0,30" Click="Button2_Click" x:Name="button1" MouseEnter="Button2_Enter" MouseLeave="Button2_Leave">         <Button.Background>         <LinearGradientBrush   EndPoint="0.91100001335144,0.0599999986588955"  StartPoint="0.532999992370605,0.400000005960464">                 <GradientStop Color="#FF0B2589"/>                 <GradientStop Color="#FFEDCB16" Offset="1"/>          </LinearGradientBrush>         </Button.Background>         <Image Source="P1000761.JPG" Stretch="Fill" Height="76.5" Width="102"/> </Button>

2. 在[Objects and Timeline]視窗的下拉清單中，選取HideMyCat2時間軸，先刪除第2秒的動作：

3. 新增一個時間軸，取名為HideMyCat3。移到時間軸0秒的位置，選取Image控制項，然後在[Brushes]視窗中，選取漸層刷子。將Alpha屬性值先設為0。接下來選取漸層轉換( )，調整箭頭位置與長度之後，產生如下圖的效果：

接著，在第2秒的位置，調整箭號位置到右下角，然後停止錄製：

4. 將Page.xaml存檔之後，換成使用VS 2008開發工具開啟專案，直接開啟Page.xaml.cs程式檔。在這一個練習中，我們希望可以根據按鈕的選擇來切換圖片，所以在程式中首先必須要先參考System.Windows.Media.Imaging命名空間，才可以在程式中使用BitmapImage物件。在程式碼最前面加上：

using System.Windows.Media.Imaging;

5. 接下來在Page類別中建立三個成員變數，把三張圖片暫存到表單中的BitmapImage物件中：

private BitmapImage _pic1 = new BitmapImage(new Uri("P1000760.JPG", UriKind.Relative)); private BitmapImage _pic2 = new BitmapImage(new Uri("P1000761.JPG", UriKind.Relative)); private BitmapImage _pic3 = new BitmapImage(new Uri("P1000762.JPG", UriKind.Relative));

(P1000760.jpg、P1000761.jpg、P1000762.jpg是我載入專案的三張圖片的名稱)

6. 然後修改Button_Click方法中的程式碼如下：

private void Button_Click(object sender, RoutedEventArgs e) {        HideMyCat2.Begin();        //  "image"為顯示圖片的Image控制項的名稱        image.Source = _pic1;        HideMyCat3.Begin(); }

7. 參考步驟6，修改Button2_Click、Button3_Click方法的程式碼：

private void Button2_Click(object sender, RoutedEventArgs e) {     HideMyCat2.Begin();     image.Source = _pic2;     HideMyCat3.Begin(); } private void Button3_Click(object sender, RoutedEventArgs e) {     HideMyCat2.Begin();     image.Source = _pic3;     HideMyCat3.Begin(); }

完成之後，先建置Silverlight專案，再建置網站，就可以透過瀏覽器檢視測試頁，結果如下：

不會很難吧! 剛加進我們的朋友們趕快把環境安裝起來，開始跟上進度喔!

但是仔細看一下，HideMyCat2的時間軸動作似乎是沒有正確顯示! 沒錯! 這是因為HideMyCat2時間軸啟動之後，HideMyCat3也啟動了! 這樣會導致使用者只會看到HideMyCat3時間軸動作的效果。下一堂課我們再來處理這一個問題，這次就先做到這裡!

Silverlight 2 講堂 -6：改變透明度

繼續上一堂的練習，我們為圖片瀏覽器加入一些動態的效果。

首先，在每個控制項中，都有一個設定透明度的Opacity屬性，若是設為100%(1.0)的話，就是不透明，若是設為0%(0.0)的話，就變成了透明了。因此你可以利用Opacity屬性，改變圖形的深淺層次。

1. 在專案中新增一個時間軸，取名為HideMyCat。

2. 移到時間軸1秒的位置，將Image控制項的Opacity屬性設為0%，然後停止錄製。

3. 在專案中新增一個時間軸，取名為ShowMyCat。

4. 移到時間軸1秒的位置，將Image控制項的Opacity屬性設為100%，然後停止錄製。

5. 接下來選取StackPanel控制項上的第一個按鈕，在Properties視窗中切換到事件清單，用滑鼠雙擊Click事件。然後在VS 2008開發工具的Button_Click方法中，加入啟動HideMyCat時間軸的程式：

private void Button_Click(object sender, RoutedEventArgs e) {       HideMyCat.Begin(); }

6. 回到Blend設計工具，選取StackPanel控制項上的第二個按鈕，在Properties視窗中切換到事件清單，在Click事件中輸入Button2_Click，按下Enter鍵。然後在VS 2008開發工具的Button2_Click方法中，加入啟動ShowMyCat時間軸的程式：

private void Button2_Click(object sender, RoutedEventArgs e) {       ShowMyCat.Begin(); }

除了Opacity屬性之外，你也可以使用OpacityMask，產生類似翻頁的透明度切換效果。

7. 在專案中新增一個時間軸，取名為HideMyCat2。

8. 移到時間軸0秒的位置，選取Image控制項，然後在[Brushes]視窗中，選取漸層刷子。將Alpha屬性值先設為0：

 

接下來選取漸層轉換( )，調整箭頭位置與長度之後，產生如下圖的效果：

   移到時間軸1秒的位置，調整箭號覆蓋畫面如下：

 

移到時間軸2秒的位置，調整箭號覆蓋畫面如下：

完成之後，停止時間軸錄製。

9. 選取StackPanel控制項上的第三個按鈕，在Properties視窗中切換到事件清單，在Click事件中輸入Button3_Click，按下Enter鍵。然後在VS 2008開發工具的Button2_Click方法中，加入啟動HideMyCat2時間軸的程式：

private void Button3_Click(object sender, RoutedEventArgs e) {        HideMyCat2.Begin(); }

10. 接下來順便加上一些按鈕的效果。新增一個時間軸，取名為Button1EnterAction。

11. 移到時間軸0.5秒的位置，將第一個按鈕的Height屬性設為120，然後結束錄製。

12. 新增一個時間軸，取名為Button1LeaveAction。移到時間軸0.5秒的位置，將第一個按鈕的Height屬性設為100，然後結束錄製。

*** 若無法直接設定0.5秒，可以先在第0秒將Height設為120，再設定第0.5秒的Height。設定完成之後，再刪除第0秒的位置：

13. 新增一個時間軸，取名為Button2EnterAction。移到時間軸0.5秒的位置，將第二個按鈕的Height屬性設為120，然後結束錄製。

14. 新增一個時間軸，取名為Button2LeaveAction。移到時間軸0.5秒的位置，將第二個按鈕的Height屬性設為100，然後結束錄製。

15. 新增一個時間軸，取名為Button3EnterAction。移到時間軸0.5秒的位置，將第三個按鈕的Height屬性設為120，然後結束錄製。

16. 新增一個時間軸，取名為Button3LeaveAction。移到時間軸0.5秒的位置，將第三個按鈕的Height屬性設為100，然後結束錄製。

17. 選取StackPanel控制項上的第一個按鈕，在Properties視窗中切換到事件清單，在MouseEnter事件中輸入Button1_Enter，按下Enter鍵。然後在VS 2008開發工具的Button1_Enter方法中，加入啟動Button1EnterAction時間軸的程式：

private void Button1_Enter(object sender, MouseEventArgs e) {       Button1EnterAction.Begin(); }

18. 回到Blend設計工具，選取StackPanel控制項上的第一個按鈕，在Properties視窗中切換到事件清單，在MouseLeave事件中輸入Button1_Leave，按下Enter鍵。然後在VS 2008開發工具的Button1_Leave方法中，加入啟動Button1LeaveAction時間軸的程式：

private void Button1_Leave(object sender, MouseEventArgs e) {        Button1LeaveAction.Begin(); }

19. 回到Blend設計工具，選取StackPanel控制項上的第二個按鈕，在Properties視窗中切換到事件清單，在MouseEnter事件中輸入Button2_Enter，按下Enter鍵。然後在VS 2008開發工具的Button2_Enter方法中，加入啟動Button2EnterAction時間軸的程式：

private void Button2_Enter(object sender, MouseEventArgs e) {       Button2EnterAction.Begin(); }

20. 回到Blend設計工具，選取StackPanel控制項上的第二個按鈕，在Properties視窗中切換到事件清單，在MouseLeave事件中輸入Button2_Leave，按下Enter鍵。然後在VS 2008開發工具的Button2_Leave方法中，加入啟動Button2LeaveAction時間軸的程式：

private void Button2_Leave(object sender, MouseEventArgs e) {        Button2LeaveAction.Begin(); }

21. 回到Blend設計工具，選取StackPanel控制項上的第三個按鈕，在Properties視窗中切換到事件清單，在MouseEnter事件中輸入Button3_Enter，按下Enter鍵。然後在VS 2008開發工具的Button3_Enter方法中，加入啟動Button3EnterAction時間軸的程式：

private void Button3_Enter(object sender, MouseEventArgs e) {       Button3EnterAction.Begin(); }

22. 回到Blend設計工具，選取StackPanel控制項上的第三個按鈕，在Properties視窗中切換到事件清單，在MouseLeave事件中輸入Button3_Leave，按下Enter鍵。然後在VS 2008開發工具的Button3_Leave方法中，加入啟動Button3LeaveAction時間軸的程式：

private void Button3_Leave(object sender, MouseEventArgs e) {        Button3LeaveAction.Begin(); }

其實這些動作，將來你也可以透過建立自訂的控制項完成，就可以減少許多設定的步驟。

完成之後，先建置Silverlight專案，再建置網站，就可以透過瀏覽器檢視測試頁，結果如下：

Silverlight 2 講堂 -5：排版

這一堂課當中先介紹簡單的頁面排版動作，下堂課來介紹透明度。先參考下面的網頁：

http://www.agkdesign.net/viewr2/default.html

沒錯，我們希望可以做出這樣的效果出來。你覺得難嗎? 一點也不，透過這幾次我們學會的，你就可以完成一樣的效果了。準備好了嗎?

首先，參考Silverlight 2 講堂 -2：建立專案--使用VS 2008介紹過的步驟，建立一個新的Silverlight應用程式專案，取名為LayoutSample。接下來，將Page.xaml的背景範圍設成800x600，底色為黑色：

<UserControl x:Class="LayoutSample.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="800" Height="600">     <Grid x:Name="LayoutRoot" Background="Black">     </Grid> </UserControl>

• Grid

在Page.xaml所建立的UserControl中，預設是使用Grid控制項裝載你所建立的樣式的。Grid的使用方式跟HTML的Table控制項很像，但是Grid是先切割出裝載控制項的範圍之後，在將控制項設定到指定的範圍當中的。例如要將畫面切割成下面的區域：

那就要先使用<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>劃分出指定的範圍之後，再將控制項填進去。以這個例子來說，你可以使用下面的標籤完成版面的切割動作：

<Grid.RowDefinitions>     <RowDefinition Height="600" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions>     <ColumnDefinition Width="200" />     <ColumnDefinition Width="400" /> </Grid.ColumnDefinitions>

完成的效果如下，VS 2008會透過虛線顯示Grid切割的效果：

版面切割完之後，我們就可以在Grid加入控制項，並且透過Grid.Row與Grid.Column指定控制項所要顯示的區域：

<StackPanel Grid.Row="0" Grid.Column="0" Background="Pink"></StackPanel> <Canvas Grid.Row="0" Grid.Column="1" Background="LightBlue"></Canvas>

完成的結果如下：

這裡為了讓大家看出Grid的效果，所以我沒有將第二個Column的Width設為600，所以在加入粉紅色的StackPanel控制項與粉藍色的Canvas控制項之後，右邊會有一塊黑色的區域，這是原本Grid的底色。

• StackPanel

如果要讓控制項可以按照水平或是垂直的順序方式排列，你可以使用StackPanel控制項。StackPanel控制項提供了Orientation屬性，你可以設為Horizontal(水平排列)或是Vertical(垂直排列)，控制項就會按照指定的方式排列。例如我們可以將剛剛加進來的StackPanel控制項的Orientation屬性設為Horizontal，然後再加入三個Button控制項，此時三個按鈕會由左至右水平排列：

若將Orientation屬性值改為Vertical，結果如下：

若是要針對StackPanel的樣式做進階的修改的話，那就要使用Expression Blend 2.5開啟LayoutSample專案，然後選取StackPanel控制項之後，就可以從[Properties]-->[Layout]視窗中設定。例如在Layout視窗中按下垂直至中按鈕之後(黃色圓圈處)，StackPanel的按鈕就會置中對齊了。順便你可以在Layout視窗中，將StackPanel的左右Margin調整為10，這樣按鈕就不會黏到左右邊界了：

但是現在三個Button控制項預設是連在一起的，有沒有辦法可以分開呢? 在[Objects and Timeline]視窗中，你可以按下展開StackPanel控制項的按鈕(黃色圓圈處)，接著我們就可以針對StackPanel控制項中的個別按鈕做設定了：

選取按鈕之後，你可以將每個按鈕的上下邊界設為30，高度調整為100。完成的結果如下：

 

最後將StackPanel的底色取消，再利用上次介紹過的方式，將Button控制項的底色調整為漸層，按鈕的部分就設定完成了!

*** 在這裡順便教各位一個小技巧，當你設定好第一個按鈕的顏色之後，可以透過[Brushes]視窗中的新增筆刷的按鈕( ) ，將筆刷設定儲存為[Local Resource]。將來在設定顏色時，就可以將建立過的筆刷設定重複使用在其他的按鈕或是控制項的顏色設定喔!!

• Canvas

Canvas就是簡單的畫布，你可以在上面加上控制項之後，設定控制項相對於Canvas邊界的位置。例如在目前Grid的右邊就有一個Canvas，你可以在Canvas中加入一個矩形：

然後從Blend設計工具的[Objects and Timeline]視窗中，按下展開Canvas控制項的按鈕，就可以設定Canvas控制項中的Retangle了。你可以透過滑鼠移動Retangle控制項的位置，然後到[Properties]-->[Appearance]視窗中，透過RadiusX與RadiusY的屬性，將Retangle控制項的邊界調整為圓角：

接下來透過[Brush]視窗調整Retangle控制項的底色，最後重設Canvas控制項的底色。完成之後的Page.xaml如下圖：

因為這是一個圖片播放器，所以接下來在Silverlight應用程式專案的Project視窗中，按下滑鼠右鍵，透過[Add Existing Item]選項，加入一個320x240的圖片(透過VS 2008方案總管加入也可以)：

然後直接從Project視窗中將圖片拖曳到設計工具中，調整其大小與位置之後，完成圖片瀏覽器的外觀如下：

這次的練習就先做到這邊，下次我們再來為這一個圖片瀏覽器加入一些動態的效果。