Windows Phone 學習筆記 (7) – 容器控制項

Windows Phone - Container

容器控制項可以用來裝載其他控制項，並且排列它們的位置。

容器

容器就是用來放其他東西(控制項)，以下為容器控制項：

Grid
StackPanel
Canvas
WarpPanel (Toolkit)

Grid

專案開啟時，預設使用的就是Grid。它的使用概念和表格類似，使用「列」及「欄」來劃分出許多格子，這些格子中可以放入其他容器或控制項。Grid 被加入到畫面時，預設就是一格(一欄一列)，若要加入列或欄，在 VS 設計模式下非常容易，先看下圖：

當你選到 Grid 容器時，會在 Grid 的左邊及上面出現一條粗的控制 bar，操作方式很簡單，若要移動整個 Grid，請把滑鼠指到左上角的小方格(十字箭頭)，按住移動即可。若要增加列或欄，請把滑鼠移到控制 bar 上，這時會出現三角箭頭及一條細線，確定後點一下左鍵即可增加一列或一欄。若要移動這些格線，請把滑鼠移到這些已增加的列或欄的三角點上，按住拖拉即可移動。若要刪除，同樣按住三角點，直接把它拉到手機畫面之外就刪掉了。

格子的存取為，橫列(Row)直欄(Column)。例如左上角第一格為Row=0, Column=0；第二格在其右，為Row=0, Column=1，依此類推。

接下來要瞭解 Grid 在 xaml 中的使用方式。下圖範例中把 Grid 分為 6 格，並在其中各放一個按鈕：

自動產生的程式碼如下：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="208*" />
        <RowDefinition Height="198*" />
        <RowDefinition Height="201*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="238*" />
        <ColumnDefinition Width="218*" />
    </Grid.ColumnDefinitions>
    <Button Content="1" Grid.Row="0" Grid.Column="0" Height="72" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="160" />
    <Button Content="2" Grid.Row="0" Grid.Column="1" Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="button2" VerticalAlignment="Top" Width="160" />
    <Button Content="3" Grid.Row="1" Grid.Column="0" Height="72" HorizontalAlignment="Left" Margin="6,0,0,0" Name="button3" VerticalAlignment="Top" Width="160" />
    <Button Content="4" Grid.Row="1" Grid.Column="1" Height="72" HorizontalAlignment="Left" Name="button4" VerticalAlignment="Top" Width="160"/>
    <Button Content="5" Grid.Row="2" Grid.Column="0" Height="72" HorizontalAlignment="Left" Margin="9,0,0,0" Name="button5" VerticalAlignment="Top" Width="160" />
    <Button Content="6" Grid.Row="2" Grid.Column="1" Height="72" HorizontalAlignment="Left" Name="button6" VerticalAlignment="Top" Width="160" />
</Grid>

只看有顏色的部份，其他的先不管。

第一個紅色的 Grid.Row="1"，表示這個 Grid 的父容器也是 Grid ，並且它在父容器的第二列(第一列為0)。

藍色為定義區塊，用來定義這個 Grid 是如何被分割的。<Grid.RowDefinitions> 定義列，其中的 <RowDefinition> 子標籤有幾個就表示有幾列，欄相同。

你會看到其中的 Width 及 Height 屬性為奇怪的數字加上一個 * 號結尾，這是因為我在 VS 的設計畫面用拉的，所以數值不那麼準確。* 號則表示自動分配剩下的空間，例如100*，表示最小值為100，若有多餘的空間，則多餘的空間會給有標 * 號的列或欄來平均分配。而明確標示某數值，例如100，而沒加 * 號的，就固定為該數值，而不會參加分配剩餘空間。

所以如果你要讓每個列高平均分配，最快的作法就是全部給 * 號，像是 Height="*" ，這樣就會每列的高度都一樣。

另外還可以輸入一個數值：auto。auto的意思是依據格子內容物的大小做調整，如果格子內的控制項高度只有100，那該列的列高自動調整為100。你可以把這個範例的某一列設為 auto 就能瞭解了。

雖然目前的 Windows Phone 只有一個尺寸 800 * 480 ，但建議若無特殊需求，設為自動平均分配會比較好，因為未來可能會有其他尺寸的出現，若直接以固定尺寸設定，將來在其他尺寸的裝置中顯示時可能會有問題。

在定義區之後就是其他要放入 Grid 的控制項了，這個範例放了 6 個按鈕，並且以 Grid.Row 及 Grid.Column 的方式指定它們所在的格子，應該很容易瞭解。

另外，若要做到跨欄或跨列，可以使用 Grid.ColumnSpan 及 Grid.RowSpan 來指定要跨的格數。

StackPanel

Stack 堆疊，就是把控制項一個接著一個堆疊在一起，看是要直的疊還是要橫著疊。看起來如下圖：

我在原本的 Grid 中放了一個 StackPanel ，然後隨便拉了幾個控制項進來，它自動從上往下排列。

如果你把 StackPanel 的 Orientation 屬性從原本的 Vertical (垂直)換成 Horizontal (水平)，所有的控制項就會換成水平排列，如下圖：

你會注意到，它不會換行，因為在 StackPanel 中的元件，一次就會佔用一列或一行的全部空間。

在 xaml 中的表示方式，就是在 <StackPanel> 加入其他控制項 </StackPanel>。

如果內容會超出螢幕，必須在 StackPanel 之外，以 ScrollViewer 包覆，即可產生捲動功能。

Canvas

其實就是絕對定位，和 Windows Form 類似，以 Left(x軸) 和 Top(y軸) 來定位。

WrapPanel

Wrap，包覆。這個容器在原本的 SDK 中並沒有，必須安裝 Toolkit 後才能使用。

安裝後在 VS 中的選單，「工具」->「選擇工具箱項目」->「Windows Phone 元件」就可找到 WrapPanel 打勾來加入。使用上和 StackPanel 一樣，唯一不同的是，它會自動換行。一樣也可透過 Orientation 來改變排列的方向。如下圖：