Walkthrough: Editing XAML in the WPF Designer

Article
11/16/2012

The Windows Presentation Foundation (WPF) Designer for Visual Studio provides a XAML editor with many of the same features that you find in Visual Studio's other language editors. This topic shows you how to use features such as IntelliSense and outlining.

In this walkthrough, you perform the following tasks:

Create a WPF project.
Create resources.
View syntax highlighting.
Use tag navigation.
Use outlining.
Use IntelliSense.
Use brace-matching.
Use auto-formatting.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Visual Studio Settings.

Prerequisites

You need the following components to complete this walkthrough:

Visual Studio 2008.

Creating the Project

The first step is to create the project for the host application.

To create the project

Create a new WPF Application project in Visual Basic or Visual C# named XamlEditing. For more information, see How to: Create a New WPF Application Project.

Window1.xaml opens in the WPF Designer.

Creating Resources

You will often use resources in your WPF applications. The WPF Designer provides collapsible outlining for resource sections and navigation to resource sections in the Document Outline window.

To create resources

Open Window1.xaml in the WPF Designer.

In XAML view, insert the following XAML after the opening tag for Window1.

This XAML creates a linear gradient brush that has a spectrum of colors.

<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>

Syntax Highlighting

The WPF Designer makes your XAML code easier to read by coloring your text according to its syntax.

To view syntax highlighting

In XAML view, replace the default <Grid> element with the following text.
```
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>
```
The element, property, and property value each have a unique color. In addition, the markup extension is bound to the Background property. Also, the grid background in Design view updates.

You can change the color of XAML elements and attributes. For more information, see How to: Change XAML View Settings.

You can move from tag to tag by using the tag navigator. You can also navigate by using Document Outline view. For more information, see Navigating the Element Hierarchy of a WPF Document.

To use the tag navigator

In XAML view, click the opening tag for the <Grid> element.
At the bottom of the WPF Designer, locate the tag navigator. It displays Grid (grid1) Window/Grid.
In the tag navigator, move the mouse pointer over the Window element.

A rendered thumbnail of Window1 appears.
In the tag navigator, click the Window hyperlink.

The opening tag for Window1 is highlighted in the XAML view.
In XAML view, click the <Window.Resources> tag.

The tag navigator displays the XAML tree hierarchy to the <Window.Resources> element.
In the tag navigator, click the Next Selection arrow to the left of Resources.

The <LinearGradientBrush> element is selected in XAML view.

Outlining

The WPF Designer fully supports collapsible outlining.

To use outlining

In XAML view, scroll to the <Window.Resources> element.
To the left of the opening tag, click the collapse button.

The <Window.Resources> element collapses to a single line.
To the left of the opening tag, click the expand button.

The <Window.Resources> element expands to its original state.

IntelliSense

The WPF Designer fully supports IntelliSense.

To use IntelliSense

In the grid1 element, type <Gr .

The IntelliSense list appears, with the Grid class selected.
Press TAB to complete the opening tag.
Type .c. (Be sure to include the period.)

The IntelliSense list appears, with the Children property selected.
Use the DOWN ARROW key to scroll to the ColumnDefinitions property.
Press TAB to complete the tag.

For more information on using Intellisense for custom types, see How to: Import a Namespace into XAML.

Brace-matching

You can navigate within an element by using the brace-matching feature.

To use brace matching

In XAML view, click in the <LinearGradientBrush> opening tag.
Press CTRL+].

The cursor moves to the end of the opening tag.
Press CTRL+] again.

The cursor moves to the beginning of the closing tag.
Delete the ending angle bracket '>' from the <LinearGradientBrush> element's closing tag. Type '>' to complete the closing tag.

XAML view highlights the opening and closing tags.

Auto-Format

You can format your XAML by pressing CTRL+KD, and you can specify auto-formatting settings. For more information, see How to: Change XAML View Settings.

To use auto-format

In XAML view, select the four <GradientStop> elements.
Press SHIFT+TAB.

The four element declarations move to the left.
Press CTRL+KD.

The four element declarations are indented. You may notice other changes to your XAML.
In the first <GradientStop> tag, click in the space before the Color attribute. Press the ENTER key to start a new line.
Click in the space before the Offset attribute, and press the ENTER key to start a new line.
Press CTRL+KD.

The attributes remain in the new lines.
Insert four spaces before the Color attribute, and press CTRL+KD.

The Color attribute does not change position.