Demonstra Passo a passo: Editando o XAML no WPF designer

Artigo
08/25/2010

O Windows Presentation Foundation (WPF) Designer for Visual Studio fornece um editor XAML com muitos dos mesmos recursos que você encontrar no Visual Studio de outros editores de idioma.Este tópico mostra como usar recursos como o IntelliSense e estrutura de tópicos.

Nesta explicação passo a passo, você executa as seguintes tarefas:

Crie um projeto.
Crie recursos.
Exibir sintaxe realce.
Use marcas de navegação.
Use a estrutura de tópicos.
Para usar o IntelliSense
Use chaves-correspondência.
Usar formatação automática.

Observação:
As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

Visual Studio 2008.

Criando o projeto

A primeira etapa é criar um projeto para o aplicativo host.

Para criar o projeto

Criar um novo projeto de aplicativo WPF em Visual Basic ou Visual C# chamado XamlEditing .Para obter mais informações, consulte Como: Criar um novo projeto de aplicativo do WPF.

Window1.xaml é aberto no WPF Designer.

Criar recursos

Você geralmente usará os recursos em seus aplicativos WPF.O WPF Designer fornece recolhível a estrutura de tópicos para seções de recurso e de navegação às seções de recurso na caixa Estrutura do Documento Janela.

Crie recursos.

Abra Window1.xaml no WPF Designer.

No modo de exibição XAML, inserir o seguinte XAML após o marca de abertura para Window1.

Este XAML cria um Pincel linear de gradiente que tenha uma gama de cores.

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

A sintaxe realce

O WPF Designer facilita sua código XAML a leitura por colorir o texto de acordo com a sua sintaxe.

Exibir sintaxe realce.

No modo de exibição XAML, substitua o XAML gerado automaticamente <Grid> pelo seguinte XAML.
```
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>
```
O elemento, propriedade e valor da propriedade têm uma cor exclusiva.Além disso, a extensão de marcação está vinculada a Background propriedade. Além disso, o plano de fundo de grade nas atualizações de modo de modo de exibição de Design.

Você pode alterar a cor de XAML elementos e atributos.Para obter mais informações, consulte Como: Alterar configurações de exibição XAML.

Marca de navegação

Você pode mover da marca a marca usando o marca do Navigator.Você também pode navegar usando o modo estrutura do documento.Para obter mais informações, consulte Navegando na Hierarquia do Elemento de um documento WPF.

Para usar o Navigator de marca

No modo de exibição XAML, clique o marca de abertura para o elemento <Grid>.
Na parte inferior do WPF Designer, localizar o marca navigator. Ele exibe Grade (grid1) Janela/grade.
No navegador de marca, mova o ponteiro do mouse sobre o elemento Window.

Uma miniatura processada de Window1 aparece.
No navegador de marca, clique no hiperlink Window.

A marca de abertura do Window1 é realçado no modo de exibição XAML.
No modo de exibição do XAML, clique no elemento <Window.Resources>.

O Navigator de Marca exibe a hierarquia de árvore XAML para o elemento <Window.Resources>.
No navegador de marca, clique na seta próxima seleção à esquerda de Recursos .

O elemento <LinearGradientBrush> é selecionado no modo XAML.

Estrutura de tópicos

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

Para usar a estrutura de tópicos

No modo XAML, role até o elemento <Window.Resources>.
À esquerda do marca de abertura, clique no botão Recolher.

O elemento <Window.Resources> recolhe a uma única linha.
À esquerda do marca de abertura, clique no botão Recolher.

O elemento <Window.Resources> expande para seu estado original.

IntelliSense

O WPF Designer totalmente suporta IntelliSense.

Para usar o IntelliSense

No elemento grid1, digite < GR .

A lista do IntelliSense aparece, com a Grid classe selecionada.
Pressione a tecla TAB para concluir a marca de abertura.
Digite .c .(Certifique incluir o período.)

A lista do IntelliSense aparece, com a Children classe selecionada.
Use a tecla SETA PARA BAIXO para rolar para a propriedade ColumnDefinitions.
Pressione TAB+C para copiar a marca.

Para obter mais informações sobre uso IntelliSense para tipos personalizados, consulte Como: Importar um Namespace em XAML.

Chaves-correspondência

Você pode navegar dentro de um elemento usando o recurso chaves-correspondência.

Para usar chave correspondente

No modo de exibição XAML, clique na <LinearGradientBrush> marca de abertura.
Pressione CTRL

O cursor move para o final da marca de abertura.
Pressione CTRL novamente.

O cursor move para o início do marca de fechamento.
Excluir o colchete angular final ' > ' a partir do elemento <LinearGradientBrush> marca de fechamento.Tipo ' > ' para concluir a marca de fechamento.

XAML modo realça as marcas abertura e fechamento.

Formato automático

Você pode formatar o XAML pressionando CTRL + KD, e você pode especificar configurações de formatação automática.Para obter mais informações, consulte Como: Alterar configurações de exibição XAML.

Para usar formato automática

No modo de exibição XAML, selecione os elementos <GradientStop> quatro.
Pressione SHIFT+TAB.

As elemento quatro declarações mover para a esquerda.
Pressione CTRL + KD.

As elemento quatro declarações são recuadas.Você poderá notar outras alterações para o XAML.
Na primeira marca <GradientStop>, clique no espaço antes o atributo de cor.Pressione a tecla ENTER para iniciar uma nova linha.
Clique no espaço antes o atributo deslocamento e pressione a tecla ENTER para iniciar uma nova linha.
Pressione CTRL + KD.

Os atributos permanecem nas novas linhas.
Insira quatro espaços antes o atributo de cor e pressione CTRL + KD.

O atributo de cor não altera a posição.

Consulte também

Partilhar via