演练:根据绝对定位构造布局
更新:2007 年 11 月
在绝对定位中,通过指定子元素相对于其父元素的准确位置来排列子元素。例如,通过指定控件相对于面板的左坐标和上坐标可以在面板上排列控件。有关更多信息,请参见使用绝对定位和动态定位进行布局。
Visual Studio Windows Presentation Foundation (WPF) 设计器提供了一个支持绝对定位的 Canvas Panel 控件。您可以使用 Canvas Panel 控件在您的应用程序中以绝对的方式定位元素。
重要说明: |
---|
只要可能,就最好使用动态布局。动态布局是最灵活的,适应诸如本地化之类的内容更改,并且允许最终用户最大限度地控制他们的环境。若要查看动态布局的示例,请参见演练:使用 WPF 设计器创建大小可调的应用程序和演练:构造动态布局。 |
在本演练中,您将执行下列任务:
创建一个 WPF 应用程序。
将 Canvas Panel 控件添加到应用程序中。
将控件添加到面板中。
测试布局。
下面的插图说明您的应用程序将如何显示。
说明: |
---|
显示的对话框和菜单命令可能会与“帮助”中的描述不同,具体取决于您的当前设置或版本。若要更改设置,请在“工具”菜单上选择“导入和导出设置”。有关更多信息,请参见 Visual Studio 设置。 |
先决条件
您需要以下组件来完成本演练:
- Visual Studio 2008
创建项目
第一个过程是为该应用程序创建项目。
创建项目
使用 Visual Basic 或 Visual C# 创建一个名为 AbsoluteLayout 的新 WPF 应用程序项目。有关更多信息,请参见如何:创建新的 WPF 应用程序项目。
说明: 在本演练中,您将不会编写任何代码。为项目选择的语言是用于应用程序中代码隐藏页面的语言。
Window1.xaml 在 WPF 设计器中打开。
在“设计”视图中,选择该窗口。有关更多信息,请参见如何:在设计图面上选择和移动元素。
在“属性”窗口中,设置 Window 的下列属性:
属性
值
Width
400
Height
200
提示: 还可以使用大小调整控点在“设计”视图中调整该窗口的大小。
(可选)若要锁定窗口的大小,请使用下列方法之一:
在“文件”菜单上单击“全部保存”。
添加 Panel 控件
默认情况下,新的 WPF 应用程序包含一个带有 Grid 面板的 Window。若要根据绝对定位创建布局,您必须使用 Canvas 面板。在此过程中,您将移除默认的 Grid 并添加一个 Canvas。
添加 Panel 控件
在“设计”视图中,选择该网格。
按 Delete 键删除 Grid。
在“属性”窗口中,将 Canvas 的 Height 属性设置为 Auto。
在“属性”窗口中,将 Canvas 的 Width 属性设置为 Auto。
在“文件”菜单上单击“全部保存”。
向面板中添加控件
接下来,您可以向面板中添加控件并使用 Canvas 的 Left 和 Top 附加属性来对它们进行绝对定位。
向面板中添加控件
在“属性”窗口中,设置 Label 的下列属性:
属性
值
Content
Name:
Canvas.Left
20
Canvas.Top
20
Width
120
Height
23
在“属性”窗口中,设置 Label 的下列属性:
属性
值
Content
Password:
Canvas.Left
20
Canvas.Top
60
Width
120
Height
23
在“属性”窗口中,设置 TextBox 的下列属性:
属性
值
Canvas.Left
160
Canvas.Top
20
Width
200
Height
23
在“属性”窗口中,设置 TextBox 的下列属性:
属性
值
Canvas.Left
160
Canvas.Top
60
Width
200
Height
23
在“属性”窗口中,设置 Button 的下列属性:
属性
值
Content
OK
Canvas.Left
196
Canvas.Top
120
Width
75
Height
23
在“属性”窗口中,设置 Button 的下列属性:
属性
值
Content
Cancel
Canvas.Left
283
Canvas.Top
120
Width
75
Height
23
在“文件”菜单上单击“全部保存”。
测试布局
最后,您运行该应用程序并验证控件是否遵循绝对定位。
测试布局
(可选)如果在上一步中锁定了窗口的大小,您必须取消该窗口的锁定才能执行此过程。在“属性”窗口中,设置 Window 的下列属性:
属性
值
MinWidth
0
MinHeight
0
MaxWidth
Infinity
MaxHeight
Infinity
ResizeMode
CanResize
在“调试”菜单上单击“启动调试”。
该应用程序启动并且该窗口将显示。
调整该窗口的大小。
这些控件遵循绝对定位并且不会更改大小或位置。
关闭该窗口。
汇总所有内容
下面是完成的 Window1.xaml 文件:
<Window x:Class="Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="200" Width="400" ResizeMode="CanResize" Name="Window1" 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>