演练：构造动态布局

[本文档仅供预览，在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

在动态定位中，通过指定应如何封送它们，以及如何将子元素排列应包装相对于其父级。 ，在其内容扩展时，还可以将窗口和控件自动扩展。 有关更多信息，请参见 使用绝对定位和动态定位进行布局。

适用于 Visual Studio 的 WPF 设计器 提供了许多支持动态定位的 Panel 控件。 panel 控件可以通过将一个面板控件将作为另一个的子级。 可以在应用程序中使用下列 panel 控件动态定位元素:

• Grid

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

重要

只要有可能，使用动态布局。更可取。动态布局是最灵活的，适应内容更改例如本地化，并允许最终用户最大限度地控制他们的环境。若要查看绝对布局的示例，请参见 演练：根据绝对定位构造布局。

在本演练中，您将执行下列任务:

• 创建一个 WPF 应用程序。

• 配置默认 Grid panel 控件。

• 向面板中添加控件。

• 测试布局。

下图显示应用程序将如何显示。

备注

您看到的对话框和菜单命令可能会与 " 帮助 " 中的描述不同具体取决于您现用的设置或版本。若要更改设置，请选择在 工具 菜单的 导入和导出设置 。有关更多信息，请参见 Visual Studio 设置。

系统必备

您需要以下组件来完成本演练:

• Visual Studio 2012 RC

创建项目

第一个过程是为该应用程序创建项目。

创建项目

1. 创建新的 WPF 名为 DynamicLayout的应用程序项目在 Visual Basic 或 Visual C#。 有关更多信息，请参见 如何：创建新的 WPF 应用程序项目。

   备注

   不将编写在本演练中的任何代码。为项目选择的语言是用于代码隐藏页面的应用程序的语言。

   在 MainWindow.xaml WPF Designer打开。

2. 在设计视图中，选择窗口。 有关更多信息，请参见 如何：在设计图面上选择和移动元素。

3. 在 属性 窗口中，将 Window的下列属性:

   属性	value
   宽度	400
   高度	200
   SizeToContent	WidthAndHeight

   提示

   还可以使用大小调整控点在 " 设计 " 视图的窗口。

4. 在 文件 菜单上，单击 全部保存。

配置默认的 grid panel 控件

默认情况下，新的 WPF 应用程序包含与 Grid 面板的 Window 。 在此过程中添加四行四列到网格中。 您将每一列的宽度 *，因此，该可用的宽度在四列之间均分。 将三行高度设置为 auto，因此，它们调整大小以适合其内容。 将高度其中一行 *，因此，它使用剩余的可用高度。

添加 panel 控件

1. 在 " 设计 " 视图中，选择该网格。

2. (可选) 在 属性 窗口中，找到 ShowGridLines 属性并选中复选框。

   当应用程序运行时，网格线将显示在窗口上。 对于调试很有用，但是，您应该清除成品代码 ShowGridLines 属性的复选框。

3. 在 属性 窗口中，找到 ColumnDefinitions 属性，并单击 " 属性值 " 列中的省略号按钮。

   集合编辑器 出现对话框。

   1. 单击 add 四次添加四列。

   2. 将第一行的 width 属性设置为 auto。

   3. 将第二行的 width 属性设置为 *。

   4. 将第三行的 width 属性设置为 auto。

   5. 将第四行的 width 属性设置为 auto。

   6. 单击 确定 结束 集合编辑器 并返回到 WPF Designer。

      现在该网格中有四列，但是，仅有一列显示。 其 width 属性被设置为 auto 的列会暂时隐藏，因为它们没有任何内容。 对于本演练，这样是可以的。 在将来为避免此问题，可以使用星号大小调整，在中工作时，和改成 " auto，则在执行时。

4. 在 属性 窗口中，找到 RowDefinitions 属性，并单击 " 属性值 " 列中的省略号按钮。

   集合编辑器 出现对话框。

   1. 单击 add 四次添加四行。

   2. 将第一行的 height 属性设置为 auto。

   3. 将第二行的 height 属性设置为 auto。

   4. 将第三行的 height 属性设置为 *。

   5. 将第四行的 height 属性设置为 auto。

   6. 单击 确定 结束 集合编辑器 并返回到 WPF Designer。

      现在该网格中有四行，但是，仅有一行显示。 其 height 属性设置为 auto 的行会暂时隐藏，因为它们没有任何内容。 对于本演练，这样是可以的。 在将来为避免此问题，可以使用星号大小调整，在中工作时，和改成 " auto，则在执行时。

5. 在 文件 菜单上，单击 全部保存。

向面板中添加控件

接下来将向面板中添加控件并使用 Grid 的 Column 和 Row 的和附加属性来对它们。

向面板中添加控件

1. 从 工具箱，在 通用 组中，拖动到 Grid上的一个 Label 控件。

2. 在 属性 窗口中，将 Label的下列属性:

   属性	value
   内容	名称:
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	1
   宽度	自动
   高度	23
   HorizontalAlignment	拉伸
   VerticalAlignment	顶
   页边距	20,20,10,10

3. 从 工具箱，在 通用 组中，拖动到 Grid上的一个 Label 控件。

4. 在 属性 窗口中，将 Label的下列属性:

   属性	value
   内容	password:
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	1
   Grid.RowSpan	1
   宽度	自动
   高度	23
   HorizontalAlignment	拉伸
   VerticalAlignment	顶
   页边距	20,10,10,10

5. 从 工具箱，在 通用 组中，拖动到 Grid上的一个 TextBox 控件。

6. 在 属性 窗口中，将 TextBox的下列属性:

   属性	value
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	0
   Grid.RowSpan	1
   宽度	自动
   高度	自动
   HorizontalAlignment	拉伸
   VerticalAlignment	拉伸
   页边距	10,20,20,10

7. 从 工具箱，在 通用 组中，拖动到 Grid上的一个 TextBox 控件。

8. 在 属性 窗口中，将 TextBox的下列属性:

   属性	value
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	1
   Grid.RowSpan	1
   宽度	自动
   高度	自动
   HorizontalAlignment	拉伸
   VerticalAlignment	拉伸
   页边距	10,10,20,10

9. 从 工具箱，在 通用 组中，拖动到 Grid上的一个 Button 控件。

10. 在 属性 窗口中，将 Button的下列属性:

    属性	value
    内容	确定
    Grid.Column	2
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    宽度	75
    高度	23
    HorizontalAlignment	拉伸
    VerticalAlignment	拉伸
    页边距	10,10,6,20

11. 从 工具箱，在 通用 组中，拖动到 Grid上的一个 Button 控件。

12. 在 属性 窗口中，将 Button的下列属性:

    属性	value
    内容	取消
    Grid.Column	3
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    宽度	75
    高度	23
    HorizontalAlignment	拉伸
    VerticalAlignment	拉伸
    页边距	6,10,20,20

13. 在 文件 菜单上，单击 全部保存。

测试布局

最终您运行应用程序并验证该格式动态更改，当用户调整窗口大小，，因此，当控件的内容超出控件的大小扩展。

测试布局

1. 在 调试 菜单上，单击 启动调试。

   应用程序启动，并将出现窗口。

2. 在 " 名称 " 文本框中，随便键入填充文本框。 一旦到达文本框的末尾时，文本框和窗口扩展以容纳键入的文本。

3. 关闭窗口。

4. 在 调试 菜单上，单击 启动调试。

   应用程序启动，并将出现窗口。

5. 垂直和水平方向上调整窗口的大小。

   列均匀扩展以使用可用空间。 加载扩展的列文本框拉伸。 三行保持其高度，因此，第四行扩展以使用可用空间。

6. 关闭窗口。

7. 在设计视图中，选择名称标签。

8. 在 属性 窗口中，将 content 属性更改为 " 请在此处输入您的全名:。

   在 " 设计 " 视图中，标签扩展以容纳文本。

9. 在 调试 菜单上，单击 启动调试。

   应用程序启动，并将出现窗口。 标签控件显示更长的文本。

10. 关闭窗口。

汇总所有内容

下面是完成 MainWindow.xaml 文件:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

后续步骤

您可以尝试了解如何通过替换此演练的 Grid 面板来利用动态布局的不同角色使用下列 panel:

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

请参见

任务

如何：构造动态布局

演练：使用 WPF 设计器创建大小可调的应用程序

概念

WPF 设计器中的对齐方式

格式

WPF and Silverlight Designer 概述

其他资源

布局演练