Editor de código XAML

O editor de código XAML no IDE do Visual Studio inclui todas as ferramentas necessárias para criar aplicativos WPF e UWP para a plataforma Windows e para o Xamarin.Forms. 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 aberto do WPF. A imagem a seguir mostra várias das principais ferramentas IDE que você usará junto com o editor de código XAML.

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

• O editor de código XAML janela — o assunto deste artigo — onde você cria e edita seu código.
• A janela do XAML Designer , na qual você projeta sua interface do usuário.
• A janela acoplável da caixa de ferramentas , na qual você adiciona controles à sua interface do usuário.
• O botão Depurar, com o qual você executa o seu código e o depura.
  (Você também pode editar o código em tempo real enquanto estiver depurando com a Recarga Dinâmica de XAML.)
• A janelado Gerenciador de Soluções, na qual você gerencia seus arquivos, projetos e soluções.
• A janela de Propriedades , onde você altera a aparência da sua IU e como os controles da IU funcionam.

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 de interface do usuário que também aparecem em nosso IDE padrão, ele 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 à esquerda da janela do código XAML, há uma guia Design, um botão Trocar Painéis, uma guia XAML e um botão Exibir XAML.

Veja como eles funcionam:

• A guia Design altera o foco do editor de código XAML para o Designer XAML.
• O botão Trocar Painéis inverte o local do Designer XAML 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 eles funcionam:

• O botão Divisão Vertical altera o local do Designer XAML e do editor de código XAML no IDE a partir de um alinhamento horizontal até um alinhamento vertical.
• O botão Divisão Horizontal altera o local do Designer XAML e do editor de código XAML no IDE a partir de um alinhamento vertical até um alinhamento horizontal.
• O botão Recolher Painel permite recolher o que está no painel inferior, seja o editor de código ou o designer. (Para restaurar o painel inferior, escolha o mesmo botão novamente, que agora é chamado de botão Expandir Painel.)

Segunda linha

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

As listas suspensas da janela têm funções diferentes, da seguinte maneira:

• O Elemento: Janela à esquerda ajuda você a exibir e navegar até elementos irmãos ou pai.

  Ele mostra especificamente uma exibição semelhante a uma estrutura de tópicos que revela a estrutura de marca do seu código. Quando você selecionar na lista, seu foco no editor de código será automaticamente direcionado para a linha de código que inclui o elemento selecionado.

  

• O Membro: Janela à direita ajuda você a exibir e navegar até elementos filho ou atributo.

  Ele mostra especificamente uma lista das propriedades no seu código. Quando você seleciona uma opção da lista, o foco no editor de código será movido para a linha de código que inclui a propriedade selecionada.

  

Painel do meio, editor de código

O painel central é a parte "código" do editor de código XAML. Ele inclui a maioria dos recursos que você encontrará no editor de código IDE. Tocaremos em 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 utilizações desnecessárias do código C# na guia MainWindow.xaml.cs.

Veja como:

1. Passe o mouse sobre uma instrução de utilização, escolha o ícone de lâmpada e escolha Remover utilizações desnecessárias na lista suspensa.

   

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

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

Você também pode acessar esse recurso na barra de menus. Para isso, escolha Editar>IntelliSense>Remover e Classificar utilizações.

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

Change tracking

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ê toma:

• 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 ficará verde.

  

Para desativar e ativar esse recurso, altere a opção Controlar Alterações nas configurações Editor de Texto (Ferramentas>Opções>Editor de Texto).

Para obter mais informações sobre o acompanhamento de alterações, para incluir as linhas onduladas (também conhecidas como "rabiscos") que aparecem em cadeias de caracteres de código, consulte a seção Recursos do editor da página Recursos do editor de código do Visual Studio.

Menu de contexto ao clicar com o botão direito do mouse

Ao editar seu código no editor de código XAML, há vários recursos que você pode acessar usando o menu de contexto com o 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:

• Exibir Código - Abre a janela de código da linguagem de programação, que normalmente é posicionada ao lado da visualização padrão que inclui a janela de Design e o editor de código XAML.
• Designer de Exibição – Abre o modo de exibição padrão que inclui a janela Design e o editor de código XAML. (Se você já estiver no modo de exibição padrão, ele não fará nada.)
• Ações Rápidas e Refatorações – Refatora, gera ou modifica o código com uma única ação. Ao passar o mouse sobre o código, você verá um ícone de lâmpada quando uma ação rápida ou refatoração estiver disponível.
  Consulte também: Ações Rápidas e Refatorar o código.
• Renomear... – renomeia apenas namespaces. Se você não tiver um namespace para renomear, receberá uma mensagem de erro informando "Somente prefixos de namespace podem ser renomeados".
• Remover e Classificar namespaces - remove namespaces não utilizados e, em seguida, classifica os namespaces que permanecem.
• Espiar Definição - pré-visualiza a definição de um tipo sem sair do local atual no editor.
  Consulte também: Espiar Definição e Exibir e editar o código usando Espiar Definição.
• Ir para Definição - navega até a fonte de um tipo ou membro e abre o resultado em uma nova guia.
  Consulte também: Ir para Definição.
• Cercar com... - use snippets de código do tipo cercar com, que são adicionados em torno de um bloco de código selecionado.
  Consulte também: Snippets de expansão e snippets do tipo cercar com.
• Inserir snippet - insere um snippet de código no local do cursor.
• Recortar - autoexplicativo
• Copiar - autoexplicativo
• Colar - autoexplicativo
• Destaque - expanda e recolha seções de código.
  Consulte também: Destaque.
• Controle de Código-Fonte - Veja o histórico de contribuições de código para um repositório de código aberto.

Painel do meio, barra de rolagem

A barra de rolagem pode fazer mais do que rolar pelo seu 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 com mais eficiência adicionando anotações a ela ou usando modos de exibição diferentes.

Dividir a janela de código

Na barra de rolagem do editor de código há um botão de Divisão no canto superior direito. Ao escolher, você pode abrir outro painel do editor de código. Isso é útil porque eles operam independentemente um do outro, para que você possa usá-los para trabalhar no 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 página.

Usar anotações ou modo de mapa

Você também pode alterar a aparência da barra de rolagem e quais recursos adicionais ela contém. Por exemplo, muitas pessoas gostam de incluir anotações na barra de rolagem, as quais fornecem indicações visuais, como alterações de código, pontos de interrupção, indicadores, erros e posição de cursor.

Outros apreciam utilizar o modo de mapa , que exibe linhas de código em miniatura na barra de rolagem. Os desenvolvedores que têm muito código em um arquivo podem achar que o modo de mapa rastreia linhas de código com mais eficiência do que a barra de rolagem padrão.

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

Recursos específicos do 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

Snippets de código são pequenos blocos de código reutilizável que você pode inserir em um arquivo de código usando o comando Inserir snippet ao clicar com o botão direito no menu de contexto ou uma combinação de atalhos de teclado (Ctrl+K, Ctrl+X). Aprimoramos o IntelliSense para que ele suporte a exibição de snippets XAML, que funcionam tanto para snippets internos quanto para qualquer snippet personalizado que você adicionar manualmente. Alguns snippets de XAML prontos para uso incluem #region, Column definition, Row definition, Settere Tag.

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

Suporte #region para XAML

No Visual Studio, o suporte a #region está disponível para desenvolvedores de XAML no WPF, UWP, Xamarin.Formse .NET MAUI. No Visual Studio 2019, continuamos a fazer melhorias incrementais no suporte a #region. Por exemplo, na versão 16.4 e posteriores, as opções #region aparecem quando você começa a digitar <!.

Você pode usar regiões quando quiser agrupar seções do seu código que você também 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 de C#). E para obter mais informações sobre como expandir e recolher seções do código, consulte a página Destaque.

Comentários para 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:

• Insira <!-- antes de um comentário e adicione --> após o comentário.

• Insira <! e escolha !-- na lista de opções.

  

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

  

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

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

Lâmpadas para XAML

Ícones de lâmpada que aparecem no código XAML fazem parte das Ações Rápidas que você pode usar para refatorar, gerar ou modificar o código.

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

• Remova namespaces desnecessários. No editor de código XAML, namespaces desnecessários aparecem em texto esmaecido. Se você passar o cursor sobre uma utilização desnecessária, uma lâmpada será exibida. Ao escolher a opção Remover namespaces desnecessários na lista suspensa, você verá uma pré-visualização, que pode ser removida.

  

• Renomeie o namespace. Esse recurso, disponível no menu de contexto do clique com o botão direito do mouse depois de realçar 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 Ctrl+R novamente.

  

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

XAML condicional para UWP

O XAML condicional fornece uma maneira de usar o método ApiInformation.IsApiContractPresent na marcação XAML. Isso permite que você defina propriedades e instancie objetos na marcação com base na presença de uma API sem a necessidade de usar o code behind.

Para obter mais informações, consulte a página XAML condicional e a página Hospedar controles XAML para UWP em aplicativos do desktop (Ilhas XAML).

Visualizador de estrutura XAML

O recurso Visualizador da Estrutura no editor de códigos mostra as linhas guias da estrutura, que são linhas verticais tracejadas que indicam a correspondência de elementos de marca abertos e fechados 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 Navegar pelo código.

IntelliCode para XAML

Ao adicionar uma marca XAML ao seu código, você normalmente começa com um colchete angular esquerdo<. Quando você digita esse colchete angular, um menu do IntelliCode é exibido e lista várias das marcas XAML mais populares. Escolha aquele que você deseja adicioná-lo rapidamente ao seu código.

Você pode reconhecer as seleções do IntelliCode porque elas aparecem na parte superior 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 no IDE do Visual Studio, consulte a página Recursos do editor de código.

Configurações opcionais de XAML

Você pode usar a caixa de diálogo Opções para alterar as configurações padrão do editor de código XAML. Para exibir as configurações, escolha Tools>Options>Text Editor>XAML.

Opções do editor de texto universal

Na caixa de diálogo Opções para XAML, os três primeiros itens a seguir são universais para todas as linguagens de programação compatíveis com o IDE do Visual Studio. Visite as informações vinculadas na tabela a seguir para saber mais sobre essas opções e como usá-las.

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

A tabela a seguir lista as configurações na caixa de diálogo opções que podem aprimorar sua experiência de edição ao desenvolver aplicativos baseados em XAML. Visite as informações vinculadas para saber mais sobre essas opções e como usá-las.

Próximas etapas

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

Consulte também

• Recursos do editor de códigos do Visual Studio
• XAML em aplicativos UWP
• XAML em aplicativos do Xamarin.Forms
• XAML em aplicativos MAUI do .NET