演练：根据绝对定位构造布局

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

在绝对定位中，通过指定它们的准确位置来排列子元素相对于其父元素。 例如，通过指定控件的左边缘和上边缘坐标在面板上排列控件相对于面板。 有关更多信息，请参见 使用绝对定位和动态定位进行布局。

适用于 Visual Studio 的 WPF 设计器 提供一个支持绝对定位的 Canvas panel 控件。 可以使用 Canvas panel 控件绝对定位元素在您的应用程序。

重要

只要有可能，使用动态布局。更可取。动态布局是最灵活的，适应内容更改例如本地化，并允许最终用户最大限度地控制他们的环境。若要查看动态布局的示例，请参见 演练：使用 WPF 设计器创建大小可调的应用程序 和 演练：构造动态布局。

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

• 创建一个 WPF 应用程序。

• 添加一个 Canvas panel 控件添加到应用程序。

• 向面板中添加控件。

• 测试布局。

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

备注

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

系统必备

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

• Visual Studio 2012 RC

创建项目

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

创建项目

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

   备注

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

   在 MainWindow.xaml WPF Designer打开。

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

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

   属性	value
   宽度	400
   高度	200

   提示

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

4. (可选) 若要锁定窗口的大小，请使用下列方法之一:

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

      属性	value
      ResizeMode	NoResize

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

      属性	value
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

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

添加 panel 控件

默认情况下，新的 WPF 应用程序包含与 Grid 面板的 Window 。 若要创建基于绝对定位的布局，您必须使用 Canvas 面板。 在此过程中您 Grid 并添加 Canvas。

添加 panel 控件

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

2. 按 delete 键来删除 Grid。

3. 从 工具箱，在 控件 组中，拖动到 Window上的一个 Canvas 控件。

4. 在 属性 窗口中，将 Canvas 的 height 属性设置为 auto。

   加载 Window的高度 Canvas 拉伸。

5. 在 属性 窗口中，将 Canvas 的 width 属性设置为 auto。

   加载 Window的宽度 Canvas 拉伸。

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

向面板中添加控件

接下来将向面板中添加控件并使用 Canvas 的 Left 和 Top 附加属性来对它们进行绝对定位。

向面板中添加控件

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

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

   属性	value
   内容	名称:
   Canvas.Left	20
   Canvas.Top	20
   宽度	120
   高度	23

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

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

   属性	value
   内容	password:
   Canvas.Left	20
   Canvas.Top	60
   宽度	120
   高度	23

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

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

   属性	value
   Canvas.Left	160
   Canvas.Top	20
   宽度	200
   高度	23

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

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

   属性	value
   Canvas.Left	160
   Canvas.Top	60
   宽度	200
   高度	23

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

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

    属性	value
    内容	确定
    Canvas.Left	196
    Canvas.Top	120
    宽度	75
    高度	23

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

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

    属性	value
    内容	取消
    Canvas.Left	283
    Canvas.Top	120
    宽度	75
    高度	23

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

测试布局

最后，您运行该应用程序并验证控件是否遵循绝对定位。

测试布局

1. (可选) 在中，如果锁定了窗口的大小上一步中，必须打开它执行此过程。 在 属性 窗口中，将 Window的下列属性:

   属性	value
   MinWidth	0
   MinHeight	0
   MaxWidth	infinity
   MaxHeight	infinity
   ResizeMode	CanResize

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

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

3. 调整窗口的大小。

   控件遵循绝对定位并且不会更改大小或位置。

4. 关闭窗口。

汇总所有内容

下面是完成 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" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

请参见

任务

如何：根据绝对定位构造布局

概念

WPF 设计器中的对齐方式

格式

WPF and Silverlight Designer 概述

其他资源

布局演练