Walkthrough: Editing XAML in the WPF Designer
The 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.
View syntax highlighting.
Use tag navigation.
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 Working with Settings.
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.
MainWindow.xaml opens in the WPF Designer.
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 MainWindow.xaml in the WPF Designer.
In XAML view, insert the following XAML after the opening tag for MainWindow.
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>
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 markup.
The element, property, and property value each have a unique color.
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 MainWindow appears.
In the tag navigator, click the Window hyperlink.
The opening tag for MainWindow 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 Select Child arrow to the right of Resources.
The child element appears in a popup.
Click LinearGradientBrush (backgroundBrush1).
The <LinearGradientBrush> element is selected in XAML view.
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.
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 first property that starts with the letter C 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.
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.
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.
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.
The four element declarations move to the left.
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.
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.