WPF8 UI布局

WPF中的布局元素有如下几个：

1、Grid：网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。近似于HTML中的Table。

2、StackPanel：栈式面板。将包含的元素在竖直或水平方向上排成一条直线，当移除一个元素后，后面的元素会自动向前移动以填充空缺。

3、Canvas：画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于WindowsForm的布局方式。

4、DockPanel：泊靠式面板。内部元素可以选择泊靠方向，类似于在WindowsForm编程中设置控件的Dock属性。

5、WrapPanel：自动拆行面板。内部元素在排满一行后能够自动拆行，类似于HTML中的流式布局。

一、Grid

Grid元素会以网格形式对内容元素进行布局。

Grid特点为：

1、可以定义任意数量的行和列，非常灵活

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

3、内部元素可以设置自己的所在行和列，还可以设置自己纵向跨几行、横向跨几列。

Grid布局适合于：

1、UI布局的大框架设计

2、大量UI元素需要成行或者成列对齐的情况

3、UI整体尺寸改变时，元素需要保持固有的高度和宽度比例

4、UI后期可能有较大变更或扩展。

定义Grid的行和列

Grid类具有ColumnDefinitions和RowDefinitions两个属性，分别用于定义Grid有多少列、多少行。实际工作中，还可以进一步定制每行每列的高和宽，可以设置3类值：

1、绝对值，为double数值加上单位后缀，例如30px，0.5cm

2、比例值，为double数值后加上一个*

3、自动值，字符串Auto

绝对值一旦设定就不会改变，所以又称固定值，适用于控件狂傲都不需要改变的情况。比例值是百分比，2*表示占据剩余未分配数值的20%，例如一个150px高度的Grid，有5行，其中2行使用25px的绝对值，剩下三行分别是2*，1*，2*，则实际所占元素分别为（150-50）/5再乘以系数，为40px，20px，40px。

如果使用自动值Auto为行高或列宽，那么行高或列宽的实际值将有行列内控件的高度和宽度决定，即控件会把行列撑到合适的宽度和高度，如果行列中没有控件，则行高和列宽均为0.

行和列都是从0开始计数；

指定一个控件在某行，就为这个控件的标签添加Grid.Row=“行编号”这样一个Attribute，若行编号为0（即控件位于首行）则可以省略这个Attribute，列同理。

若控件要跨多个行和列，则使用Grid.RowSpan="行数"和Grid.ColumnSpan=“列数”两个Attribute。

<Window x:Class="WPF_XAML_4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="240" Width="400"
        MinHeight="200" MinWidth="340" MaxHeight="400" MaxWidth="600">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Select Department and Comment:" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"/>
        <ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"/>
        <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/>
        <Button Content="Submit" Grid.Column="2" Grid.Row="4"/>
        <Button Content="Delete" Grid.Column="4" Grid.Row="4"/>
    </Grid>
</Window>

 

二、StackPanel

StackPanel可以把内部元素在纵向或横向上紧凑排列。形成栈式布局，当移除前面的元素，后面的元素会整体向前移动、补占原有元素的控件。

StackPanel适合于：

1、同类元素需要紧凑排列（菜单或列表）

2、移除其中的元素后能够自动补缺的布局或动画

StackPanel使用3个属性来控制内部元素的布局，orientation，horizontalAlignment、verticalAlignment，后两者绝对内部元素水平和垂直方向上的对齐方式，orientation则决定内部元素是横向累积还是纵向累积，可以取Horizontal或Vertical两个可取值。

三、Canvas

Canvas即画布，Canvas类似于Winform的布局，控件被放于Canvas时，就会被附加上CanvasX和CanvasY属性，Canvas适合于一些设计基本上不会有改动的小型布局，例如logo和艺术性较强的布局，依赖于横纵坐标的动画，需要大量使用横纵坐标进行绝对点定位的布局。

四、DockPanel

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

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

 五、WrapPanel

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