WPF 4.5和C#(3.2)——布局(Border,WrapPanel,DockPanel)

Border边框

Border并不是布局面板的其中之一，但是它是一种便利的元素，你会经常和布局面板一起使用。因此，有必要现在对它进行介绍，在你更加深入之前。
Border类非常简单。它包含一段简单的嵌套内容（通常是布局面板）并且添加了背景色和围绕外面的边框。要掌握Border，只需要掌握表3-4列出的属性。
表3-4：Border类的属性

下面是StackPanel中，一个简单的，具有轻微圆角的边框，围绕在一组按钮外面：

<Border Margin="5" Padding="5" Background="LightYellow"           BorderBrush="SteelBlue" BorderThickness="3,5,3,5"           CornerRadius="3" VerticalAlignment="Top">        <StackPanel>             <Button Margin="3">One</Button>             <Button Margin="3">Two</Button>             <Button Margin="3">Three</Button>        </StackPanel></Border>

图3-8显示了结果。

图3-8：一个基础边框
你可以用于设置BorderBrush和Background的画刷以及颜色，在第6章有更多细节。

■ Note 从技术角度讲，Border是一种装饰物，是一种典型的在对象外围添加某些图形装饰的元素。所有的装饰类都继承自System.Windows.Controls.Decorator类。大部分装饰类的设计初衷是与特定控件一起使用。例如，Button使用ButtonChrome装饰类来获取它边角的标志以及阴影的背景色，还有，ListBox使用ListBoxChrome装饰类。还有两种更为平常的装饰类，在构建用户界面时很有用：这里讨论到的Border和你将在第12章见到的Viewbox。

WrapPanel和DockPanel
显然，单独使用StackPanel并不能帮助你创建出逼真的用户界面。要完成设计蓝图，StackPanel需要与其它更加有能力的布局容器合作。只有这时，你才能实现一个完整的窗口。
最精致的布局容器就是Grid，本章稍候将会讨论到。但是首先，很值得看一下WrapPanel和DockPanel，是两个由WPF提供的简单布局容器。通过提供不同的布局行为，二者都可以作为StackPanel的补充。

WrapPanel

WrapPanel在可用空间内以每次一行或一列的方式布局控件。默认时，WrapPanel.Orientation属性设置为Horizontal；控件按从左到右之后是紧接一行的顺序排列。然而，你可以使用Vertical在多列上放置元素。

■ Tip 如StackPanel一样，WrapPanel是真正为用户界面中小规模细节内的控件设计的，而不是整个窗口布局。例如，你可以使用WrapPanel布置按钮以形成像工具栏一样的控件。

下面的示例定义了一系列不同对齐方式的按钮，并且把它们安排到了WrapPanel中：

<WrapPanel Margin="3">         <Button VerticalAlignment="Top">Top Button</Button>         <Button MinHeight="60">Tall Button 2</Button>         <Button VerticalAlignment="Bottom">Bottom Button</Button>         <Button>Stretch Button</Button>         <Button VerticalAlignment="Center">Centered Button</Button> </WrapPanel>

图3-9显示了按钮是如何变化以适应WrapPanel的现有尺寸的（由包含它们的窗口决定）。如本例展示的，水平模式的WrapPanel创建了一系列虚构行，每行的高度由所包含的最高元素决定。其它控件可能被拉伸以适应窗口，或者根据VerticalAlignment属性进行排列。在图3-9左边的示例中，所有按钮被放进高的一行并且拉伸或排列以适应它。在右边的示例中，一些按钮被挤到了第二行。因为第二行并不包含一个不正常的高按钮，所以行高为按钮的最小高度。因此，在本行中不管按钮使用何种VerticalAlignment设置都是没有关系的。

图3-9：Wrapped按钮

■ Note WrapPanel是惟一一个不能被Grid复制效果的面板。

DockPanel

DockPanel是更有趣的一种布局选项。它针对控件的某个外边缘进行拖拽。对此最简单的设想方法是，想一下许多Windows应用程序顶端的工具栏。这些工具栏停靠在窗口顶端。和StackPanel一样，停靠元素可以选择布局方向。比如说，如果你将一个按钮停靠在DockPanel顶端，它会被拖拽到填满整个DockPanel宽度但只提供所需高度（基于内容和MinHeight属性）。另一方面，如果将按钮停靠在容器左边，它的高度会伸展成完全适应容器的高度，但是它的宽度是可以随需要自由增长的。
这里最明显的问题是：子元素如何选择他们想要停靠的边？答案是通过附加属性Dock决定，可选择的值有Left，Right，Top或Bottom。DockPanel内部的每个元素都自动拥有这一属性。
下面是将按钮分别放置在DockPanel每条边的示例：

    <DockPanel LastChildFill="True">        <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 Content="Remaining Space"></Button></DockPanel>

这个例子也将LastChildFill属性设置为了true，这会通知DockPanel将剩余空间全部留给最后一个元素。图3-10展示了效果：

图3-10：停靠到每条边

显然，当停靠控件时，顺序是很重要的。本例中，顶端和底部按钮获得了DockPanel的完整边缘，因为它们是最先停靠的。当左侧和右侧按钮紧接着被布置时，它们在上下两个按钮之间适应位置。如果你颠倒了顺序，左右两个按钮将会获得完整边缘，上下两个按钮会变窄，因为它们会被停靠在左右两个按钮之间。
你可以在同一边停靠多个元素。这种情况下，元素会简单的按在标记中声明的顺序以堆栈方式停靠在边缘。并且，如果你不喜欢空白或拖拽行为，可以增加Margin，HorizontalAlignment和VerticalAlignment属性，像你在StackPanel中做的那样。下面是上述示例修改后的版本，调整了对齐方式：

 <DockPanel LastChildFill="True">        <Button DockPanel.Dock="Top">A Stretched Top Button</Button>        <Button DockPanel.Dock="Top" HorizontalAlignment="Center" >A Centered Top Button</Button>        <Button DockPanel.Dock="Top" HorizontalAlignment="Left" >A Left-Aligned 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>

停靠行为是一样的。首先，顶部按钮停靠，之后底部按钮停靠，最后划分边缘按钮之间的剩余空间，在中间放置最后的按钮。图3-11显示了结果窗口：

图3-11：在顶端停靠多个元素

布局容器嵌套

StackPanel、WrapPanel和DockPanel极少只使用自己。相反，它们被用于对界面进行形状划分。例如，你可以在窗口的适当区域，使用DockPanel来放置不同的StackPanel和WrapPanel容器。
例如，你想创建一个标准的对话框，在右下角含有OK和Cancel按钮，还有一个占据了窗口剩余空间的大面积内容区域。在WPF中有好多方式可以对此界面建立模型，但最简单的、使用你至今为止见过的面板实现的方法是下面这种：

1. 创建水平的StackPanel，容纳OK和Cancel按钮。
2. 将StackPanel放在DockPanel中，并将其停靠在窗口的底端。
3. 将DockPanel.LastChildFill设置为true，这样你就可以使用窗口的剩余空间来放置其它内容。这里你可以添加另一个布局控件，或只是一个简单的TextBox控件（如本例所示）。
4. 设置边距属性，为空白空间提供合适量。

<DockPanel LastChildFill="True"><StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Right"Orientation="Horizontal"><Button Margin="10,10,2,10" Padding="3">OK</Button><Button Margin="2,10,10,10" Padding="3">Cancel</Button></StackPanel><TextBlock DockPanel.Dock="Top" Margin="10">This is a test.</TextBlock></DockPanel>

在本例中，Padding属性在按钮边缘和内容（单词OK和Cancel）之间添加了一些最小空间。图3-12显示了创建的相对呆板的对话框。

图3-12：基础的对话框

初看时，好像它只是使用坐标将控件放在了精确的位置。并且在许多情况下，也确实是这样。但是，在将来，较长的设置时间可以由修改用户界面时的轻松补偿。例如，如果你想将OK和Cancel按钮放在窗口底部的中间位置，只需要修改包含它们的StackPanel的对齐方式：

<StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" …>

与旧式的用户界面框架（如Windows Forms）相比，这里使用的标记更清晰、简洁，并且更加紧凑。如果你为这个窗口添加少许样式（第11章），你可以更好的对其进行改善，并且移除其它外部细节（如边距设置）来创建一个真正合适的用户界面。

■ Tip 如果元素的嵌套树很密集，就很容易对整体结构失去掌控。VS提供了一种便利功能，可以为元素显示树视图，并且允许你按照自己的方式查看元素（或者修改）。文档大纲窗口可以提供这一功能，通过选择菜单中的 视图→其他窗口→文档大纲 可以查看。