2-2 Xaml指令碼與Silverlight元素

       不管是UIElement或Silverlight Controls，都是透過XAML碼來描述，例如<Rectangle … />表示矩形(屬於UIElement)、<Canvas …/>表示一個畫布容器(屬於Container)、<Button … />表達一個按鈕控制項(屬於Controls)。

       這些琳瑯滿目的物件，都是透過XAML指令碼描述的，包含屬性的設定，或是事件的指定等等，也都透過XAML指令碼來進行。所以在這一章當中，我們將基本的UIElement作一個整理，讀者僅需要概略的瀏覽過即可，若有需要時可以重新翻回來參考。

Xaml指令碼的架構

       如同您已經知道的，Xaml指令碼本身遵循著XML的格式，例如底下這個.xaml檔案中的內容是非常很典型的Xaml語法，Canvas表達的是一個容器：

呈現出來的結果如下：

       其中xmlns和xmlns:x是用來標示出Silverlight Xaml指令碼的命名空間，用以決定文件當中合法的Xaml指令碼規格。這些Xaml元素透過x:Name或是Name屬性(Attribute)來指定該元素的名稱，以方便未來透過程式碼控制。也就是說，所有將來你想要用程式碼控制的物件，都建議您加上名稱。

       同時，Xaml指令碼是區分大小寫的，且對結構的要求比HTML來的嚴謹。同一個Attribute不得出現兩次以上，例如底下這樣是不合法的撰寫方式：

如果重覆定義同樣的屬性，在VS2010的開發階段就會出現底下這樣的錯誤訊息：

Xaml的擴展屬性語法

       在Xaml碼當中，部分的屬性支援擴展式的語法，例如，Canvas的Background屬性可以這麼寫，用以呈現出黃色的背景：

<Canvas Width="640" Height="480"    x:Name="Page"    Background="Yellow"> (…略…) </Canvas>

但是您也可以這麼寫：

       把Background屬性給獨立出來，變成一組『<Canvas.Background>』標記，如此一來，就可以利用更複雜的描繪方式來呈現出漸層的背景。

這種模式相當常見，例如底下Rectangle的Fill指令是用來設定填滿顏色：

但您也可以擴展成底下的方式用漸層來設定填滿顏色(改為<Rectangle.Fill>)：

呈現出的結果如下：

如果是橢圓形的話，則語法就變成<Ellipse.Fill>：

<Ellipse Width="205" Height="60" Stroke="#FF000000" Canvas.Left="8" Canvas.Top="82">   <Ellipse.Fill>     <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">       <GradientStop Color="#FFFFFFFF" Offset="0"/>       <GradientStop Color="#FFEAFF00" Offset="1"/>     </LinearGradientBrush>   </Ellipse.Fill> </Ellipse>

這種模式在Xaml指令碼中相當常見，請讀者特別留意。

備註：

其實不管是ASP.NET或是Silverlight，使用這樣的宣告式語法已經行之有年，過去開發Windows應用程式的時代，開發人員即便可以使用所視及所得的繪製工具(諸如VS2003, VS2005)來繪製，實際上還是把UI描述(位置、外觀、顏色…等)轉為程式碼來執行。所以你會看到Windows應用程式有『Form1.Designer.cs』這樣的檔案，其實就是UI描述被Visual Studio具體轉換成的程式碼檔案。 但這樣的描述其實維護起來相當困難，因此，ASP.NET和Silverlight乃至於WPF的UI描述均仿效HTML以XML方式呈現，當XML被載入記憶體之後，會從XML文件的節點最末端開始解析，例如看到上述的『LinearGradientBrush』就產生一個LinearGradientBrush物件，接著看到Ellipse再產生一個物件，然後把剛才的LinearGradientBrush物件填入Ellipse物件的Fill屬性，以達成我們需要的操作介面。

Xaml指令碼中的事件指定

       

       Xaml指令碼除了描繪出圖形化的介面之外，還可以透過指定『事件』處理函式來和後端C#/VB程式碼配合，例如：

       上面這段Xaml指令碼中的Rectangle元素『R1』設定了『MouseLeftButtonDown』事件的處理函式為：『R1_Click』。

因此，只要配合底下的Code Behind程式碼檔案(.xaml.cs或.xaml.vb)：

private void R1_Click(object sender, MouseButtonEventArgs e) {     //在其中撰寫程式碼...     MessageBox.Show("R1被按下"); }

       中撰寫程式碼，當元素『R1』被點選(MouseLeftButtonDown事件被觸發)時，則會執行到對應的指令：

       在Silverlight當中每一個UIElement都有許多事件可以使用，由於Rectangle這些UIElement為Silverlight中最基礎的元素，因此其時不具備Click事件，取而代之的是MouseLeftButtonDown事件，在Silverlight當中，這些基礎UIElement所常用的事件包含：

事件名稱	意義
MouseLeftButtonDown	滑鼠按下
MouseLeftButtonUp	滑鼠放開
MouseEnter	滑鼠進入元素上
MouseLeave	滑鼠從元素上離開
MouseMove	滑鼠在元素上移動(經過)
KeyDown	鍵盤按下
KeyUp	鍵盤放開
Loaded	元素被載入

這些事件我們會在後面的章節中仔細討論。

備註：

請注意，先前我們曾經介紹過Button控制項，由於該控制項並非上述Silverlight中的基礎元件，而是透過繼承ButtonBase類別而來，因此MouseLeftButtonDown等事件已經取消，取而代之的是Click事件。

2-1 關於XAML指令碼的技術

關於XAML指令碼

        前面我們曾經提到過，整個Silverlight技術是以Xaml檔案來描述每一個顯示在畫面上的物件，在Silverlight當中我們也稱之為元素(Element)，而這些以XML格式描述的物件是具有層級的，總的來說，我們將整個Xaml描繪出的Silverlight元素統稱之為Silverlight Content。

除此之外，從前面的介紹中大概您也已經知道，我們可以利用C#或是VB程式碼與之配合並加以控制，這部分我們在後面的章節中會詳細討論，在這個章節當中，我們會先以簡單的方式來介紹Xaml指令碼可描繪出的Silverlight元素(Element)。

拿最基本的Rectangle(矩形)來說：

<Rectangle x:Name="R1" Width="100" Height="30" Fill="red"> </Rectangle>

上面這段XAML指令碼呈現出的內容如下：

        其中x:Name="R1"是用來描述該控制項的名稱(名稱為R1)，Width和Height我們稱之為屬性，從屬性名稱上我們很容易知道這是用來描述R1的長和寬，而XAML指令碼是Strong Type的XML指令，因此，必須要符合XML規格，所以你會很明確的看到以</Rectangle>所描述的結尾。缺少結尾、不正確的指令、或是大小寫錯誤都是不被編譯器所接受的。

        前面說過，整個XAML指令碼是具有層級的，儘管現在讀者可以完全透過Expression Blend或VS2010以拖拉方式來建立Silverlight的UI，但還是或多或少必須瞭解這其中的關念。

        個透過XAML指令碼可建立的重要元素包含：Line, Rectangle, Ellipse, Polygon, Polyline, Path, MediaElement...等，這些都是最最最基本的視覺介面元素(UI Element：泛指所有具有外觀的Element)，在Silverlight 1.0時代，也只有這些元素可用(當然，到了2.0之後，除了這些基礎的元素之外，還有控制項的加入)。

        這類的基礎元素都可以透過筆刷(Brush)進行上色，這部分也是透過XAML指令碼來描述，例如：

        上面這段指令所呈現出的是一個漸層黃色的矩形，這些，都是Silverlight繪圖的基本觀念。讀者不需要死記硬背相關的指令，現在都可以透過Visual Studio的intellisense或是利用Expresion Blend以所視即所得的拖拉方式來繪製完成，但是讀者還是必須理解這些XAML指令碼的意義。

第2章 Silverlight的XAML元素與控制項

引言：

這一篇我們將帶領讀者正式進入到Silverlight的世界，一些基本的觀念是讀者必須先了解的，整個Silverlight的開發架構是支援物件導向程式設計的，也因此，讀者必須對物件導向程式開發有一定的認識和經驗，同時對於ASP.NET的開發經驗也是必須的。除此之外，由於XAML是描繪UI的關鍵(就如同HTML之於ASP.NET一般)，因此對於XAML的熟悉度也是未來能否掌握Silverlight開發的關鍵之一，這部分不僅可以詳細閱讀本章內容，相關參考的教學影片也是相當重要，對於初學者來說都必須詳加閱讀，以建立未來邁入更進階開發技術的基礎。

1-5 專案的建置與執行

        請特別注意在這個架構下，瀏覽器頁面上Silverlight應用程式的測試和執行，所開啟的主要頁面其實是ASP.NET專案中的.html或.aspx檔案，這也是之所以我們剛才在瀏覽設計好的MediaPlayer時，是透過點選XXXXXX_TestPage.aspx，並按下滑鼠右鍵點選在瀏覽器中檢視的原因。

        如果你開啟.aspx或.html頁面，會看到<Object>標記中Source參數指定了XAP的位置，例如：

<param name="source" value="ClientBin/SilverlightApplication13.xap"/>

這個位置在預設的狀態下是"~/ClientBin/專案名稱.xap"。

        所以，回顧整個專案開發架構，當我們在開發環境重新ReBuild整個專案時，VS2010運行的順序是：

l   將Silverlight專案進行建置編譯，在Silverlight專案中的Bin資料夾底下建立出編譯完成的.dll與壓縮過的.xap檔案。

l   將Silverlight專案中的Bin資料夾中的.xap檔案複製到ASP.NET專案中的"~/ClientBin/"目錄下。

l   接著建置編譯ASP.NET專案。

       

        所有編譯建置動作完成後，就可以瀏覽TestPage.aspx/.html頁面，前面提過，瀏覽該頁面時，.aspx頁面會促使瀏覽器下載指定在.aspx頁面中的.xap檔案，並且讓用戶端的Silverlight Run-Time(Player)加以執行。

        熟悉這個架構之後，從下一章開始，我們就要正式進入Silverlight應用程式開發的領域了，讀者將會看到更多Silverlight的強大功能與特性，敬請期待。