在SilverLight中用來規劃整個版面Layout的Control主要有三種:
- Grid: 就像Table一樣, 將物件以行列的方式對齊
- StackPanel: 讓物件之間相對對齊, 如相鄰對齊或向上對齊
- Canvas: 用絕對對齊(absolute positioning) 的方式放置物件(與SilverLight 1.0相符)
Grid
Grid 在使用VS2008開啟新檔案的時候就已經存在XAML裡面了, 格式會長這個樣子:
<UserControl x:Class=”EasyGrid.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”400″ Height=”300″>
<Grid x:Name=”LayoutRoot” Background=”White”>
</Grid>
你可以先規劃整個SilverLight App的框線, 以便之後的對齊作業, 定義的方式如下:
<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid.RowDefinitions>
<RowDefinition Height=”50″ />
<RowDefinition Height=”30*” MaxHeight=”70″ />
<RowDefinition Height=”40*” MaxHeight=”70″ />
<RowDefinition Height=”*” MinHeight=”30″ MaxHeight=”50″ />
<RowDefinition Height=”Auto” MinHeight=”5″ MaxHeight=”30″ />
</Grid.RowDefinitions>
</Grid>
Height: 每一列的高度
MaxHeight: 能夠拉伸的最大高度 (* 表示以比例的方式定義高度, 兩倍高就是 2*)
MinHeight: 能夠拉伸的最小高度
StackPanel
Stack就是堆疊的意思, 使用StackPanel你可以將你的物件以左右堆疊或者上下堆疊的方式排列, 就像書本在書架上一樣. 它也是在SilverLight2.0經常使用的對齊工具. 下面以放置TextBlock, TextBox, CheckBox及Button 為例:
<StackPanel Background=”Beige” Orientation=”Vertical” >
<TextBlock Text=”Your name?”
HorizontalAlignment=”Left” Margin=”10,2,0,1″/>
<TextBox Width=”150″ Height=”30″
HorizontalAlignment=”Left” Margin=”10,2,0,1″/>
<Button Content=”Submit this information”
HorizontalAlignment=”Left”
Margin=”10,2,0,1″ Height=”30″ Width=”150″ />
<CheckBox Content=”With Zing!” HorizontalAlignment=”Left”
Margin=”10,2,0,1″ />
</StackPanel>
屬性:
Background: Stack背景的顏色
Orientation: 排列方向, Vertical是垂直
在StackPanel內部的物件Margin=”10,2,0,1″ 的Margin順序是左, 上, 右, 下.