演练:在 WPF 设计器中编辑 XAML

更新:2007 年 11 月

Visual Studio Windows Presentation Foundation (WPF) 设计器提供了一个 XAML 编辑器,该编辑器具有许多与 Visual Studio 的其他语言编辑器相同的功能。本主题演示如何使用 IntelliSense 和大纲显示等功能。

在本演练中,您将执行下列任务:

  • 创建一个 WPF 项目。

  • 创建资源。

  • 查看语法突出显示。

  • 使用标记导航。

  • 使用大纲显示。

  • 使用 IntelliSense。

  • 使用括号匹配。

  • 使用自动套用格式。

说明:

显示的对话框和菜单命令可能会与“帮助”中的描述不同,具体取决于您的当前设置或版本。若要更改设置,请在“工具”菜单上选择“导入和导出设置”。有关更多信息,请参见 Visual Studio 设置

先决条件

您需要以下组件来完成本演练:

  • Visual Studio 2008.

创建项目

第一步是为宿主应用程序创建项目。

创建项目

创建资源

您通常会使用 WPF 应用程序中的资源。WPF 设计器在“文档大纲”窗口中提供资源节的可折叠大纲显示以及对资源节的导航。

创建资源

  1. 在 WPF 设计器中打开 Window1.xaml。

  2. 在 XAML 视图中,在 Window1 的开始标记后面插入以下 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 文档的元素层次结构

使用标记导航器

  1. 在 XAML 视图中单击 <Grid> 元素的开始标记。

  2. 在 WPF 设计器的底部,找到标记导航器。该导航器显示“Grid (grid1) Window/Grid”。

  3. 在标记导航器中将鼠标指针移至“Window”元素上。

    将显示 Window1 的呈现的缩略图。

  4. 在标记导航器中单击“Window”超链接。

    XAML 视图中将突出显示 Window1 的开始标记。

  5. 在 XAML 视图中单击 <Window.Resources> 标记。

    标记导航器将展开 XAML 树层次结构,直至显示出 <Window.Resources> 元素。

  6. 在标记导航器中单击“资源”左侧的“下一选择”箭头。

    <LinearGradientBrush> 元素在 XAML 视图中处于选中状态。

大纲显示

WPF 设计器完全支持可折叠大纲显示。

使用大纲显示

  1. 在 XAML 视图中滚动到 <Window.Resources> 元素。

  2. 单击开始标记左侧的折叠按钮。

    <Window.Resources> 元素折叠到一行上。

  3. 单击开始标记左侧的展开按钮。

    <Window.Resources> 元素展开至其初始状态。

IntelliSense

WPF 设计器完全支持 IntelliSense。

使用 IntelliSense

  1. 在 grid1 元素中键入 <Gr。

    将显示 IntelliSense 列表,并且 Grid 类处于选中状态。

  2. 按 Tab 完成开始标记。

  3. 键入 .c。(一定要包括句点。)

    将显示 IntelliSense 列表,并且 Children 属性处于选中状态。

  4. 使用下箭头键滚动到 ColumnDefinitions 属性。

  5. 按 Tab 完成标记。

    有关将 Intellisense 用于自定义类型的更多信息,请参见如何:将命名空间导入 XAML

括号匹配

可以通过使用括号匹配功能在元素内部进行导航。

使用括号匹配

  1. 在 XAML 视图中,在 <LinearGradientBrush> 开始标记内单击。

  2. 按 Ctrl+]。

    光标将移至开始标记的末尾。

  3. 再次按 Ctrl+]。

    光标将移至结束标记的开头。

  4. 从 <LinearGradientBrush> 元素的结束标记中删除右尖括号“>”。键入“>”完成结束标记。

    XAML 视图将突出显示开始标记和结束标记。

自动套用格式

可以通过按 Ctrl+KD 设置 XAML 的格式,还可以指定自动套用格式设置。有关更多信息,请参见 如何:更改 XAML 视图设置

使用自动套用格式

  1. 在 XAML 视图中选择四个 <GradientStop> 元素。

  2. 按 Shift+Tab。

    四个元素声明移到左侧。

  3. 按 Ctrl+KD。

    四个元素声明缩进。您可能注意到对 XAML 的其他更改。

  4. 在第一个 <GradientStop> 标记中,在 Color 属性前面的空格中单击。按 Enter 键开始一个新行。

  5. 在 Offset 属性前面的空格中单击,按 Enter 键开始一个新行。

  6. 按 Ctrl+KD。

    这些属性仍然位于新行中。

  7. 在 Color 属性前面插入四个空格,然后按 Ctrl+KD。

    Color 属性的位置未改变。

请参见

任务

如何:将命名空间导入 XAML

如何:更改 XAML 视图设置

概念

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

其他资源

WPF 设计器

XAML 和代码演练