波斯马BOSSMA Information Technology

[源自Silverlight tutorial和Silverlight Documentation]

布局控件在Silverlight应用程序中是必需的，它用来管理你应用中的其它控件（包括布局控件）。你可以把布局控件想象为“容器”。我们经常使用的布局控件有三个：
这三个控件都继承于Panel,具体详情请查看官方文档。

Grid: 表格，通过列和行指定对象的位置
StackPanel: 一个接一个的排列对象
Canvas: 按照其中控件的绝对位置布局

这篇文章介绍StackPanel控件：
StackPanel控件通常结合其它布局控件，它允许你处置的堆放一个个的对象，或者并排放置（像书架上的书）。
使用这个控件的一个便利就是，你不用其中对象的位置，这些对象会自动定位自己相对于它前面已经定义的控件。

1、一个垂直堆放的例子
在这个例子中，我们会从下到上对方这几个控件：一个CheckBox,一个Button,一个TextBox,一个TextBlock.

<UserControl x:Class="SLDemo.StackPanel"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Width="400" Height="300">
 <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>
</UserControl>

Orientation指定了堆放的方式，在这里是垂直。
其中控件定义的顺序决定了他们堆放的顺序。

StackPanel效果图1

关于控件的margin属性，原文做了详细说明，因我在上一篇文章中已做了详细介绍，而且这个属性和css中的margin极其相似，这里进提供一个例子：

<StackPanel Background="Beige" Orientation="Vertical" >
 <TextBlock Text="Your name?" HorizontalAlignment="Left" Margin="10,2,0,1"/>
 <TextBox Width="150" Height="30" HorizontalAlignment="Left" Margin="50,30,240,40"/>
 <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>

stackpanel效果图2

2、一个水平堆放的例子

<StackPanel Background="Beige" Orientation="Horizontal" >
 <TextBlock Text="Your name?" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,2,0,1"/>
 <TextBox Width="150" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,2,0,1"/>
 <Button Content="Submit this information" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,2,0,1" Height="30" Width="150" />
 <CheckBox Content="With Zing!" HorizontalAlignment="Left" VerticalAlignment="Center"? Margin="10,2,0,1" />
</StackPanel>

做了哪些更改呢？
1、VerticalAlignment=”Center”
2、Orientation=”Horizontal”

关于StackPanel更多的属性，请参看文档中的介绍。
OK，这一节就到这里。

关键字: Silverlight StackPanel