[SilverLight2] Layout Control介紹

在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順序是左, 上, 右, 下.