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. Esse 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 a seguir mostra várias das principais ferramentas do IDE que você usará junto com o editor de código XAML.
Na parte inferior esquerda da imagem indo no sentido horário, as principais ferramentas do IDE são as seguintes:
- A janela do editor de código XAML, assunto desse artigo, na qual você cria e edita seu código.
- A janela Designer XAML, na qual você projeta sua interface do usuário.
- A janela encaixável Caixa de Ferramentas, na qual você adiciona controles à 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 janela Gerenciador de Soluções, na qual você gerencia seus arquivos, projetos e soluções.
- A janela Propriedades, na qual você altera a aparência da interface do usuário e como os controles da interface do usuário 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.
Veja aqui a 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 elas 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 Exibir 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 elas 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ê seleciona na lista, seu foco no editor de código se ajustará à 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 na lista, seu foco no editor de código se ajustará à linha de código que inclui a propriedade selecionada.
Painel central, editor de código
O painel central é a parte de "código" do editor de código XAML. Ele inclui a maioria dos recursos que você encontrará no editor de código do 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 as 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.
Este é o procedimento:
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.
Escolha se deseja corrigir todas as ocorrências no Documento, no Projeto ou na Solução.
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 maneiras típicas em que os desenvolvedores usam Ações Rápidas, consulte a página Ações Rápidas Comuns.
controle de alterações
A cor da margem esquerda permite que você mantenha o controle das alterações feitas em um arquivo. Veja como as cores se relacionam com as ações que você realiza:
As alterações que foram feitas desde que o arquivo foi aberto, mas que não foram salvas, são indicadas por uma barra amarela na margem esquerda (conhecida como a 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 ao clicar com o botão direito do mouse. A maioria desses recursos está universalmente disponível 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 qual a sua utilidade:
- Código de Exibição - abre a janela de código da linguagem de programação, que normalmente é guiada ao lado da exibição padrão que inclui a janela Design e o editor de código XAML.
- Designer de Exibição - abre a 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, nenhuma ação será realizada.)
- 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 do Código-fonte - exiba o histórico de contribuições do código para um repositório de código aberto.
Painel central, barra de rolagem
A barra de rolagem pode fazer mais do que rolar pelo seu código. Você também pode usá-la 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 escolhê-lo, você consegue abrir outro painel do editor de código. Isso é útil porque os painéis irão operar de forma independente 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.
Usar anotações ou modo de mapa
Você também pode alterar a aparência da barra de rolagem e quais recursos extras aparecem nela. 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.
Outras preferem a utilização do 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 a página Personalizar a barra de rolagem.
Recursos específicos para XAML
A maioria dos recursos a seguir está universalmente disponível no IDE do Visual Studio, mas há dimensões adicionadas a alguns deles que facilitam a codificação para desenvolvedores de XAML.
Snippets de código para 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 oferecer suporte à exibição de snippets XAML, que funciona para snippets internos e quaisquer snippets personalizados que você adicione manualmente. Alguns snippets 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 XAML no WPF, UWP e Xamarin.Forms. No Visual Studio 2019, continuamos fazendo melhorias incrementais para o suporte #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 formas a seguir:
Insira
<!--antes de um comentário e, em seguida, adicione-->após o comentário.Insira
<!e escolha!--na lista de opções.
Selecione o código que você deseja marcar 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 Remover marca de comentário.
Selecione o código que você deseja marcar com um comentário e pressione Ctrl+K, Ctrl+C. Para remover a marca de 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
Os í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 elas 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 ao clicar com o botão direito no menu de contexto depois de destacar 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>Renomear ou pressionando Ctrl+R e depois 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
A XAML condicional fornece uma forma de usar o método ApiInformation.IsApiContractPresent na marcação XAML. Com isso, você pode definir propriedades e instanciar objetos na marcação com base na presença de uma API sem a necessidade de usar 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 da 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 a marca que você deseja adicionar rapidamente ao seu código.
Você consegue 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 para 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 Ferramentas>Opções>Editor de texto>XAML.
Observação
Você também pode usar atalhos de teclado para acessar a caixa de diálogo Opções. Veja como: Pressione Ctrl+Q para pesquisar o IDE, digite Opções e pressione Enter. Em seguida, pressione Ctrl+E para pesquisar a caixa de diálogo Opções, digite Editor de texto, pressione Enter, digite XAML e pressione Enter.
Para obter mais informações sobre atalhos de teclado, consulte a página Dicas de atalho para o Visual Studio.
Opções universais do editor de texto
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.
| Nome | Obter mais informações |
|---|---|
| Geral | Caixa de diálogo Opções: Editor de texto > Todas as linguagens |
| Barras de rolagem | Opções, Editor de Texto, Todas as Linguagens, Barras de Rolagem |
| Guias | Opções, Editor de Texto, Todas as Linguagens, Guias |
Opções do editor de texto específicas para 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.
| Nome | Obter mais informações |
|---|---|
| Formatação | Opções, Editor de Texto, XAML, Formatação |
| Diversos | Opções, Editor de texto, XAML, Diversos |
Dica
A configuração Colocar em maiúsculas o nome do método do manipulador de eventos 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 como ativada para dar suporte a maiúsculas e minúsculas adequadas em seu código.
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 Recarga Dinâmica.