Silverlight初探(二) - 表格設定篇

本文要來說明如何使用Silverlight來畫類似HTML的Table，先說一個簡單的HTML表格如下表

<table border="1" style="height: 50px; width: 100px;">
 <tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
 </tr>
</table>

在Silverlight當中並不是直接將物件放入要指定的TD當中，而是必須先定義出要呈現的Table，定義的語法如下，其中必須先劃出一個【Grid】對應【Table】、【Grid.RowDefinitions】對應要呈現的【tr】、【Grid.ColumnDefinitions】對應要呈現的【td】，另外【Grid.RowDefinitions】、【Grid.ColumnDefinitions】皆可自行定義寬高。

Width(Hight的設定相同) :
Width="100" (表示固定寬度)
Width="100*" (表示此寬度會依據視窗大小被拖拉自動根據比例縮放)
Width="Auto" (表示自動設定)

<grid margin="0,20,0,0" x:name="grdLayoutRoot">
    <grid.rowdefinitions="">
        <rowdefinition/>
        <rowdefinition/>
    </grid>
    <grid.columndefinitions="">
        <columndefinition/>
        <columndefinition/>
    </grid>
    <!-- 注意一下要呈現的物件必須在此處 -->
</grid>

如果物件要放到哪個TD並需在該物件進行設定
Grid.Column="0" ==> 代表在第幾欄
Grid.Row="0" ==> 代表在第幾列
Grid.ColumnSpan="2" ==> 等同於TD當中的clospan="2"
Grid.RowSpan="2" ==> 等同於TD當中的rowpan="2"

<stackpanelgrid .column="0" grid.row="0">
    <!-- 此物件會呈現在第一列第一欄 -->
</stackpanelgrid>