WPF布局元素

    WPF中的布局元素有以下五个元素

1. Grid：网格布局。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。类似于HTML中的Table标签。
2. StackPanel:栈式面板。可将包含的元素在竖直或水平方向上排成一条直线，当移除一个元素后，后面的元素会自动向前移动以填充空缺。
3. Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form编程的布局方式。
4. DockPanel:泊靠式面板。内部元素可以选择泊靠方向，类似于Windows Form编程中设置控件的Dock属性。
5. WrapPanel:自动折行面板。内部元素在排满一行后能够自动折行，类似于HTML中的流式布局。

下面我们就逐个研究一下他们的基本用法。

 

1. 1Grid

Grid的特点如下：

* 可以定义任意的数量的行和列。

* 行的高度和列的宽度可以使用绝对数值(数字)、相对比(*5)例或自动调整(Auto)的方式进行精确设定，并可以设置最大和最小值。

* 内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行(Grid.RowSpan="跨行数")，横向跨几列(Grid.ColumnSpan="跨列数")。

 

示例：

<Grid ShowGridLines="True">

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition Height="8*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"/>

            <ColumnDefinition Width="8*"/>

    </Grid.ColumnDefinitions>

<Grid>

 

上面定义两行两列，行只能设置高度，列只能设置宽度，第一行1份，第二行占8份，第一列占100的宽度，第列占8份，布局内容就在第一个Grid元素中编写。

显示图：

 

2.1 StackPanel

StackPanel特点：

* 可以把内部元素在纵向或横向上紧凑排列，形成栈式布局。

* 移除前面的空间后可以自动向前补充空余。

 

一般我们只需使用Orientation、HorizontalAlignment、VerticalAlignment这三个属性组合出各种排列和对齐方式。Orientation决定内部元素是横向排列还是纵向排列，默认是纵向排列(Vertical),横向排列为Horizontal

示例：

<StackPanel>

<GroupBox Header="标题" Height="50">

            <StackPanel Orientation="Horizontal">

                <Button Width="50">一</Button>

                <Button Width="50">二</Button>

                <Button Width="50">三</Button>

                <Button Width="50">四</Button>

                <Button Width="50">五</Button>

                <Button Width="50">六</Button>

             </StackPanel>

         </GroupBox>

 </StackPanel>

显示图：

3.1 Canvas

Canvas使用起来比较简单，与Windows Form窗体上布局基本上是一致的，简单示例下。

<Canvas>

        <TextBlock Text="用户名:" Canvas.Left="12" Canvas.Top="12"/>

        <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="9"/>

        <TextBlock Text="密码:" Canvas.Left="12" Canvas.Top="41" Height="16" Width="36"/>

        <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="38"/>

        <Button Content="确定" Width="80" Height="22" Canvas.Left="100" Canvas.Top="67"/>

        <Button Content="清除" Width="80" Height="22" Canvas.Left="186" Canvas.Top="67"/>

 </Canvas>

显示图：

 

4.1DockPanel

DockPanel内元素会被附加上DockPanel.Dock这个属性，这个属性的数据类型为Dock的枚举。Dock枚举可取Left、Top、Right和Bottom四个值，根据Dock属性值，DockPanel内的元素会向指定方向积累，切分DockPanel内部的剩余可用空间。

示例：

<DockPanel>

        <TextBox DockPanel.Dock="Top"  Height="25" BorderBrush="Black"/>

        <TextBox DockPanel.Dock="Left"  Width="150" BorderBrush="Black"/>

        <TextBox BorderBrush="Black"/>

</DockPanel>

显示图：

默认情况向DockPanel最后一个子元素会自动填充最后剩余空间，若是不想让他填充，可DockPanel使用属性LastChildFill="False"取消自动填充。

 

5.1 WrapPanel

WarpPanel内部采用的是流式布局。使用Orientation属性来控制流延伸的方向，使用HorizontalAlignment和VerticalAlignment两个属性来控制内部控件的对齐。在流延伸的方向上，WrapPanel会排列尽可能多的控件，排不下去的控件会将新的一行或一列继续排列。

示例：

<WrapPanel>

        <GroupBox Header="标题">

            <WrapPanel Orientation="Horizontal" ItemHeight="20" ItemWidth="80">

                <Button>One</Button>

                <Button>Two</Button>

                <Button>Three</Button>

                <Button>Four</Button>

                <Button>Five</Button>

                <Button>Six</Button>

            </WrapPanel>

        </GroupBox>

 </WrapPanel>

显示图：