WPF--布局（代码讲解）

布局通用属性

所有布局面板都由System.Windows.Controls.Panel抽象类派生。
panel就是所有布局元素的基类，这个抽象类包含三个公共属性：Background、Children、IsItemHost（IsItemHost标志着控件是不是类似TreeView、ListView这样的控件）。

其中：
Background：如果想接收鼠标事件，就必须将属性设置为非空值，（如果想接收鼠标事件，又不希望显示固定颜色的背景，那么只需要将背景色设置为透明即可），一般设置鼠标事件时，系统会自动设置Background的属性值。

IsItemHost：该属性是一个布尔值，如果面板用于显示与ItemsControl控件关联的项（例如，TreeView控件中的节点或列表项），该属性值为true.在大多数情况下，甚至不需要知道列表控件使用后台面板管理它所包含的条目的布局。但如果希望创建自定义的列表，以不同放置子元素（例如，以平铺方式显示图像的ListBox控件），该细节就变得很重要了。

布局容器内的子元素对自身的对齐方式（HorizontalAlignment（水平方向）、VerticalAlignment（垂直方向））、宽度（Width）、高度（Height）、四周间隙（Margin）等有一定的决定权。

布局面板

1 Canvas

画布。通过Top、Left、Right、Bottom四个属性将子元素定位。
实质上，在选择每个控件的停靠角时，附加属性的值是作为外边距使用的。也就是说，如果你将下面的示例中的Canvas的HorizontalAlignment="Left" VerticalAlignment="Top"语句改成HorizontalAlignment="Right" VerticalAlignment="Bottom"，TextBox就会在右下角显示（是在窗体外），如图。

代码示例：

<Canvas HorizontalAlignment="Left" VerticalAlignment="Top"  >
   <TextBox Text="1" />
</Canvas>

运行效果：

实际应用
【例1】设计要求：将5个Button按钮分别放在画布的左上角、右上角、左下角、右下角和中心位置。
代码：

<Canvas>
    <Button Content="左上" Canvas.Left="10" Canvas.Top="10"/>
    <Button Content="左下" Canvas.Bottom="0" Canvas.Left="0"/>
    <Button Content="右上" Canvas.Right="0" Canvas.Top="0"/>
    <Button Content="右下" Canvas.Bottom="0" Canvas.Right="0"/>
</Canvas>

运行结果：

由此可以看出：Canvas上的元素附加属性Canvas.Left、Canvas.Top、Canvas.Rightt和Canvas.Bottom来完成内部子元素（此处是Button）的定位。

【例2】设计要求：分别将黄色、粉红色、蓝紫色3个Rectangle放到画布上。（注：使用的是Canvas.ZIndex附加属性）
代码示例：

<Canvas>
    <Rectangle Fill="Yellow" Height="60" Width="60" Canvas.Top="10" Canvas.Left="10" Canvas.ZIndex="3"/>
    <Rectangle Fill="Pink" Height="60" Width="60" Canvas.Top="40" Canvas.ZIndex="2"/>
    <Rectangle Fill="Blue" Height="60" Width="60" Canvas.ZIndex="1"/>
</Canvas>

运行结果：

从运行结果来看，可以得出：Canvas.ZIndex这个属性的本质是谁先显示，Canvas.ZIndex=“1”，那么这个元素会先显示。
专业术语是：Canvas.ZIndex设置重叠深度。

2 DockPanel

停靠面板。让子元素停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。

如果将属性LastChileFill设置为默认值（true），则DockPanel中的最后一个元素会填充剩余空间（注意是DockPanel中的元素，而不是DockPanel中的子控件的元素！！！）。

代码示例：

<DockPanel LastChildFill="True"  Height="20" VerticalAlignment="Top" >
    <TextBlock Text="hello" Height="20" Width="40" />
    <TextBlock Text="world" Height="20" Width="40"/>
    <TextBlock Text="!" Height="20" Width="40"/>
</DockPanel>

运行结果：

而且需要注意的是：如果设置为true，那么你将不能更改最后一个元素的位置。即他始终都是填充最后剩余的空间。

举例说明：
还是上面的代码，我们只更改DockPanel的子元素（TextBlock）的位置，即DockPanel.Dock的属性值。

<DockPanel LastChildFill="True"  Height="20" VerticalAlignment="Top" >
        <TextBlock Text="hello" Height="20" Width="40" DockPanel.Dock="Right"/>
        <TextBlock Text="world" Height="20" Width="40" DockPanel.Dock="Right"/>
        <TextBlock Text="!" Height="20" Width="40" DockPanel.Dock="Right"/>
    </DockPanel>

运行效果：