1

Silverlight 配置系統
Silverlight 以外掛程式的形式嵌入網頁中，我們必須瞭解外掛程式以及 Silverlight 的內容
如何配置於網頁中，才能實作出美觀華麗的視覺化使用者介面。而這一篇文章我們來看看
如何定義 Silverlight 應用程式的內容配置技巧。

所謂的配置，是針對構成 XAML 內容的標記項目，其對應的物件在網頁上呈現的位置進

行規範，例如一個按鈕（Button）在網頁中 Silverlight 外掛程式定義的區塊，應該如何定
位，而如果有其他的物件存在時，它們之間又應該如何配置。Silverlight 提供了三種不同
的視覺化配置管理容器，Canvas、Grid 與 StackPanel，這些容器同樣以控制項的形態公開，
下表列舉此三種控制項與其簡要的說明：

容器控制項 說明
Canvas 提供用以配置特定子元素的區域，並且以相對於 Canvas 的絕對座標定位。
Grid 透過欄位與資料行所建立的表格狀區域定位元素。
StackPanel 提供水平與垂直兩種方向的線性排列定位。

表列的控制項，用來決定 XAML 標記項目於畫面上如何配置，當你建立一個 Silverlight

應用程式的時候，預設會以 Grid 作為其版面的配置管理容器。至於為何要透過這些控制
項管理使用者介面的視覺化元素，最主要的原因，在於提供一種可以自動彈性配置內容
元素的佈局管理機制。

在 Silverlight 1.0 的時候，我們只有 Canvas 這個容器可以用，透過 Canvas.Top 以及

Canvas.Left 這兩個屬性來決定物件在畫面上的位置，以絕對位置的方式來達到定位的目
的。這種作法的缺點是，當環境改變時，它不會自動幫我們調整物件在畫面上的位置，導
致無法呈現適當的內容，Grid 與 StackPanel 則會依版面的大小同步修正內容元素的配置。

我們分別來看看三種不同的配置，當我們縮放螢幕的時候，透過 Grid 與 StackPanel 配置

的畫面，其中的元素會隨著螢幕動態作配置，而以 Canvas 配置的內容，則固定不會改變。

讀者可以從這裏瞭解配置管理容器的用途，當你需要動態調整版面內容配置的時候，可
以考慮選擇 Grid 或是 StackPanel。

接下來簡要的列舉三種容器控制項與畫面設計配置的關聯，後續的文章將針對其中的細
2
錯誤! 所指定的樣式的文字不存在文件中。
節逐一進行說明。

 Canvas 與絕對定位

 StackPanel 與線性配置

不同於 Canvas，StackPanel 對於子物件提供一種線性排列的配置設計，例如下以下的圖

示：　

上圖為四個配置於 StackPanel 中的矩形物件，在預設計的情形下，它們從上而下，逐一

作線性的垂直排列，如左圖，右圖則是由左至右的水平線性排列。
2
 3

 Grid 與方格區域配置

Grid 以二維表格實作物件的配置設計，就如同 HTML 的 Table 標記，而 ColumnDefinition

與 RowDefinition 是其中支援相關實作的兩個關鍵標記項目。下圖是 Grid 所建立的，包含
三個橫列與三個直行格狀區域：

每個方格的索引值，由左至右，第一個直行的索引值為 0，從上到下，第一個橫列的索
引值為 0，因此得到以下的結果：

(column 0, row 0) (column 1, row 0) (column 2, row 0)

(column 0, row 1) (column 1, row 1) (column 2, row 1)

(column 0, row 2) (column 1, row 2) (column 2, row 2)

其中分別透過物件的「Grid.Column」與「Grid.Row」取得行與列的位置，例如上圖中間方格
4
錯誤! 所指定的樣式的文字不存在文件中。
的索引值，剛好是 Grid.Column=1 以及 Grid. Row=1，指定了這兩個屬性，便能夠明確的
指定物件配置於中間位置的方格。