使用 WPF 创建绘图应用程序

项目
08/18/2008

更新：2007 年 11 月

在本课中，您将学习如何创建可用于绘制图片的 Windows Presentation Foundation (WPF) 应用程序。创建 WPF 应用程序与创建 Windows 窗体应用程序类似。可以将控件从“工具箱”拖放到设计图面上，然后编写代码以处理控件的事件。

链接到视频有关视频演示，请参见 Video How to: Creating a Drawing Application by Using WPF（视频帮助：使用 WPF 创建绘图应用程序）。

试一试！

创建 WPF 应用程序

在“文件”菜单上单击“新建项目”。

将出现“新建项目”对话框。此对话框列出了使用 Visual Basic 速成版所能创建的默认应用程序类型。
选择“WPF 应用程序”作为项目类型。
将应用程序的名称更改为“印台”，然后单击“确定”。

Visual Basic 速成版将为项目创建一个新文件夹。该文件夹的名称与项目标题相同。Visual Basic 速成版还会在“设计”视图中显示新 WPF 窗口，标题为“Window1”。可以通过右击设计图面并单击“查看代码”随时转到代码编辑器。默认情况下，XAML 编辑器显示在设计器之下；可以通过右击设计图面并单击“查看 XAML”来全屏显示 XAML 视图。

设计用户界面

如果没有显示“属性”窗口，请单击“视图”菜单上的“属性窗口”。该窗口列出了当前所选窗体或控件的属性。可以在此窗口中更改现有属性值。
在“属性”窗口中将“Height”属性设置为“550”，将“Width”属性设置为“370”，从而更改该 WPF 窗口的大小。
将该 WPF 窗口的标题属性更改为“印台”。
通过单击下拉框中的“Brown”然后按 Enter，将 WPF 窗口的“Background”属性更改为棕色。

说明：

您也可以通过添加一个“Background”属性并将其值设置为 Brown: Background="Brown" 来直接修改 XAML 标记。
若要打开“工具箱”，请在“视图”菜单上单击“工具箱”。
右击“工具箱”，然后单击“选择项”。

“选择工具箱项”对话框打开。
在“选择工具箱项”对话框的“WPF 组件”选项卡上，向下滚动到“InkCanvas”并将其选中，以使复选框中出现选中标记。
单击“确定”，将 InkCanvas 控件添加到“工具箱”。
将一个 InkCanvas 控件从“工具箱”拖到设计图面上。
在“属性”窗口中设置 InkCanvas 控件的以下属性：

属性

值

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margins

9, 9, 9, 68
通过将 InkCanvas 控件的“Background”属性设置为“LightYellow”，将其颜色更改为黄色。

InkCanvas 控件的背景颜色在运行时将显示为浅黄。
将两个“Button”控件拖到 WPF 窗口中，并将它们置于 InkCanvas 控件之下。将 button1 放在左侧，button2 放在右侧。

说明：
您也可以通过添加一个“Background”属性并将其值设置为 Brown: Background="Brown" 来直接修改 XAML 标记。

属性	值
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margins	9, 9, 9, 68

选择 button1 并在 XAML 视图中更改 XAML 标记，如以下标记所示。此标记将“Text”属性设置为 Clear。

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>

选择 button2 并更改 XAML 标记，如以下标记所示。此标记将“Text”属性设置为 Close。
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
该 WPF 应用程序应与下图所示的“印台”应用程序类似。

WPF 印台应用程序

向按钮的事件处理程序中添加代码

双击“Clear”（清除），然后向生成的 Click 事件处理程序中添加以下代码：
```
    Me.InkCanvas1.Strokes.Clear() 
```
通过右击代码编辑器并单击“设计器”返回到“设计”视图。
双击“Close”（关闭），然后向生成的 Click 事件处理程序中添加以下代码：
```
    Me.Close()
```
按 F5 运行项目。
当该应用程序启动时，将在“InkCanvas”控件中绘制一个图片。如果进行了错误操作，可以单击“Clear”（清除）以重新开始。
单击“Close”（关闭）以退出应用程序。

后续步骤

在本课中，您学习了如何使用 WPF 创建一个绘图应用程序。

在下一部分中，您将学习如何使用 Visual Basic 工具查找并修复程序中的错误（通常称为“Bug”）。

下一课：什么地方出错了？通过调试查找并修复错误

请参见

任务

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

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

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

使用公共 WPF 控件

为 WPF 控件创建事件处理程序

其他资源

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