這篇博文將給大家講解在Windows 8開發中的UI布局方面的知識。
布局
進行過開發的朋友都知道,布局系統是進行UI開發最基本的東西,也是開發出使用者體驗不錯的產品的必備知識。在Win8開發中,為了布局UI控制項,必須將控制項放置在Panel或者其它容器中,XAML架構提供了多種Panel控制項,比如:Canvas,StackPanel和Grid,這些就是容器,你可以將你的UI控制項放置其中。
絕對布局
在XAML架構中,提供了Canvas來支援絕對布局。絕對布局不會考慮到螢幕的大小,對於螢幕尺寸多樣化的今天,這種布局的缺點盡顯。你需要為不同的螢幕尺寸提供不同的Page頁,或者提供放大機制。
動態布局
在動態布局中,不管螢幕的尺寸如何變化,UI控制項總是能正確的出現在螢幕合適的位置。為了設定隨螢幕比例而變化的控制項大小,需要為Height和Width屬性賦予指定的值,以下幾點是在動態布局中需要設定的幾項:
- 設定Height和Width屬性值,或者設定為自動變化大小的。如果在Grid布局中放置控制項,控制項會填滿它所在的單元。在StackPanel和Grid布局中,是支援自動大小的。
- 對於包含字型的控制項,移除Height和Width屬性,而是設定MinHeight和MinWidth屬性值,這樣設定是為了在縮小時,而導致的字型出現不可讀的情況。當縮小比例太大時,會出現字型緊湊在一起,而導致字型無法閱讀的情況。
- 當在Grid布局中設定RowDefinition和ColumnDefinition屬性值時,請使用相對的Height和Width值。例如:指定一列是另一列的5倍大小時,使用“*”運算式,或者“5*”Widht值來設定ColumnDefinition屬性值。
Auto和“*”大小
當設定為auto的時候,此時允許控制項的大小去適應它們的內容,即使是內容大小變化了。“*”總是用來設定Grid布局中的行和列的大小。在XAML中,它的運算式為“*”或者"n*"。比如,一個Grid布局有4列,你可能會按照以下表格的情況進行布局:
Column_1 |
Auto |
此時,這列的大小會隨它的布局的內容的變化而變化 |
Column_2 |
* |
當第一列計算完了後,之後的所有列分剩下的寬度,這列會是第四列的一半大小 |
Column_3 |
Auto |
同第一列 |
Column_4 |
* |
當auto列計算完了後,這列獲得剩下的所有空間,這列會是第二列的2倍大小 |
Canvas
以下是一些布局例子:
View Code
1 <Canvas>2 <Rectangle Canvas.Left="200"3 Canvas.Top="100"4 Fill="Red"5 Width="350"6 Height="500"/>7 </Canvas>
Canvas.Left="200"表示距離左邊距200pixel;
Canvas.Top="100"表示距離上邊距100pixel;
StackPanel
StackPanel是一個簡單的布局管理。在StackPanel中的子項目都是按照豎直(預設)的,佔一行的形式進行排列。你可以使用Orientation屬性來改變子項目的排列方向。
View Code
1 <StackPanel Margin="20" Orientation="Horizontal">2 <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>3 <Rectangle Fill="Blue" Width="100" Height="100" Margin="10"/>4 <Rectangle Fill="Yellow" Width="100" Height="100" Margin="10"/>5 <Rectangle Fill="Gray" Width="100" Height="100" Margin="10"/>6 <Rectangle Fill="AliceBlue" Width="100" Height="100" Margin="10"/>7 </StackPanel>
Grid
Grid支援將控制項安排在多行,多列的布局中。你可以通過使用RowDefinitions和ColumnDefinitions屬性來定義Grid的行和列。同時,你可以使用Grid.Column和Grid.Row屬性來將控制項布局在指定的行和列中。控制項也可以通過使用Grid.RowSpan和Grid.ColumnSpan屬性來佔用多行或者多列。
View Code
1 <Grid> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="auto"/> 4 <RowDefinition /> 5 <RowDefinition Height="auto"/> 6 </Grid.RowDefinitions> 7 8 <Grid.ColumnDefinitions> 9 <ColumnDefinition Width="*"/>10 <ColumnDefinition Width="*"/>11 </Grid.ColumnDefinitions>12 13 <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0"/>14 <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2"/>15 16 <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0"/>17 <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2"/>18 </Grid>