WPF布局

WPF在布局方式，根据项目的类型可以分为两种：

A：WPF应用程序布局根元素是Window，这是和Winform相对应的。

B：WPF浏览器程序布局根元素是Page，这是和ASP.NET对应的。

每种布局方式下面，可以放置形式各异的容器和控件。其中主要的几个

布局容器有：

• StackPanel              以线性方式排列，其中控件可以水平或者垂直排列
• DockPanel               以上、下、左、右、填充的方式排列控件
• Grid                       以网格形式排列，可以按照行、列方式排列控件
• CanVas                  根据Canvas确定子元素的精确位置
• WrapPanel              根据排列属性可以从上到下，从左到右排列子元素

下面将依次介绍这几个容器。

1.StackPanel

这个容器对控件排列方式是竖着。即：Orientation="Vertical"，通过它实现

子控件的对齐方式是水平还是垂直。

这个容器默认的排列方式是水平拉伸、垂直拉伸，即：

VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

这两个属性是设置子控件所在容器中的位置，上、下、左、右、中、拉伸

示例

    <StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <Label>1</Label>
        <Label>2</Label>
        <Label>3</Label>
        <Label>4</Label>
    </StackPanel>

结果

1

2

3

4

可以设置其中控件的排列状态，水平和垂直都有四个值：（上，下）或者（左，右），中间，拉伸。

水平拉伸相当于整行，垂直拉伸相当于整列。

2.DockPanel

这个容器对控件排列方式是横着。

默认最后一个控件设置填充，即：LastChildFill="True"

通过Dock属性来设置上、下、左、右。

这个容器默认的排列方式是水平拉伸、垂直拉伸，

示例 

    <DockPanel LastChildFill="True" >
        <Label DockPanel.Dock="Top">1</Label>
        <Label DockPanel.Dock="Left">2</Label>
        <Label DockPanel.Dock="Right">3</Label>
        <Label DockPanel.Dock="Bottom">4</Label>
        <Label >5</Label>
    </DockPanel>

3.Grid

这个容器通过网格的形式对子元素进行布局。

默认不显示分割线，即ShowGridLines="False"

 <Grid.ColumnDefinitions> 

   这里放置列，有多少ColumnDefinition就代表多少列，

</Grid.ColumnDefinitions>

行的规则和列想同，最后网格数就是行*列。

对于宽和高度设置，可以用绝对数字和相对数字

，20代表精确数字，20*是按照比例设置的。

同时还可以设置控件的位置和跨行、列显示。

示例

    <Grid ShowGridLines="False">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*"></ColumnDefinition>
            <ColumnDefinition Width="20*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Label Grid.ColumnSpan="1" Grid.Column="0" Grid.Row="1">1</Label>
        <Label Grid.Column="1" Grid.RowSpan="2">2</Label>
    </Grid>

4.Canvas

这个容器排列子控件，是按照子控件相对于

Canvas的距离对子控件布局的。

示例

    <Canvas  ClipToBounds="False" >
        <Label Canvas.Top="1">1</Label>  

        <Label Canvas.Bottom="10" >2</Label>
        <Label Canvas.Left="20">3</Label>
        <Label Canvas.Right="10">4</Label>
        <Label Canvas.Top="70">5</Label>
    </Canvas>

5.WrapPanel

这个容器是以流的方式排列子控件的，

默认为Orientation="Horizontal"，控件从左到右排列，然后从上到下依次排列。

根据属性Orientation="Vertical"，则控件先从上到下，然后从左到右。