WPF UI布局（Layout）

WPF是专门用户界面技术，布局是核心功能之一。

每个布局元素都有自己的特点，要灵活使用。

WPF中布局元素有如下：

Grid：网格

可以自行定义行和列并通过行列的数量、行高和列宽来调整布局。类似Table。

Grid具有ColumnDefinitions和RowDefinitions属性，它们分别是ColumnDefinition和RowDefinition的集合，

表示Grid定义了多少行多少列。

StackPanel：栈式面板

可以将包含的元素在垂直或水平方向上排成一条直线，移除前一个元素后面一个元素会自动向前填充。

StackPanel使用3个属性来控制内部元素的布局，分别为:

Orientation（绝对内部元素横向还是纵向累积）

HorizontalAlignment（水平方向对齐方式）

VerticalAlignment(竖直方向对齐方式)

例：使用StackPanel布局的选项表

 <Grid>
        <GroupBox Header="请选择没有错别字的成语" BorderBrush="Black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="A.迫不及待"/>
                <CheckBox Content="A.唉声叹气"/>
                <CheckBox Content="A.不可理喻"/>
                <CheckBox Content="A.婆子敏捷"/>
                <CheckBox Content="A.迫不及待"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="60" Margin="5"/>
                    <Button Content="确认" Width="60" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox> 
 </Grid>

效果：

Canvas 画布

内部元素可以以像素为单位的绝对坐标进行定位，类似于winFrom

下面例子用Canvas代替Grid设计登录界面：（窗口布局不改变，尺寸固定。不然Grid布局弹性比较好

 <Canvas>
        <TextBlock Text="用户名：" Canvas.Left="12" Canvas.Top="12"/>
        <TextBox Width="200" Canvas.Left="66" Height="23" Canvas.Top="9" BorderBrush="Black"/>
        <TextBlock Text="密码：" Canvas.Left="12" Canvas.Top="40.72" Height="16" Width="36"/>
        <TextBox Width="200" Canvas.Left="66" Height="23" Canvas.Top="38" BorderBrush="Black"/>
        <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>

效果：

DockPanel 泊考式面板

DockPanel 内的元素会被附加上Dock属性，数据类型为Dock枚举。

Dock枚举可取Lift、Top、Right、Bottom。

DockPanel有一个重要属性bool类型的LastChildFill，默认为True。

LastChildFill为True，最后一个元素的Dock属性会被忽略。这个元素会把所有剩余空间充满。

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

WrapPanel 自动折行面板

内部元素排满后自动折行，类似于流式布局。

WranpPanel使用Orientation属性控制流延伸方向。

使用VerticalAlignment和HorizontalAlignment控制内部对齐方式

PS：平时使用最多的还是Grid和StackPanel。