WPF and Silverlight Designer 概述

[本文档仅供预览,在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

WPF and Silverlight Designer 提供用于创建 WPF 和 Silverlight 应用程序的可视化设计支持。 您可以从**“工具箱”中拖动控件,然后在“属性”**窗口中设置属性,以此为应用程序生成用户界面。 您还可以直接在 XAML 编辑器中编辑 XAML。 下图显示了 WPF and Silverlight Designer 以及它的一些支持窗口。

WPF 设计器概述

在首次启动 WPF and Silverlight Designer 时,Visual Studio 左侧的“数据源”窗口和“文档大纲”窗口处于折叠状态。 如果您显示左侧的选项卡并固定在这些选项卡上,则将看到上一个视图(在使用设计图面时这是一个有用的排列)。

本主题包含以下各节:

  • 设计视图

  • XAML 视图

  • “属性”窗口

  • “数据源”窗口

  • “文档大纲”窗口

  • 生成丰富的交互式用户界面

  • 使用 Expression Blend 进行协作

设计视图

设计视图提供用于生成 WPF 和 Silverlight 控件及应用程序的可视化设计图面。 它显示了 XAML 当前在 XAML 视图中的呈现形式。 当您在设计图面上更改控件时,XAML 视图会相应地更新以反映更改。 设计视图提供了许多用于在 WPF 应用程序的窗口或页面上排列控件的功能。 下图显示了部分设计视图功能。

WPF 设计器中的设计视图功能

缩放

使用缩放控件可以调整设计图面的大小。 可以从**“10%”放大到“20x”**。 您的缩放设置保存在解决方案的 .suo 文件中。

平移

在放大设计图面时,会出现水平或垂直滚动条,您可以通过平移来查看屏幕外的设计图面部分。 在按住空格键的同时拖动设计图面可进行平移。

按视图调整大小

使用“按视图调整大小”按钮可以根据设计视图中的可用屏幕调整设计图面的大小。 如果放大或缩小的幅度非常大,那么此功能很有用。

网格轨道

使用网格轨道可以管理 Grid 控件中的行和列。 您可以创建和删除列和行,并且可以调整它们的相对宽度和高度。 有关更多信息,请参见如何:向网格中添加行和列

网格线

使用网格线可以控制 Grid 的列和行的宽度和高度。 您可以通过单击 Grid 上面和左边的轨道来添加新的列或行。 有关更多信息,请参见如何:向网格中添加行和列

网格线指示符

网格线指示符显示为网格轨道中的三角形。 当您拖动网格线指示符或网格线本身时,相邻列或行的宽度或高度将随着鼠标的移动而更新。 有关更多信息,请参见如何:向网格中添加行和列

移动句柄

移动句柄显示在所选面板控件的左上方,可用于移动面板。 单击移动句柄并将控件拖到设计图面上相应的位置。 有关更多信息,请参见如何:在设计图面上选择和移动元素

大小调整句柄

大小调整句柄显示在所选控件上,可用于调整所选控件的大小。 调整控件大小时,通常会显示宽度和高度值以帮助准确地设置控件的大小。

边距线

边距表示控件边缘与容器边缘之间的固定空间的大小。 通过单击边距线来设置控件的边距。 有关更多信息,请参见如何:在 WPF 设计器中设置控件的边距

边距短线

当选定控件的边距设置为 0 时,就会在该控件上显示一条边距短线。 单击边距短线可设置边距与容器的相应边缘的距离。 有关更多信息,请参见如何:在 WPF 设计器中设置控件的边距

对齐线

使用对齐线可使控件彼此对齐。 如果启用对齐线,则当您相对于其他控件拖动某个控件时,在某些控件的边缘和文本水平或垂直对齐时,会出现对齐线。 有关更多信息,请参见如何:对齐文本基线和边距

信息栏

信息栏出现在“设计”视图的顶部,显示有关“设计”视图中呈现问题的信息。 在某些情况下,可以单击信息栏来获取有关所出现问题的其他信息。 下图显示了信息栏的展开视图。

信息栏详细信息

大小调整条

在具有两行(或列)或更多行(或列)的 Grid 控件的网格轨道上移动鼠标指针时,大小调整条显示在轨道的外部。 使用大小调整条可以为 Grid 行和列设置固定、星号和自动大小调整选项。 有关更多信息,请参见如何:在网格控件中调整行和列的大小

根大小调整标记

在“设计”视图中选择某个窗口时,根大小调整标记显示在该窗口的右下方。 使用根大小调整标记可以在自动和固定之间切换窗口的根大小。 有关更多信息,请参见设计时特性

XAML 视图

可扩展应用程序标记语言 (XAML) 提供一个基于 XML 的声明性词汇表,用于指定应用程序的用户界面。 WPF and Silverlight Designer 提供应用程序的所呈现 XAML 标记的 XAML 视图和同步的设计视图。 XAML 视图包含 IntelliSense、自动格式设置、语法突出显示和标记导航。 下图显示了部分 XAML 功能。

WPF 设计器中的 XAML 视图功能

拆分视图栏

使用拆分视图栏可以控制设计视图和 XAML 视图的相对大小。 您还可以交换视图,指定拆分视图是水平放置还是垂直放置,并折叠其中一个视图。 有关更多信息,请参见拆分视图:同时查看 WPF 设计图面和 XAML

标记扩展 IntelliSense

除了标准语言的 IntelliSense 外,XAML 视图还支持标记扩展 IntelliSense。 当您在 XAML 视图中键入左中括号 ({) 时,IntelliSense 会显示可用的标记扩展。 当您从列表中选取某个标记扩展时,IntelliSense 会显示该扩展的可用特性。 有关更多信息,请参见演练:在 WPF 设计器中编辑 XAML

标记导航器

标记导航器显示在 XAML 视图的下方,可用于移动到 XAML 视图中当前所选标记的任何父标记。 在标记导航器中的标记上移动鼠标指针时,会显示该元素的缩略图预览。 演练:在 WPF 设计器中编辑 XAML.

缩放

使用缩放控件可以调整 XAML 视图的大小。 可以从**“20%”放大到“400%”**。

“属性”窗口

使用“属性”窗口可以在设计视图中为控件设置属性值。 下图显示了“属性”窗口的一个示例。

“属性”窗口

“属性”窗口的顶部有多个选项。 若要更改当前所选控件的名称,请将光标放在“名称”框中并在其中键入名称。 右上角显示当前所选控件的缩略图预览。 若要按类别或字母顺序列出属性,请单击**“分类显示”按钮或“按字母顺序显示”按钮。 若要按源对属性进行排序,请单击“按属性源排序”按钮。 若要查看控件的事件列表,请单击“事件”按钮。 若要搜索属性,请开始在“搜索”**框中键入属性的名称。 当您键入时,“属性”窗口将显示与您的搜索匹配的属性。

属性名称右侧的第一列是**“属性标记”**。 属性标记指示是向该属性应用了数据绑定还是资源。 在单击属性标记时,可以打开数据绑定生成器或资源选取器,也可以导航到资源定义。 下面的插图显示了在您单击样式的属性标记时可用的选项。

数据绑定生成器

使用数据绑定生成器可以在不键入任何 XAML 的情况下创建数据绑定。 可以创建与资源、数据上下文和元素属性的绑定。 还可以应用值转换器。 有关更多信息,请参见演练:使用 WPF 设计器创建数据绑定演练:在设计器中使用 DesignInstance 绑定到数据

数据绑定生成器

边距编辑器

可以使用边距编辑器查看每个边距设置并了解该设置如何影响控件的位置。 您还可以使用边距编辑器更改某个控件的边距或编辑若干个控件的边距。 有关更多信息,请参见如何:在 WPF 设计器中设置控件的边距

资源选取器

使用资源选取器,可以在“属性”窗口中查找属性并为其分配资源。 还可以将硬编码值提取到资源,以便于重复使用。 有关更多信息,请参见使用资源

资源选取器

画笔编辑器

使用画笔编辑器,可以在“属性”窗口中创建许多不同类型的画笔。 有关更多信息,请参见如何:使用画笔编辑器创建画笔

画笔编辑器

“数据源”窗口

可以通过使用“数据源”窗口将数据快速集成到 WPF 应用程序中。 在建立数据连接之后,可以将数据表拖到设计图面上,此时会自动生成业务逻辑和数据绑定。 可以绑定到对象、ADO.NET 数据集、实体数据模型或服务。 有关更多信息,请参见在 Visual Studio 中将 WPF 控件绑定到数据

“数据源”窗口

“文档大纲”窗口

“文档大纲”窗口提供 XAML 文档的分层视图。 可以使用“文档大纲”窗口预览、选择或删除 XAML 元素。 下图显示了“属性”窗口的一个示例。

“文档大纲”窗口

有关更多信息,请参见浏览 WPF 文档的元素层次结构

生成丰富的交互式用户界面

在 WPF 中,WindowPage 类是可视化图面,您可以在上面向用户显示信息。 通常情况下,通过向 Window 添加控件并开发对用户操作(如单击鼠标或按下按键)的响应,来生成 WPF 应用程序。 “控件”是一个独立的用户界面 (UI) 元素,用于显示数据或接受数据输入。

当用户对 Window 或其中的某个控件执行操作时,会生成事件。 应用程序对这些事件进行响应,并在事件发生时对它们进行处理。 有关更多信息,请参见如何:创建简单的事件处理程序

WPF 包含可添加到窗口中的各种控件:用于显示文本框、按钮、下拉列表、单选按钮甚至网页的控件。 有关可在窗口中使用的所有控件的列表,请参见控件库。 如果现有控件不满足需要,WPF 还支持使用 UserControlControl 类创建您自己的自定义控件。

使用拖放式 WPF and Silverlight Designer,您可以轻松地创建 WPF 应用程序。 只需使用鼠标指针选择控件并将它们添加到窗口中的相应位置即可。 该设计器提供诸如对齐线和连续缩放等工具,使控件的摆放变得很容易。

最后,如果您不得不创建自己的自定义用户界面元素,则可使用 System.Windows.MediaSystem.Windows.Shapes 命名空间,其中包含大量的类,可供您选择用于直接在窗口中呈现线条、圆以及其他形状。

帮助创建窗口和控件

有关如何使用这些功能的详细步骤信息,请参见下列帮助主题。

说明

帮助主题

使用 Visual Studio 创建新的 WPF 应用程序。

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

在窗口中使用控件。

如何:在设计图面上选择和移动元素

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

如何:创建简单的事件处理程序

处理来自窗口及窗口控件的事件。

如何:使用附加事件

导航 WPF 或 Silverlight 布局。

浏览 WPF 文档的元素层次结构

创建动态布局。

WPF 设计器中的布局

创建自定义 WPF 控件。

如何:创建 WPF UserControl 库项目

创建数据绑定。

WPF 设计器中的数据绑定

使用 Expression Blend 进行协作

WPF 提供了内容与演示的有效分离,使得软件开发人员和图形设计人员可以就应用程序的外观和行为进行协作。 WPF and Silverlight Designer 针对软件开发人员进行了优化,Expression Blend 针对图形设计人员进行了优化。 有关更多信息,请参见与 Expression Blend 的协作

请参见

概念

面向 Windows 窗体开发人员的 WPF 设计器

与 Expression Blend 的协作

其他资源

WPF 设计器

控件库

WPF 中的 XAML