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