演练:在 WPF 设计器中编辑 XAML
[本文档仅供预览,在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]
适用于 Visual Studio 的 WPF 设计器 提供一个 XAML 编辑器在您在 visual studio 的其他语言编辑器查找的许多相同的功能。 本主题演示如何使用 IntelliSense 和大纲显示等功能。
在本演练中,您将执行下列任务:
创建一个 WPF 项目。
创建资源。
查看语法突出显示。
使用标记导航。
使用大纲显示。
使用 IntelliSense。
使用括号匹配。
使用自动套用格式。
备注
您看到的对话框和菜单命令可能会与 " 帮助 " 中的描述不同具体取决于您现用的设置或版本。若要更改设置,请选择在 工具 菜单的 导入和导出设置 。有关更多信息,请参见 Visual Studio 设置。
系统必备
您需要以下组件来完成本演练:
- Visual Studio 2012 RC.
创建项目
第一步是为宿主应用程序创建项目。
创建项目
创建新的 WPF 名为 XamlEditing的应用程序项目在 Visual Basic 或 Visual C#。 有关更多信息,请参见 如何:创建新的 WPF 应用程序项目。
在 MainWindow.xaml WPF Designer打开。
创建资源
您可以在 WPF 应用程序通常会使用资源。 WPF Designer 提供资源节的可折叠大纲显示和导航至 文档大纲 窗口的资源部分。
创建资源
打开在 WPF Designer的 MainWindow.xaml。
在 XAML 视图中,在的开始标记后面插入以下 XAML MainWindow的。
此 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 Designer 使您的 XAML 代码更易于进行着色您的文本根据其语法。
查看语法突出显示
在 XAML 视图中,用以下标记替换默认 <Grid> 元素。
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}"> </Grid>
元素、属性和属性值分别有不同的颜色。
标记扩展绑定到 Background 属性。 此外,在 " 设计 " 视图中更新的网格背景。
可以更改 XAML 元素和特性的颜色。 有关更多信息,请参见 如何:更改 XAML 视图设置。
标记导航
使用标记导航器,可以从标记移动到标记。 也可以通过使用 " 文档大纲 " 视图。 有关更多信息,请参见 浏览 WPF 文档的元素层次结构。
使用标记导航器
在 XAML 视图中,单击 <Grid> 元素的开始标记。
在 WPF Designer的底部,找到标记导航器。 它显示 网格 (grid1) 窗口/网格。
在标记导航器中,将在 窗口 元素的鼠标指针。
MainWindow 的呈现缩略图显示。
在标记导航器中,单击 窗口 超链接。
MainWindow 的开始标记在 XAML 视图中突出显示。
在 XAML 视图中,单击 <Window.Resources> 标记。
标记导航器显示 XAML 树层次结构。 <Window.Resources> 元素。
在标记导航器中,请在 资源右侧的中选择的子箭头。
子元素将出现在弹出。
单击 LinearGradientBrush (backgroundBrush1)。
<LinearGradientBrush> 元素在 XAML 视图中选择。
概述
WPF Designer 完全支持可折叠大纲显示。
使用大纲显示
在 XAML 视图中,滚动到 <Window.Resources> 元素。
在开始标记左侧,单击折叠按钮。
<Window.Resources> 元素折叠到一行。
在开始标记左侧,单击展开按钮。
<Window.Resources> 元素扩展到其原始状态。
IntelliSense
WPF Designer 完全支持 IntelliSense。
使用 IntelliSense
在元素中,键入 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。
颜色特性的位置未改变。