前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴 Silverlight 2.0 系列文章。
本篇介绍 Silverlight 中的布局控件。布局控件目前有三个，Canvas、StackPanel、Grid，估计正式版释出后，会集成WPF中的其他布局控件。
布局控件的继承层次：
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Panel
System.Windows.Controls.Canvas
System.Windows.Controls.StackPanel
System.Windows.Controls.Grid
本文贯穿始终的一个示例截图如下，三个布局控件都实现该图所示的效果。
Canvas：
使用最灵活，几乎能完成任何布局。对齐方式对Canvas无效，采用绝对坐标定位，重叠时采用ZIndex设置层次，ZIndex值大的居于上层。
示例：
XAML:
<Canvas x:Name="cvs1" Background="DarkGreen">
<TextBlock Canvas.Top="10" Height="22" Foreground="Yellow" Canvas.Left="30">Source:</TextBlock>
<TextBlock Canvas.Top="10" Height="22" Foreground="Yellow" Canvas.Left="400">Selected:</TextBlock>
<ListBox x:Name="lstSource" Width="160" Height="240" Canvas.Top="50" Canvas.Left="30">
</ListBox>
<ListBox x:Name="lstSelected" Width="160" Height="240" Canvas.Top="50" Canvas.Left="400">
</ListBox>
<Button x:Name="btnAdd" Width="100" Height="30" Canvas.Top="60" Canvas.Left="240" Content="〉〉" Click="btnAdd_Click">
</Button>
<Button x:Name="btnRemove" Width="100" Height="30" Canvas.Top="260" Canvas.Left="240" Content="〈〈" Click="btnRemove_Click">
</Button>
</Canvas>
用C#代码向Canvas中插入基本的代码为：
{
public Page()
{
InitializeComponent();
Image img
= new Image();BitmapImage bi = new BitmapImage();
bi.UriSource = new Uri("photo.jpg", UriKind.Relative);
img.Source = bi;
Canvas.SetTop(img,
120); // 设置绝对坐标Canvas.SetLeft(img, 240);
Canvas.SetZIndex(img, 10); // 设置ZIndex
cvs1.Children.Add(img); // 添加子控件
lstSource.Items.Add("姓名：周振兴");
lstSource.Items.Add("网名：飘遥");
lstSource.Items.Add("籍贯：青岛");
lstSource.Items.Add("工作：北京");
lstSource.Items.Add("Email:tda7264@163.com");
lstSource.Items.Add("Blog:xianfen.net");
}
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
if (lstSource.SelectedItem != null)
{
lstSelected.Items.Add(lstSource.SelectedItem);
lstSource.Items.Remove(lstSource.SelectedItem);
}
}
private void btnRemove_Click(object sender, RoutedEventArgs e)
{
if (lstSelected.SelectedItem != null)
{
lstSource.Items.Add(lstSelected.SelectedItem);
lstSelected.Items.Remove(lstSelected.SelectedItem);
}
}
}
StackPanel：
只能按横向或纵向排列，设置Orientation属性决定排列方向。相对定位，设置Margin属性来设置边界。灵活性最低。
如图：
上面的例子用StackPanel重新布局：
XAML:
<StackPanel Margin="30, 10, 0, 0">
<TextBlock Height="22" Foreground="Yellow">Source:</TextBlock>
<ListBox x:Name="lstSource" Width="160" Height="240">
</ListBox>
</StackPanel>
<StackPanel x:Name="spCenter" Margin="50,40,50,0">
<Button x:Name="btnAdd" Width="100" Height="30" Content="〉〉" Click="btnAdd_Click">
</Button>
<Button x:Name="btnRemove" Width="100" Margin="0,20,0,0" Height="30" Content="〈〈" Click="btnRemove_Click">
</Button>
</StackPanel>
<StackPanel Margin="0, 10, 0, 0">
<TextBlock Height="22" Foreground="Yellow">Selected:</TextBlock>
<ListBox x:Name="lstSelected" Width="160" Height="240">
</ListBox>
</StackPanel>
</StackPanel>
用C#代码向StackPanel中插入基本的代码为：
img.Margin = new Thickness(0, 25, 0, 0); // Margin实际为Thickness，设置顺序为：Left,Top,Right,Bottom，顺时针方向。
spCenter.Children.Insert(1, img); // 参数一为带插入控件位置的索引。
Grid:
Grid是三个布局控件中最复杂的，默认的对齐方式是水平居中和垂直居中。可合并单元格，布局灵活性较大。采用定义模板，然后填充元素的方式，改进了HTML控件Table标记和内容混乱的局面。可使用ShowGridLines="True"属性来显示边框，但合并后的单元格的边框没有消失。
继续上面的例子，重新用Grid布局。
XAML:
<Grid.RowDefinitions>
<RowDefinition Height="32"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Margin="30,10,0,0" Height="22" Grid.Row="0" Grid.Column="0" Foreground="Yellow">Source:</TextBlock>
<ListBox x:Name="lstSource" Margin="30,0,0,0" Grid.RowSpan="3" Grid.Row="1" Grid.Column="0" Width="160" Height="240">
</ListBox>
<Button x:Name="btnAdd" Grid.Row="1" Grid.Column="1" Width="100" Height="30" Content="〉〉" Click="btnAdd_Click">
</Button>
<Button x:Name="btnRemove" Grid.Row="3" Grid.Column="1" Width="100" Height="30" Content="〈〈" Click="btnRemove_Click">
</Button>
<TextBlock Height="22" Grid.Row="0" Grid.Column="2" Foreground="Yellow">Selected:</TextBlock>
<ListBox x:Name="lstSelected" Grid.Row="1" Grid.RowSpan="3" Grid.Column="2" Width="160" Height="240">
</ListBox>
</Grid>
用C#代码向Grid中插入基本的代码为：
Grid.SetRow(img, 2); // 设置元素所在行
Grid.SetColumn(img, 1); // 设置元素所在列
结束语：
本篇介绍了Silverlight 2.0中的布局控件。熟悉这些控件后可做出很专业的界面。
下一篇介绍样式(Style)。