與傳統應用類似,Windows store應用允許開發人員通過布局控制項管理應用UI。 本篇將討論Windows8布局設計控制。
Windows 8布局控制項
在Windows Store應用設計中,布局控制項是控制對象位置和尺寸的,由於Windows Store應用不僅僅面向案頭作業系統,而且還需要適應行動裝置的部署,所以在設計時,往往需要考慮到不同的解析度或者硬體螢幕尺寸標準下應用布局的適配性,最大程度的保持設計靈活性是應用設計原則重要環節之一。根據功能性不同,Windows 8為開發人員提供豐富的布局控制項,以達到應用布局設計需求。其中包括:
Grid
Canvas
StackPanel
WrapGrid
VariableSized WrapGrid
Virtualizing StackPanel
從MSDN開發文檔中可以看出,以上布局控制項皆派生自Panel類,而Panel類可以裝載不同類型的控制項作為子控制項。
而熟悉Silverlight,WPF和Windows Phone的開發人員會發現一些布局控制項是相同的。下面我們快速探索這些布局控制項的效果以及使用方法,
Grid
Grid是類似於HTML表格的一種布局控制項,由於其靈活性高,所以在應用設計中經常被使用到。一個Grid控制項包含一個Row(行)和Column(列)的集合。開發人員可以將不同的對象控制項布置在不同的行列中,達到位置控制的效果。
基本代碼:
<Grid x:Name="myGrid"></Grid>
表格定義代碼:
<Grid x:Name="myGrid"> <Grid.RowDefinitions><RowDefinition /><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions></Grid>
在以上代碼中,Grid.RowDefinitions和Grid.ColumnDefinitions集合使用RowDefinition和ColumnDefinition定義兩行兩列的Grid,這裡使用附加屬性RowDefinitions描述行列集合。(附加屬性(Attached Property)XAML重要概念,詳細請參考 XAML執行個體教程系列)
後台代碼聲明行和列集合 :
Grid.RowDefinitions = new List<RowDefinitions>();
Grid.ColumnDefinitions = new List<ColumnDefinitions>();
完成表格的定義,將控制項對象放在指定的表格位置,例如在第一行第一列添加一個TextBlock文字框,代碼如下:
<Grid x:Name="myGrid"><Grid.RowDefinitions><RowDefinition /><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><TextBlock x:Name="tbName" Grid.Row="0" Grid.Column="0" /></Grid>
從代碼中可以看出,因為在TextBlock中,沒有實現Row和Column的屬性,所以放置控制項對象到表格是通過附加屬性Grid.Row和Grid.Column實現的。通過附加屬性和相依性屬性的概念,可以理解通過Grid可以存取其所有的子控制項。