.NET开发者

Silverlight/WPF中有3个强大的布局控件，StackPanel、Canvas、Grid，从字面上理解，StackPanel是一种堆的布局，就是一个挨着一个的布局方式；Canvas是一种基于画板的布局方式，我们把控件放到面板上定义好坐标，这点跟Html中的Div布局类似，只是所有Div的Position都是相对定位的；Grid是一种表格方式的布局，这点很像是Html中的表格布局，把控件一个一个的放在表格里。

下面我们一一进行讲解：

1.StackPanel布局

StackPanel是一种堆的布局方式，其中Orientation属性，决定是水平排列，还是垂直排列，下面例子垂直排列

<StackPanel Orientation="Vertical">
    <Rectangle Height="40" Width="40" Fill="Red"></Rectangle>
    <Rectangle Height="50" Width="50" Fill="Yellow"></Rectangle>
    <Rectangle Height="60" Width="60" Fill="Green"></Rectangle>
</StackPanel>

结果：

垂直排列改为：

<StackPanel Orientation="Horizontal">
    <Rectangle Height="40" Width="40" Fill="Red"></Rectangle>
    <Rectangle Height="50" Width="50" Fill="Yellow"></Rectangle>
    <Rectangle Height="60" Width="60" Fill="Green"></Rectangle>
</StackPanel>

结果：

2.Canvas布局

Canvas是一种基于面板的布局方式，我们需要设置好Canvas.Top，Canvas.Left，Canvas.ZIndex属性，即相对面板的顶端距离，左端距离和显示顺序，因为这种布局是绝对定位的，需要设置好Canvas面板的高度和宽度

<Canvas Width="500" Height="500">
    <Rectangle Canvas.Top="0" Canvas.Left="0" Canvas.ZIndex="3" Height="40" Width="40" Fill="Red"></Rectangle>
    <Rectangle Canvas.Top="30" Canvas.Left="30" Canvas.ZIndex="2" Height="50" Width="50" Fill="Yellow"></Rectangle>
    <Rectangle Canvas.Top="50" Canvas.Left="50" Canvas.ZIndex="1" Height="60" Width="60" Fill="Green"></Rectangle>
</Canvas>

结果：

3.Grid布局

Grid布局是一种基于表格的布局方式，这种方式更为灵活，可以处理复杂的布局方式，其中要先定义行和列，再设置Grid内控件的Grid.Row和Grid.Column属性，即该控件在表格的第几行，第几列，其中Grid.RowSpan和Grid.ColumnSpan属性分别为跨行和跨列，和Html相似。

<Grid Width="300" Height="200">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Row="0" Grid.Column="0" Fill="Red"></Rectangle>
    <Rectangle Grid.Row="0" Grid.Column="1" Fill="Yellow"></Rectangle>
    <Rectangle Grid.Row="1" Grid.ColumnSpan="2" Fill="Green"></Rectangle>
</Grid>

结果：

Silverlight/WPF给我们提供了非常强大灵活的布局方式，我们要灵活运用这三种布局方式实现更为复杂的布局。

Related posts:

1. WPF无边框透明窗体的缩放
2. WPF中的拖放（一）
3. Silverlight代码方式添加动画(二)
4. Silverlight代码方式添加动画(一)
5. Silverlight 3.0 之HelloWorld！