为 WPF 应用程序设计用户界面 (Visual Basic)

项目
08/18/2008

更新：2007 年 11 月

在本课中，您将学习如何创建 WPF 应用程序以及如何向用户界面中添加控件。

设计 Windows Presentation Foundation (WPF) 应用程序与设计 Windows 窗体应用程序类似；您可以向设计图面添加控件。但两者也存在若干差异。前者除了具有设计器、“属性”窗口和“工具箱”外，还有一个包含 XAML 的窗口。“XAML”是可扩展应用程序标记语言的缩写。这是一种用于创建用户界面的标记语言。下图显示了 XAML 编辑器的默认位置。有关更多信息，请参见演练：在 WPF 设计器中编辑 XAML。

XAML 编辑器

XAML 窗口

当您创建传统的 Windows 窗体应用程序时，可以从“工具箱”中将一个控件拖动到 Windows 窗体上，或者，如果愿意，也可以编写代码来创建控件。将控件拖动到窗体上时，会自动为您生成相应代码。与此类似，当您创建 WPF 应用程序时，可以通过编写 XAML 标记来创建控件，也可以将控件拖动到 WPF 窗口中。

XAML 标记组织成以分层格式显示的元素。这些元素用尖括号括起，并且通常有一个开始元素和一个结束元素。例如，您可能有如下所示的简单 Button 元素：<Button></Button>。您一般通过定义属性（如元素的位置、高度和宽度）来描述元素的外观。元素的属性与对象的属性类似，因为它们都是对物理外观或状态的描述。属性出现在开始元素的左括号和右括号之间。它们由以下内容组成：属性的名称、赋值符号 (=) 和括在引号中的属性值。可以指定元素的高度，如下面所示的 Button 元素：<Button Height="23"></Button>。

将 WPF 控件从“工具箱”拖动到设计器时，Visual Basic 速成版会自动生成该控件的 XAML 标记。例如，当您双击某个 System.Windows.Controls.Button 控件以将其添加到 WPF 窗口时，会生成类似如下的 XAML 标记。

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

请注意，Button 元素的 Height 属性设置为 "23"，HorizontalAlignment 元素设置为 "Left"。还有若干其他属性描述该元素。可以通过直接在 XAML 标记中更改值来更改这些属性。（默认情况下，这些属性以红色字体显示。）您还可以使用“属性”窗口更改控件的属性。

试一试

创建 WPF 应用程序

在“文件”菜单上单击“新建项目”。
在“新建项目”对话框的“模板”窗格中，单击“WPF 应用程序”。
在“名称”框中，键入“WPFWindow”，然后单击“确定”。

将创建一个新的 Windows Presentation Foundation 项目。将出现一个名为“Window1”的新窗口。其 XAML 标记显示在 Visual Basic 集成开发环境 (IDE) 的 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="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
单击“Window1”以选定它。
在 XAML 编辑器中，将 Window 元素的 Title 属性从 Window1 更改为 WPF Application。

现在，XAML 标记的外观如下：
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
“Window1”标题栏中的文本将更改为“WPF 应用程序”。

尝试更改窗口的其他属性（如 Width 和 Height），并查看效果。当您准备就绪时，继续下一个操作过程。

向 WPF 窗口中添加控件

在此过程中，您将向应用程序中添加控件。为此，您可以单击“工具箱”（通常位于 Visual Basic IDE 的左侧）中的控件，然后将该控件拖放到 WPF 窗口中。您将设置该控件的某些属性，然后调整 XAML 标记以更改该控件的文本和大小。

向 WPF 窗口中添加控件

从“工具箱”中将一个“TextBox”控件拖动到 WPF 窗口的右上方。
选择“TextBox”控件。
在“属性”窗口中，单击“HorizontalAlignment”属性的第一个箭头（左箭头），如下图所示。

HorizontalAlignment 属性

这会将 TextBox 从 WPF 窗口的右侧移动到左侧。
设置 TextBox 的下列属性。

属性

值

VerticalAlignment

Top

Width

75

Height

26
在 XAML 编辑器中，将 TextBox 元素的 Width 属性更改为 140，将 Margin 元素更改为 30, 56, 0, 0，如下例所示。
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
键入新值后，TextBox 的宽度和位置将随之更改。
将一个“Button”控件添加到 WPF 窗口中 TextBox 的旁边。
将开始和结束 Button 标记之间的文本从 Button 更改为 Submit，如下例所示。
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
输入新值后，按钮上的文本将随之更改。
按 F5 运行程序。将出现一个窗口，其中包含您刚添加的文本框和按钮。请注意，您可以单击该按钮并在文本框中键入内容。您必须为控件添加事件处理程序，然后编写代码以指示当单击按钮时计算机应如何操作。

属性	值
VerticalAlignment	Top
Width	75
Height	26

后续步骤

在本课中，您了解了如何创建 WPF 应用程序并向其中添加控件。您还了解了如何在“属性 (Property)”窗口中设置控件的属性 (Property)，以及如何在 XAML 视图中更改 WPF 窗口和控件的属性 (Attribute)。在下一课中，您将学习“工具箱”中提供的某些其他控件。

下一课：使用公共 WPF 控件。

请参见

任务

如何：创建新的 WPF 应用程序项目

如何：向 WPF 项目中添加新项

其他资源

创建程序的可视外观：Windows Presentation Foundation 简介