演练:在 WPF 设计器中编辑 XAML
适用于 Visual Studio 的 WPF 设计器提供了一个 XAML 编辑器,该编辑器具有许多与 Visual Studio 的其他语言编辑器相同的功能。 本主题演示如何使用 IntelliSense 和大纲显示等功能。
在本演练中,您将执行下列任务:
创建一个 WPF 项目。
创建资源。
查看语法突出显示。
使用标记导航。
使用大纲显示。
使用 IntelliSense。
使用括号匹配。
使用自动套用格式。
提示
显示的对话框和菜单命令可能会与“帮助”中的描述不同,具体取决于您现用的设置或版本。 若要更改设置,请在“工具”菜单上选择“导入和导出设置”。 有关更多信息,请参见 使用设置。
系统必备
您需要以下组件来完成本演练:
- Visual Studio 2010.
创建项目
第一步是为宿主应用程序创建项目。
创建项目
使用 Visual Basic 或 Visual C# 创建一个名为 XamlEditing 的新 WPF 应用程序项目。 有关更多信息,请参见如何:创建新的 WPF 应用程序项目。
MainWindow.xaml 将在 WPF 设计器中打开。
创建资源
您通常会使用 WPF 应用程序中的资源。 WPF 设计器在**“文档大纲”**窗口中提供资源节的可折叠大纲显示以及对资源节的导航。
创建资源
在 WPF 设计器中打开 MainWindow.xaml。
在 XAML 视图中,在 MainWindow 的开始标记后面插入以下 XAML。
此 XAML 创建一个具有一系列颜色的线性渐变画笔。
<Window.Resources> <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Window.Resources>
语法突出显示
通过根据文本的语法对文本着色,WPF 设计器使得 XAML 代码更便于阅读。
查看语法突出显示
在 XAML 视图中,将默认的 <Grid> 元素替换为以下标记。
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}"> </Grid>
元素、属性和属性值分别有不同的颜色。
该标记扩展将绑定到 Background 属性。 “设计”视图中的网格背景也会更新。
可以更改 XAML 元素和特性的颜色。 有关更多信息,请参见如何:更改 XAML 视图设置。
标记导航
通过使用标记导航器可以在标记之间移动。 您也可以使用“文档大纲”视图来导航。 有关更多信息,请参见浏览 WPF 文档的元素层次结构。
使用标记导航器
在 XAML 视图中单击 <Grid> 元素的开始标记。
在 WPF 设计器的底部,找到标记导航器。 该导航器显示**“Grid (grid1) Window/Grid”**。
在标记导航器中将鼠标指针移至**“Window”**元素上。
将显示 MainWindow 的呈现的缩略图。
在标记导航器中单击**“Window”**超链接。
XAML 视图中将突出显示 MainWindow 的开始标记。
在 XAML 视图中单击 <Window.Resources> 标记。
标记导航器将展开 XAML 树层次结构,直至显示出 <Window.Resources> 元素。
在标记导航器中,单击**“资源”**右侧的“选择子标记”箭头。
子元素将出现在弹出菜单中。
单击**“LinearGradientBrush (backgroundBrush1)”**。
<LinearGradientBrush> 元素在 XAML 视图中处于选中状态。
大纲显示
WPF 设计器完全支持可折叠大纲显示。
使用大纲显示
在 XAML 视图中滚动到 <Window.Resources> 元素。
单击开始标记左侧的折叠按钮。
<Window.Resources> 元素折叠到一行上。
单击开始标记左侧的展开按钮。
<Window.Resources> 元素展开至其初始状态。
IntelliSense
WPF 设计器完全支持 IntelliSense。
使用 IntelliSense
在 grid1 元素中键入 <Gr。
将显示 IntelliSense 列表,并且 Grid 类处于选中状态。
按 Tab 完成开始标记。
键入 .c。 (一定要包括句点。)
将显示 IntelliSense 列表,以字母 C 开头的第一个属性处于选中状态。
使用下箭头键滚动到 ColumnDefinitions 属性。
按 Tab 完成标记。
有关将 IntelliSense 用于自定义类型的更多信息,请参见如何:将命名空间导入 XAML。
括号匹配
可以通过使用括号匹配功能在元素内部进行导航。
使用括号匹配
在 XAML 视图中,在 <LinearGradientBrush> 开始标记内单击。
按 Ctrl+]。
光标将移至开始标记的末尾。
再次按 Ctrl+]。
光标将移至结束标记的开头。
从 <LinearGradientBrush> 元素的结束标记中删除右尖括号“>”。
键入“>”完成结束标记。
XAML 视图将突出显示开始标记和结束标记。
自动套用格式
可以通过按 Ctrl+KD 设置 XAML 的格式,还可以指定自动套用格式设置。 有关更多信息,请参见如何:更改 XAML 视图设置。
使用自动套用格式
在 XAML 视图中选择四个 <GradientStop> 元素。
按 Shift+Tab。
四个元素声明移到左侧。
按 Ctrl+KD。
四个元素声明缩进。 您可能注意到对 XAML 的其他更改。
在第一个 <GradientStop> 标记中,在 Color 特性前面的空格中单击。
按 Enter 键开始一个新行。
在 Offset 特性前面的空格中单击,按 Enter 键开始一个新行。
按 Ctrl+KD。
这些特性仍然位于新行中。
在 Color 特性前面插入四个空格,然后按 Ctrl+KD。
Color 特性的位置未改变。