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 來改變排列的方向。如下圖: 它是水平排列,因為遇到右邊會超出範圍,就自動往下一行移動。

結語

最常用到的容器為 Grid 及 StackPanel ,某些特殊情況 WrapPanel 會幫上大忙。試著練習去寫 xaml 的方式使用容器,這樣在做資料綁定用的樣板時,才會得心應手。在做排版時,請考慮不同尺寸的條件下是否能有同樣的呈現,因為將來或許會有不同尺寸的裝置, 最好不要寫死。
本文網址:http://blog.tonycube.com/2012/06/windows-phone-7.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。