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

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

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

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

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

• 创建一个 WPF 应用程序。

• 将 Canvas Panel 控件添加到应用程序中。

• 将控件添加到面板中。

• 测试布局。

下面的插图说明您的应用程序将如何显示。

提示

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

系统必备

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

• Visual Studio 2010

创建项目

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

创建项目

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

   提示

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

   MainWindow.xaml 将在 WPF 设计器中打开。

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

3. 在**“属性”**窗口中，设置 Window 的下列属性：

   Property	值
   宽度	400
   高度	200

   提示

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

4. （可选）若要锁定窗口的大小，请使用下列方法之一：

   1. 在**“属性”**窗口中，设置 Window 的以下属性：

      属性	值
      ResizeMode	NoResize

   2. 在**“属性”**窗口中，设置 Window 的下列属性：

      Property	值
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

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

添加 Panel 控件

默认情况下，新的 WPF 应用程序包含一个带有 Grid 面板的 Window。 若要根据绝对定位创建布局，您必须使用 Canvas 面板。 在此过程中，您将移除默认的 Grid 并添加一个 Canvas。

添加 Panel 控件

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

2. 按 Delete 键删除 Grid。

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

4. 在**“属性”**窗口中，将 Canvas 的 Height 属性设置为 Auto。

   Canvas 会进行拉伸以填充 Window 的高度。

5. 在**“属性”**窗口中，将 Canvas 的 Width 属性设置为 Auto。

   Canvas 会进行拉伸以填充 Window 的宽度。

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

向面板中添加控件

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

向面板中添加控件

1. 在**“工具箱”的“公用”**组中，将一个 Label 控件拖到 Canvas 上。

2. 在**“属性”**窗口中，设置 Label 的下列属性：

   Property	值
   Content	Name:
   Canvas.Left	20
   Canvas.Top	20
   宽度	120
   高度	23

3. 在**“工具箱”的“公用”**组中，将一个 Label 控件拖到 Canvas 上。

4. 在**“属性”**窗口中，设置 Label 的下列属性：

   Property	值
   Content	Password:
   Canvas.Left	20
   Canvas.Top	60
   宽度	120
   高度	23

5. 在**“工具箱”的“公用”**组中，将一个 TextBox 控件拖到 Canvas 上。

6. 在**“属性”**窗口中，设置 TextBox 的下列属性：

   Property	值
   Canvas.Left	160
   Canvas.Top	20
   宽度	200
   高度	23

7. 在**“工具箱”的“公用”**组中，将一个 TextBox 控件拖到 Canvas 上。

8. 在**“属性”**窗口中，设置 TextBox 的下列属性：

   Property	值
   Canvas.Left	160
   Canvas.Top	60
   宽度	200
   高度	23

9. 在**“工具箱”的“公用”**组中，将一个 Button 控件拖到 Canvas 上。

10. 在**“属性”**窗口中，设置 Button 的下列属性：

    Property	值
    Content	确定
    Canvas.Left	196
    Canvas.Top	120
    宽度	75
    高度	23

11. 在**“工具箱”的“公用”**组中，将一个 Button 控件拖到 Canvas 上。

12. 在**“属性”**窗口中，设置 Button 的下列属性：

    Property	值
    Content	取消
    Canvas.Left	283
    Canvas.Top	120
    宽度	75
    高度	23

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

测试布局

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

测试布局

1. （可选）如果在上一步中锁定了窗口的大小，您必须取消该窗口的锁定才能执行此过程。 在**“属性”**窗口中，设置 Window 的下列属性：

   Property	值
   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 概述

其他资源

布局演练