WPF编程宝典 - 03布局

WPF布局

布局原则

• 不应显式设定元素（如控件）的尺寸。元素应当可以改变尺寸以适合它们的内容。可通过设置最大和最小尺寸来限制可以接受的控件尺寸范围
• 不应使用屏幕坐标指定元素的位置。元素应当由它们的容器根据它们的尺寸/顺序以及（可选的）其他特定于具体布局容器的信息进行排列。如果需要在元素之间添加空白空间。可使用Margin
• 布局容器的子元素“共享”可用的空间。如果空间允许，布局容器会根据每个元素的内容尽可能为元素设置更合理的尺寸。它们还会向一个或多个元素分配多余的空间
• 可嵌套的布局容器。布局容器之间可以进行嵌套组合

布局过程

  WPF 布局包括两个阶段:测量(measure)阶段和排列(arrange)阶段。在测量阶段，容器遍历所有子元素，并询问子元素它们所期望的尺寸。在排列阶段，容器在合适的位置放置子元素。

布局容器

  所有WPF布局容器都是派生自System.Windows.Controls.Panel抽象类的面板。

StackPanel

Border

  Border控件不是布局面板，而是非常便于使用的元素，经常与布局面板一起使用。

WrapPanel

  WrapPanel 面板在可能的空间中，以一次一行或一列的方式布置控件。默认情况下WrapPanel.Orientation 属性设置为 Horizontal;控件从左向右进行排列，再在下一行中排列。但可将 WrapPanel.Orientation 属性设置为 Vertical，从而在多个列中放置元素。

DockPanel

  DockPanel面板沿着一条外边缘来拉伸所包含的控件，通过锚点停靠的方式设置子元素的位置

Grid

  Grid面板将元素分隔到不可见的行列网格中。尽管可在一个单元格中放置多个元素（这时这些元素会相互重叠），但在每个单元格中只放置一个元素通常更合理

调整行和列

Grid面板支持以下三种设置尺寸的方式：

• 绝对设置尺寸方式。使用设备无关单位准确地设置尺寸

  1 2	<!-- 设置行高为100 --> <RowDefinition Height="100"/>

• 自动设置尺寸方式。每行或每列的尺寸刚好满足需要

  1 2	<!-- 设置行高自适应高度，由内容撑开 --> <RowDefinition Height="auto"/>

• 按比例设置尺寸方式。按比例将控件分割到一组行和列中

  1 2 3

  <!-- 按比例划分Grid剩下空间，第二行是第一行的2倍高度 --> <RowDefinition Height="*"/> <RowDefinition Height="2*"/>

分割窗口

  每个 Windows用户都见过分割条–能将窗口的一部分与另一部分分离的可拖动分割器例如，当使用 Windows 资源管理器时，会看到一系列文件夹(在左边)和一系列文件(在右边)。可拖动它们之间的分割条来确定每部分占据窗口的比例。

1
2
3
4
5
6
7
8
9
10
11
12
13

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--左侧菜单-->
    <Grid Grid.Column="0"></Grid>
    <!--分割线-->
    <GridSplitter Grid.Column="1" Width="3" ShowsPreview="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
    <!--右侧内容-->
    <Grid Grid.Column="2"></Grid>
</Grid>

共享尺寸组

  共享尺寸组的目标是保持用户界面独立部分的一致性。例如，可能希望改变一列的尺寸以适应其内容，并改变另一列的尺寸使其与前面一列改变后的尺寸相匹配。然而，共享尺寸组的真正优点是使独立的 Grid 控件具有相同的比例。

• 默认情况，尽管每一列都设置了Auto，但是在同一列中都是以最长的一列作为当前列的宽度，不会影响其他列

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <StackPanel> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <Button Grid.Row="0" Grid.Column="0" Content="One"/> <Button Grid.Row="0" Grid.Column="1" Content="Two"/> <Button Grid.Row="1" Grid.Column="0" Content="Three (Which is Longer)"/> <Button Grid.Row="1" Grid.Column="1" Content="Four"/> </Grid> </StackPanel>

  

• 共享尺寸组，开启Grid.IsSharedSizeScope="True"共享尺寸组，为需要共享尺寸的列设置相同的组SharedSizeGroup="Group1"

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <StackPanel> <Grid Grid.IsSharedSizeScope="True"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto" SharedSizeGroup="Group1"/> <ColumnDefinition Width="auto" SharedSizeGroup="Group1"/> </Grid.ColumnDefinitions> <Button Grid.Row="0" Grid.Column="0" Content="One"/> <Button Grid.Row="0" Grid.Column="1" Content="Two"/> <Button Grid.Row="1" Grid.Column="0" Content="Three (Which is Longer)"/> <Button Grid.Row="1" Grid.Column="1" Content="Four"/> </Grid> </StackPanel>

  

UniformGrid

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

Canvas

  Canvas面板允许使用精确的坐标放置元素，如果设计数据驱动的富窗体和标准对话框，这并非好的选择；但如果需要构建其他一些不同的内容（例如，为图形工具创建绘图表面），Canvas面板可能是个有用的工具。Canvas面板还是最轻量级的布局容器。这是因为Canvas面板没有包含任何复杂的布局逻辑，用以改变其子元素的首选尺寸。Canvas面板只是在值定的位置放置其子元素，并且子元素具有所希望的精确尺寸。

InkCanvas

  InkCanvas 元素的主要目的是用于接收手写笔输入。手写笔是一种在平板 PC中使用的类似于钢笔的输入设备，然而，InkCanvas 元素同时也可使用鼠标进行工作，就像使用手写笔一样。因此，用户可使用鼠标在 InkCanvas 元素上绘制线条，或者选择以及操作 InkCanvas 中的元素。

  InkCanyas 元素实际上包含两个子内容集合。一个是为人熟知的 Children 集合，它保存任意元素，就像 Canvas 面板一样。每个子元素可根据 Top、Left、Bottom 和 Right 属性进行定位。另一个是 Strokes 集合，它保存 System.Windows.Ink.Stroke 对象，该对象表示用户在 InkCanvas元素上绘制的图形输入。用户绘制的每条直线或曲线都变成独立的 Stroke对象。得益于这两个集合,可使用 InkCanvas 让用户使用存储在 Strokes集合中的笔画(stroke)为保存在 Children 集合中的内容添加注释。

  根据为InkCanvas.EditingMode属性设置的值，可以采用截然不同的方式使用InkCanvas元素