---

总览

核心布局面板

名称	描述
StackPanel	在水平或垂直的堆栈中放置元素。这个布局容器通常用于更大、更复杂窗口中的一些小区域
WrapPanel	在一系列可换行的行中放置元素。在水平方向上, WrapPanel面板从左向右放置条目,然后在随后的行中放置元素。在垂直方向上, WrapPanel面板在自上而下的列中放置元素,并使用附加的列放置剩余的条目
DockPanel	根据容器的整个边界调整元素
Grid	根据不可见的表格在行和列中排列元素,这是最灵活、最常用的容器之一
UniformGrid	在不可见但是强制所有单元格具有相同尺寸的表中放置元素,这个布局容器不常用
Canvas	使用固定坐标绝对定位元素。这个布局容器与传统 Windows窗体应用程序最相似,但没有提供锚定或停靠功能。因此,对于尺寸可变的窗口,该布局容器不是合适的选择。如果选择的话,需要另外一些工作

---

一、StackPanel

1. 默认情况下，Stack Panel面板按自上而下的顺序排列元素,使每个元素的高度适合它的内容
2. 通过设置 Orientation属性，改变排列顺序（默认为：Vertical）

<Grid>
	<StackPanel>
		<Label HorizontalAlignment="Center">A Button Stack</Label>
		<Button HorizontalAlignment="Left">Left Button</Button>
		<Button HorizontalAlignment="Right">Right Button</Button>
		<Button>Right Button</Button>
	</StackPanel>
</Grid>

执行结果：

二、WrapPanel

1. WrapPanel面板在可能的空间中，以一次一行或一列的方式布置控件。
2. 通过设置 Orientation属性，改变排列顺序（默认为：Horizontal）

<Grid>
	<WrapPanel>
		<Button Width="80" Height="30" >Button-01</Button>
		<Button Width="80" Height="60" >Button-01</Button>
		<Button Width="80" Height="30" >Button-01</Button>
		<Button Width="80" Height="30" >Button-01</Button>
		<Button Width="80" Height="30" >Button-01</Button>
	</WrapPanel>
</Grid>

执行结果：

三、DockPanel

1. DockPanel 沿着一条外边缘来拉伸所包含的控件。
2. 例如，如果将个按钮停靠在 Dockpanel面板的顶部，该按钮会被拉伸至 Dockpane面板的整个宽度，但根据内容和 Midheight属性为其设置所需的高度。而如果将一个按钮停靠到容器左边，该按钮的高度将被拉伸以适应容器的高度，而其宽度可以根据需要自由增加。
3. 子元素是通过Dock附加属性来确定停靠的边，可将该属性设置为Left、Right、Top 或 Bottom。放在 DockPanel面板中的每个元素都会自动捕获该属性
4. 先设置的控件优先靠边

<Grid>
	<DockPanel>
		<Button DockPanel.Dock="Top">Top Button</Button>
		<Button DockPanel.Dock="Bottom">Bottom Button</Button>
		<Button DockPanel.Dock="Left">Left Button</Button>
		<Button DockPanel.Dock="Right">Right Button</Button>
		<Button>Remaining space</Button>
	</DockPanel>
</Grid>

执行结果：

四、Grid

1 基础运用

1. Grid面板也是将窗口分割成(可使用其他面板进行管理的)更小区域的理想工具。
2. Grid面板通过使用对象填充 Grid Column Definitions和 Grid Row Definitions集合来创建网格和行。
3. ShowGridLines 设置是否显示分割线

<Grid ShowGridLines="True">
 <Grid.RowDefinitions>
 	<RowDefinition />
 	<RowDefinition />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 	<ColumnDefinition />
 	<ColumnDefinition />
 </Grid.ColumnDefinitions>
 <Button Grid.Column="0" Grid.Row="0">Button-01</Button>
 <Button Grid.Column="1" Grid.Row="1">Button-02</Button>
</Grid>

执行结果：

2 调整行和列

<ColumnDefinition Width="100"/>		    <!-- 绝对尺寸 -->
<ColumnDefinition Width="Auto"/>	    <!-- 自动尺寸-->
<ColumnDefinition Width="80*"/>		<!-- 比例尺寸（带*前面的数为比例系数）-->

<!-- 如果希望不均匀地分割剩余空间,可指定权重,权重必须放在星号之前。-->
<!-- 例如,如果有两行是按比例设置尺寸,并希望第一行的高度是第二行高度的一半,-->
<!-- 那么可以使用如下设置来分配剩余空间-->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>

3 跨单元格

Row和 Column附加属性在单元格中放置元素。还可以使用另外两个附加属性使元素跨越多个单元格,这两个附加属性是 Rowspan和 Columnspan。这两个属性使用元素将会占有的行数和列数进行设置。

<Grid ShowGridLines="True">
  <Grid.RowDefinitions>
  	<RowDefinition Height="39*"/>
  	<RowDefinition Height="40*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
  	<ColumnDefinition Width="84*"/>
  	<ColumnDefinition Width="92*"/>
  	<ColumnDefinition Width="82*"/>
  	<ColumnDefinition Width="67*"/>
  	<ColumnDefinition Width="95*"/>
  </Grid.ColumnDefinitions>
  <Button Grid.Column="0" Grid.Row="0">Button-01</Button>
  <Button Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" >Button-02</Button>
  <Button Grid.Column="4" Grid.Row="0" Grid.RowSpan="2">Button-03</Button>
</Grid>

执行结果：

4 分割线 GridSplitter

原则：

1. GridSplitter对象必须放在Grid单元格中，可与已经存在的内容一并放到单元格中，这时需要调整边距设置，使它们不相互重叠。更好的方法是预留一列或一行专门用于放置 Gridsplitter对象，并将预留行或列的 Heigh 或 Width属性的值设置为Auto；
2. Gridsplitter对象总是改变整行或整列的尺寸(而非改变单个单元格的尺寸)。为使GridSplitter对象的外观和行为保持一致，需要拉伸 GridSplitter 对象使其穿越整行或整列，而不是将其限制在单元格中。为此，可使用前面介绍过的 RowSpan或 ColumnSpan属性。如下例子，Gridsplitter对象的 Rowspan属性被设置为2,因此被拉伸充满整列。如果不使用该设置, GridSplitter对象会显示在顶行(放置它的行)中,即使这样,拖动分割条时也会改变整列的尺寸
3. 最初, GridSplitter对象很小不易看见。为了使其更可用,需要为其设置最小尺寸。对于竖直分割条需要将 VerticalAlignment 属性设置为Stretch（使分割条填满区域的整个高度），并将 Width设置为固定值（如10个设备无关单位）。对于水平分割条,需要设置 HorizontalAlignment 属性来拉伸,并将 Height属性设置为固定值
4. GridSplitter对齐方式还决定了分割条是水平的（用于改变行的尺寸）还是竖直的（用于改变列的尺寸）。对于水平分割条,需要将 VerticalAlignment 属性设置为 Center（这也是默认值），以指明拖动分割条改变上面行和下面行的尺寸。对于竖直分割条（图3-15中显示的分割条），需要将 VerticalAlignment 属性设置为 Center，以改变分割条两侧列的尺寸。
5. 在声明 GridSplitter对象时,将 ShowsPreview属性设置为fase。因此,当把分割条从一边拖到另一边时,会立即改变列的尺寸。但是如果将ShowsPreview属性设置为true,当拖动分割条时就会看到一个灰色的阴影跟随鼠标指针,用于显示将在何处进行分割。并且直到释放了鼠标键之后列的尺寸才改变。如果 GridSplitter对象获得了焦点,也可以使用箭头键改变相应的尺寸。

<Grid ShowGridLines="False">
	<Grid.RowDefinitions>
		<RowDefinition/>
		<RowDefinition/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition/>
		<ColumnDefinition Width="Auto"/>
		<ColumnDefinition/>
	</Grid.ColumnDefinitions>
	<Button Grid.Column="0" Grid.Row="0" Margin="3" Content="Button-01"/>
	<Button Grid.Column="0" Grid.Row="1" Margin="3" Content="Button-02"/>
	<Button Grid.Column="2" Grid.Row="0" Margin="3" Content="Button-03"/>
	<Button Grid.Column="2" Grid.Row="1" Margin="3" Content="Button-04"/>
	<GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"/>
</Grid>

执行结果：

5 共享尺度尺（待完善）

五、UniFormGrid 面板

有一种网格不遵循前面讨论的所有原则一 UniFormGrid面板。与Grid面板不同UniFormGrid面板不需要(甚至不支持)预先定义的列和行。相反,通过简单地设置Rows和Columns属性来设置其尺寸。每个单元格始终具有相同的大小,因为可用的空间被均分。最后,元素根据定义的顺序被放置到适当的单元格中。 Uniformgrid面板中没有Row和 Column附加属性,也没有空白单元格。

<Grid>
	<UniformGrid Rows="2" Columns="2">
		<Button >Button 01</Button>
		<Button >Button 02</Button>
		<Button >Button 03</Button>
		<Button >Button 04</Button>
	</UniformGrid>
</Grid>

执行结果：

六、Canvas

Canvas面板允许使用精确的坐标放置元素,如果设计数据驱动的富窗体和标准对话框,这并非好的选择;但如果需要构建其他些不同的内容(例如,为图形工具创建绘图表面), Canvas面板可能是个有用的工具。 Canvas面板还是最轻量级的布局容器。这是因为 Canvas面板没有包含任何复杂的布局逻辑,用以改变其子元素的首选尺寸。 Canvas面板只是在指定的位置放置其子元素,并且其子元素具有所希望的精确尺寸为在 Canvas面板中定位元素,需要设置 Canvas.Left和 Canvas.Top附加属性。 Canvas.Left属性设置元素左边和 Canvas面板左边之间的单位数, Canvas,Top属性设置子元素顶边和Canvas面板顶边之间的单位数