Editor de código XAML

O editor de código XAML no IDE do Visual Studio inclui todas as ferramentas necessárias para criar aplicações WPF e UWP para a plataforma Windows e para Xamarin.Forms ou .NET MAUI. Este artigo descreve a função que o editor de código desempenha quando você desenvolve aplicativos baseados em XAML e os recursos exclusivos do editor de código XAML no Visual Studio 2019.

Para começar, vamos dar uma olhada no IDE (ambiente de desenvolvimento integrado) com um projeto WPF aberto. A imagem seguinte mostra várias das principais ferramentas do IDE que utiliza, juntamente com o editor de código XAML.

No canto inferior esquerdo da imagem no sentido horário, as principais ferramentas do IDE são as seguintes:

• O editor de código XAML janela — o assunto deste artigo — onde você cria e edita seu código.
• O Designer XAML janela, onde você cria sua interface do usuário.
• A janela encaixável da Caixa de Ferramentas , onde você adiciona controles à sua interface de utilizador.
• O botão Debug , onde executa o seu código e o depura.
  (Você também pode editar o seu código em tempo real ao depurar com XAML Hot Reload.)
• A Solution Explorer janela, onde geres os teus arquivos, projetos e soluções.
• A janela de Propriedades , onde se altera a aparência da interface de utilizador e como os seus controlos se comportam.

Para continuar, vamos saber mais sobre o editor de código XAML.

Interface do usuário do editor de código XAML

Embora a janela do editor de código para aplicativos XAML compartilhe alguns elementos da interface do usuário (interface do usuário) que também aparecem em nosso IDE padrão, ela também inclui alguns recursos exclusivos que facilitam o desenvolvimento de aplicativos XAML.

Aqui está uma olhada na própria janela do editor de código XAML.

Em seguida, vamos dar uma olhada nas funções de cada um dos elementos da interface do usuário no editor de código.

Primeira linha

Na primeira linha na parte superior da janela de código XAML, à esquerda, há uma guia Design, um botão Swap Panes, uma guia XAML e um botão Pop Out XAML.

Veja como funcionam:

• A guia Design altera o foco do editor de código XAML para o Designer XAML.
• O botão Swap Panes inverte a localização do XAML Designer e do editor de código XAML no IDE.
• A guia XAML altera o foco de volta para o editor de código XAML.
• O botão Pop out XAML cria uma janela separada do editor de código XAML que está fora do IDE.

Continuando à direita, há um botão Divisão Vertical, um botão Divisão Horizontal e um botão Recolher Painéis.

Veja como funcionam:

• O botão Divisão Vertical altera a disposição do Designer XAML e do editor de código XAML no IDE, passando de um alinhamento horizontal para um alinhamento vertical.
• O botão Divisão Horizontal altera o local do Designer XAML e do editor de código XAML no IDE de um alinhamento vertical para um alinhamento horizontal.
• O botão Painel de Recolhimento permite que você recolha o que está no painel inferior, seja o editor de código ou o Desenhador. (Para restaurar o painel inferior, escolha o mesmo botão novamente, que agora é chamado de botão Expandir Painel.)

Segunda fila

Na parte superior da janela de código XAML, na segunda linha, existem duas listas suspensas de Janela. No entanto, se você visualizar a dica de ferramenta para esses elementos da interface do usuário, ele os identificará ainda mais como "Elemento: Janela" e "Membro: Janela".

As listas suspensas Janela têm diferentes funções, como se segue:

• O Elemento : A Janela à esquerda ajuda-o a visualizar e a navegar até elementos irmãos ou pais.

  Concretamente, apresenta-lhe uma vista do tipo esquema que revela a estrutura de tags do seu código. Quando seleciona da lista, o seu foco no editor de código fixa-se na linha de código que inclui o elemento que selecionou.

  

• O Membro : a janela à direita ajuda a visualizar e navegar até elementos de atributo ou filho.

  Especificamente, ele mostra uma lista das propriedades em seu código. Quando seleciona da lista, o seu foco no editor de código fixa-se na linha de código que inclui a propriedade selecionada.

  

Painel central, editor de código

O painel do meio é a parte "código" do editor de código XAML. Inclui a maioria das funcionalidades que encontras no editor de código IDE. Abordaremos vários dos recursos universais do IDE que podem ajudá-lo a desenvolver seu código XAML. Também destacaremos os recursos exclusivos para XAML no IDE.

Ações rápidas

Você pode usar Ações Rápidas para refatorar, gerar ou modificar o código com uma única ação.

Por exemplo, uma tarefa útil que você pode executar usando Ações Rápidas é Remover de uso desnecessário do código C# na guia MainWindow.xaml.cs.

Veja como:

1. Passe o rato sobre uma instrução de uso, escolha o ícone da lâmpada e depois selecione Remover Usos Desnecessários na lista suspensa.

   

2. Escolha se deseja corrigir todas as ocorrências no Documento, no Projetoou na Solução.

3. Exiba a caixa de diálogo de pré-visualização e, em seguida, escolha Aplicar.

Também pode aceder a esta funcionalidade a partir da barra de menus. Para fazer isso, escolha Editar>IntelliSense>Remover e classificar usos.

Para obter mais informações sobre configurações de uso, consulte a página Classificar usos. Para obter mais informações sobre o IntelliSense no Visual Studio, consulte a página IntelliSense. E, para obter mais informações sobre algumas das maneiras típicas pelas quais os desenvolvedores usam as Ações Rápidas, consulte a página Ações Rápidas Comuns.

Rastreio de alterações

A cor da margem esquerda permite que você acompanhe as alterações feitas em um arquivo. Veja como as cores se relacionam com as ações que você realiza:

• As alterações feitas desde que o arquivo foi aberto, mas não salvo, são indicadas por uma barra de amarela na margem esquerda (conhecida como margem de seleção).

  

• Depois de salvar as alterações (mas antes de fechar o arquivo), a barra fica verde.

  

Podes desativar e ativar esta funcionalidade no painel de Opções de Ferramentas>. Expanda a secção Todas as Definições>Editor de Texto>Geral e selecione ou desmarque a caixa de seleção Seguir alterações.

Para mais informações sobre o acompanhamento de alterações — incluindo as linhas onduladas (também conhecidas como "rabiscos") que aparecem sob as cadeias de código — consulte a secção de funcionalidades do Editor na página de Funcionalidades do editor Visual Studio Code .

Clique com o botão direito do rato no menu de contexto

Quando você está editando seu código no editor de código XAML, há vários recursos que você pode acessar usando o menu de contexto do botão direito do mouse. A maioria desses recursos está disponível universalmente no IDE do Visual Studio, enquanto alguns são específicos para usar um editor de código junto com uma janela Design.

Veja o que cada recurso faz e como ele é útil:

• View Code - Abre a janela de código da linguagem de programação, que normalmente se encontra em abas ao lado da exibição padrão, que inclui a janela de Design e o editor de código XAML.
• View Designer - Abre o modo de exibição padrão que inclui a janela Design e o editor de código XAML. (Se já estiveres na visualização padrão, não faz nada.)
• Ações Rápidas e Refatorações - Refatora, gera ou modifica o código com uma única ação. Ao passar o rato sobre o código, verá um ícone de lâmpada quando uma ação rápida ou refatoração está disponível.
  Consulte também: Ações Rápidas e Refatorar código .
• Renomear... - Renomeia somente namespaces. Se não tiver um namespace para renomear, recebe uma mensagem de erro que diz "Apenas os prefixos de namespace podem ser renomeados."
• Remover e classificar namespaces - Remove namespaces não utilizados e, em seguida, classifica os namespaces que permanecem.
• Peek Definition - Pré-visualiza a definição de um tipo sem deixar a sua localização atual no editor.
  Consulte também: Peek Definition e Visualize e edite o código usando Peek Definition.
• Ir para Definição - Navega à origem de um tipo ou membro e abre o resultado em um novo separador.
  Ver também: Ir para Definição.
• Cercar com... - Use trechos de código surround-with, que são adicionados em torno de um bloco de código selecionado.
  Veja também: Trechos de expansão e trechos de integração.
• Inserir trecho de código - Insere um trecho de código no local do cursor.
• Cut - É autoexplicativo
• Copy - Autoexplicativo
• Colar - Autoexplicativo
• Estrutura de - Expandir e recolher seções de código.
  Ver também: Esboço.
• Controle de Código-Fonte - Visualize o histórico de contribuições para o código num repositório de código aberto.

Painel central, barra de rolagem

A barra de deslocamento pode fazer mais do que navegar pelo código. Você também pode usá-lo para abrir outro painel do editor de código. Além disso, você pode usar a barra de rolagem para ajudá-lo a codificar de forma mais eficiente, adicionando anotações a ela ou usando diferentes modos de exibição.

Dividir a janela de código

Na barra de rolagem do editor de código, há um botão Dividir no canto superior direito. Ao escolhê-lo, você pode abrir outro painel do editor de código. Isso é útil porque eles operam independentemente uns dos outros, para que você possa usá-los para trabalhar em código em locais diferentes.

Para obter mais informações sobre como dividir uma janela do editor, consulte a página Gerenciar janelas do editor.

Usar anotações ou modo de mapa

Também podes alterar o aspeto da barra de deslocamento e as outras funcionalidades que contém. Por exemplo, muitas pessoas gostam de incluir anotações na barra de rolagem, que fornecem pistas visuais, como alterações de código, pontos de interrupção, marcadores, erros e posição do cursor.

Outros apreciam utilizar o modo de mapa , que exibe linhas de código em miniatura na barra de deslocamento. Os programadores que trabalham com ficheiros de código grandes podem achar que o modo mapa acompanha linhas de código de forma mais eficaz do que a barra de scroll padrão.

Para obter mais informações sobre como alterar as configurações padrão da barra de rolagem, consulte a página Personalizar a barra de rolagem.

Recursos específicos de XAML

A maioria dos recursos a seguir estão universalmente disponíveis no IDE do Visual Studio, mas há dimensões adicionadas a alguns deles que facilitam a codificação para desenvolvedores XAML.

Trechos de código XAML

Trechos de código são pequenos blocos de código reutilizável que podem ser inseridos num ficheiro de código utilizando o comando do menu de contexto Inserir fragmento ou uma combinação de atalhos de teclado (Ctrl+K, Ctrl+X). O IntelliSense agora suporta mostrar snippets XAML, que funcionam tanto para snippets incorporados como para quaisquer snippets personalizados que adiciones manualmente. Alguns trechos de XAML prontos para uso incluem #region, Column definition, Row definition, Settere Tag.

Para obter mais informações, consulte as páginas de trechos de código e C#.

Suporte a #region XAML

No Visual Studio, o suporte a #region está disponível para programadores XAML em WPF, UWP, Xamarin.Formse .NET MAUI. No Visual Studio 2019, continuamos a fazer melhorias incrementais no suporte #region. Por exemplo, na versão 16.4 e posterior, as #region opções são exibidas à medida que se começa a digitar <!.

Você pode usar regiões quando quiser agrupar seções do seu código que deseja expandir ou recolher.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Para obter mais informações sobre regiões, consulte a página #region (Referência C#). E para obter mais informações sobre como expandir e recolher seções de código, consulte a página Estrutura de Tópicos.

Comentários XAML

Os desenvolvedores geralmente preferem documentar seu código usando comentários. Você pode adicionar comentários ao código XAML que está na guia MainWindow.xaml das seguintes maneiras:

• Introduza <!-- antes de um comentário e, em seguida, adicione --> após o comentário.

• Introduza <! e, em seguida, escolha !-- na lista de opções.

  

• Selecione o código que você deseja cercar com um comentário e, em seguida, escolha o botão Comentário na barra de ferramentas no IDE. Para reverter a ação, escolha o botão Descomentar.

  

• Selecione o código que deseja cercar com um comentário e pressione Ctrl+KCtrl+C. Para descomentar o código selecionado, pressione Ctrl+K, Ctrl+U.

Para obter mais informações sobre como usar comentários no código C# no separador MainWindow.xaml.cs, consulte a página Comentários da documentação.

Lâmpadas XAML

Ícones de lâmpada que aparecem no seu código XAML fazem parte das Quick Actions que pode usar para refatorar, gerar ou modificar código de outra forma.

Aqui estão alguns exemplos de como eles podem beneficiar sua experiência de codificação XAML:

• Remover namespaces desnecessários. No editor de código XAML, namespaces desnecessários aparecem em texto esmaecido. Se passar o cursor sobre um uso desnecessário, surge uma lâmpada. Quando escolhe a opção Remover Espaços de Nomes Desnecessários na lista suspensa, vê uma pré-visualização do que pode remover.

  

• Renomear namespace. Esse recurso, disponível no menu de contexto do botão direito do mouse depois que você realça um namespace, facilita a alteração de várias instâncias de uma configuração ao mesmo tempo. Você também pode acessar esse recurso usando a barra de menus, Editar>Refatorar>Renomearou pressionando Ctrl+Re, em seguida, Ctrl+R novamente.

  

  Para obter mais informações, consulte a página Renomear um símbolo de código na refatoração.

XAML Condicional para a Plataforma Universal do Windows (UWP)

O XAML condicional fornece uma maneira de usar, na marcação XAML, o método ApiInformation.IsApiContractPresent. Isso permite definir propriedades e instanciar objetos na marcação com base na presença de uma API, sem a necessidade de usar código subjacente.

Para mais informações, consulte a página XAML Condicional e a página Controlos XAML UWP em Aplicações de Ambiente de Trabalho (Ilhas XAML).

Visualizador de estrutura XAML

O recurso Visualizador de Estrutura no editor de código mostra linhas de guia de estrutura, que são linhas tracejadas verticais que indicam elementos de tag abertos e fechados correspondentes em seu código. Essas linhas verticais facilitam a visualização de onde os blocos lógicos começam e terminam.

Para obter mais informações, consulte a página de código Navegar.

IntelliCode para XAML

Quando você adiciona uma marca XAML ao seu código, normalmente começa com um colchete angular esquerdo <. Quando você digita esse colchete angular, aparece um menu IntelliCode que lista várias das tags XAML mais populares. Escolha aquele que você deseja adicionar rapidamente ao seu código.

Você pode reconhecer as seleções do IntelliCode porque elas aparecem no topo da lista e são estreladas.

Para obter mais informações, consulte a página Visão geral do IntelliCode.

Configurações

Para obter mais informações sobre todas as configurações IDE do Visual Studio, consulte a página Recursos do editor de código.

Configurações opcionais de XAML

Podes usar o painel de Opções para alterar as definições predefinidas do editor de código XAML. Para visualizar as definições, abra o painelde Opções de > e expanda a secção de Todas as Definições>Linguagens>XAML.

Observação

Também podes usar atalhos de teclado para aceder a secções e definições no painel de Opções . Selecione Ctrl+Q para pesquisar no IDE, escreva opções e depois pressione Enter. Para pesquisar na lista de opções, pressione Ctrl+E, escreva linguagens, pressione Enter, escreva xaml e prima novamente Enter.

Para obter mais informações sobre atalhos de teclado, consulte a página Dicas de atalho para Visual Studio.

Opções universais do editor de texto

As três primeiras secções das Opções XAML fornecem definições universais para todas as linguagens de programação suportadas pelo IDE do Visual Studio. Para saber mais sobre estas opções e como as utilizar, consulte a informação ligada na tabela seguinte.

Seção	Localização
Geral	Painel de Opções: Todas as Definições, Idiomas, Predefinições, Geral
Barras de rolagem	Opções, Todas as Definições, Idiomas, Predefinições, Barras de Scroll
Separadores	Opções, Todas as Definições, Idiomas, Predefinições, Separadores

Opções do editor de texto específico do XAML

As secções seguintes das Opções XAML são específicas do XAML. Estas definições podem melhorar a sua experiência de edição ao desenvolver aplicações baseadas em XAML. Para saber mais sobre estas opções e como as utilizar, consulte a informação ligada na tabela seguinte.

Seção	Localização
Formatação	Painel de opções: Todas as Definições, Línguas, XAML, Formatação
Diversos	Opções, Todas as Definições, Línguas, XAML, Diversos

Dica

A configuração nome método do manipulador de eventos Capitalize na seção diversos é especialmente útil para desenvolvedores XAML. Essa configuração está desativada por padrão porque é nova, mas sugerimos que você a defina para no para oferecer suporte à caixa adequada em seu código.

Próximos passos

Para saber mais sobre como editar seu código em tempo real enquanto você executa seu aplicativo no modo de depuração, consulte a página Hot Reload XAML.

Ver também

• Funcionalidades do editor Visual Studio Code
• XAML em aplicações UWP
• XAML no de aplicativos Xamarin.Forms
• XAML em aplicações .NET MAUI