Walkthrough: editando XAML no criador de WPF

Artigo
08/01/2011

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:

Crie um projeto WPF.
Create resources.
View syntax highlighting.
Use tag navigation.
Use outlining.
Use IntelliSense.
Use brace-matching.
Use auto-formatting.

Observação
Caixas de diálogo e comandos de menu que você vê podem diferir das descritas na Help dependendo das suas configurações ativas ou edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. For more information, see Trabalhando com configurações.

Pré-requisitos

You need the following components to complete this walkthrough:

Visual Studio 2010.

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 Como: Criar um novo projeto de aplicativo WPF.

MainWindow. XAML é aberto no WPF Designer.

Creating Resources

You will often use resources in your WPF applications. O WPF Designer fornece tópicos recolhíveis para seções de recurso e a navegação para as seções de recurso do Document Outline janela.

To create resources

Abrir MainWindow. XAML na 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>

Syntax Highlighting

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

To view syntax highlighting

No modo de exibição XAML , substituir o padrão <Grid> elemento com a seguinte marcação.
```
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>
```
O elemento, propriedadee valor da propriedade tem uma cor exclusiva.

Aextensão de marcaçãoestá limite a Backgroundpropriedade. Além disso, a grade plano de fundo no modo de exibição de Design atualizações.

Você pode alterar a cor dos atributos e elementos XAML . For more information, see Como: alterar XAML exibir configurações.

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 Navegando na Hierarquia do Elemento de um documento WPF.

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. Ele exibe janela deGrade (grid1) /Grade.
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.

A marca de abertura do MainWindow está realçado no modo de exibição XAML .
In XAML view, click the <Window.Resources> tag.

The tag navigator displays the XAML tree hierarchy to the <Window.Resources> element.
No tag navigator, clique na seta de selecionar filho à direita do Recursos.

O elemento filho aparecerá em uma janela popup.
Clique em LinearGradientBrush (backgroundBrush1).

The <LinearGradientBrush> element is selected in XAML view.

Outlining

O WPF Designer totalmente compatível com a estrutura de tópicos recolhível.

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

A lista de IntelliSense aparece, com a primeira propriedade começa com a letra c selecionada.
Use a chave de seta para baixo para rolar para a ColumnDefinitions propriedade.
Press TAB to complete the tag.

Para obter mais informações sobre o uso de IntelliSense para tipos personalizados, consulte Como: Importar um namespace em 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 Como: alterar XAML exibir configurações.

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.

Consulte também

Compartilhar via