Versão prévia ao vivo do XAML: capturar e editar a interface do usuário do aplicativo da área de trabalho

Com o XAML Live Preview, você pode capturar a interface do usuário (UI) de um aplicativo da área de trabalho e trazê-la para uma janela encaixada no Visual Studio, o que facilita o uso do Recarregamento Dinâmico XAML para alterar o aplicativo e visualizar essas alterações em tempo real à medida que são feitas.

Janela de Visualização ao Vivo do XAML

A janela XAML Live Preview está acessível durante a depuração. Para abri-lo, acesse Depurar>Windows>XAML Live Preview.

A partir do Visual Studio 2022 versão 17.14 versão prévia 2, o XAML Live Preview e o XAML Hot Reload estão disponíveis em tempo de desenvolvimento e não apenas durante uma sessão de depuração.

Ou selecione o botão Mostrar no XAML Live Preview na barra de ferramentas do aplicativo.

Rolagem e zoom

Além de rolar com as barras de rolagem, você também pode usar as seguintes interações:

• Uma roda do mouse, vertical e horizontal (se o mouse der suporte a ela).
• Rolagem de dois dedos no touchpad, tanto vertical quanto horizontal.
• Pressionar a tecla Ctrl combinada com uma ação de arrastar do mouse.

Quanto ao zoom, você também pode usar as seguintes interações:

• Os botões Ampliar/Reduzir no canto inferior esquerdo.
• Uma tecla Ctrl+plus sign (+) ou ctrl+menos sinal (-) tecla de atalho de teclado, se preferir usar um teclado.
• Um pressionamento da tecla Ctrl emparelhado com uma ação de rolar do mouse, ou um gesto de pinça no touchpad para ampliar. Um bônus extra de usar um mouse é manter uma área de controle.

Seleção de elemento

A seleção de elementos no XAML Live Preview é semelhante à seleção em um aplicativo em execução. Ele permite que você encontre elementos na Árvore Visual Dinâmica ou no XAML de origem.

A seleção de elementos é controlada pelos quatro primeiros botões da barra de ferramentas (da esquerda para a direita).

Os botões da barra de ferramentas produzem as seguintes ações:

• A seleção de elementos inicia a ação de seleção de elemento; em outras palavras, ele realça os elementos à medida que você move o mouse sobre o conteúdo do aplicativo no XAML Live Preview. Quando você clica em um elemento, ele é selecionado em Árvore Visual Dinâmica. Ele também navegará até a origem se o Elemento Selecionado de Visualização estiver habilitado e o XAML de origem disponível. Esse comportamento é o mesmo que no Live Visual Tree.
• Mostrar informações do elemento durante a seleção é um botão de alternância que controla a exibição de informações de tamanho, cor e fonte sobre o elemento sob o seu mouse.
• Apenas Meu XAML é um botão de alternância que controla quais elementos destacar: todos ou apenas aqueles com XAML original disponível na solução. Esse comportamento é o mesmo que no Live Visual Tree.
• Visualizar Item Selecionado é um botão de alternância que controla a navegação para o XAML original quando um elemento é selecionado. Ele está desativado por padrão. Esse comportamento é o mesmo que no Live Visual Tree.

Réguas

As réguas ajudam você a alinhar elementos em seu aplicativo. Eles exibem a distância, em unidades de aplicativo, até a régua anterior. Dessa forma, eles ajudam a verificar as distâncias entre diferentes partes do aplicativo.

O segundo grupo de botões da barra de ferramentas controla as réguas, da seguinte maneira (da esquerda para a direita):

• Adicionar régua vertical. Adiciona uma única régua vertical. Se você clicar neste botão algumas vezes seguidas, ele colocará novas réguas para que elas não se sobreponham às réguas existentes.
• Adicionar régua horizontal. Adiciona uma única régua horizontal, semelhante à régua vertical.
• Remova todas as réguas. Remova todas as réguas de uma vez.
• Selecione a cor da régua. Altera a cor das réguas.
• Alterne a visibilidade da régua. Oculta ou mostra todas as réguas com um único clique.

As réguas são compatíveis com o uso do teclado. Você pode navegar entre eles usando a tecla Tab. Você pode usar as setas do teclado para mover as réguas um pixel de cada vez ou pressionar Ctrl junto com as teclas de seta para movê-las em 10 unidades de aplicação por vez. A tecla Del exclui a régua selecionada no momento. Você também pode excluir uma régua com um mouse selecionando o botão Excluir Régua próximo ao rótulo.

Você também pode adicionar réguas ao redor de um elemento ao usar a Seleção de Elementos. Um clique com o botão direito do mouse adiciona réguas verticais. Para adicionar réguas horizontais, selecione e segure a tecla Shift enquanto clica com o botão direito do mouse.

Uma animação de como você pode adicionar réguas ao contorno de uma imagem no XAML Live Preview.

Aplicativos de várias janelas

Se o aplicativo tiver várias janelas, você poderá escolher qual janela exibir usando a caixa de combinação Janela. Ou use o botão Mostrar no XAML Live Preview na barra de ferramentas do aplicativo que está na janela que você deseja visualizar.

Plataformas com suporte

A versão inicial do Visual Studio 2022 dá suporte às plataformas e cenários de depuração a seguir.

Plataforma	Seleção de Elementos & Dica de Informação	Réguas
WPF (Windows Presentation Foundation)	Sim	Sim
Plataforma Universal do Windows (UWP)	Sim	Sim
Área de trabalho WinUI3	Sim	Sim
MAUI do .NET	Sim	Sim
Xamarin 5.0+ (Emulador do Android)	Não	Sim (px*)

Observação

Na tabela anterior, (px*) indica réguas que são exibidas em pixels; todas as outras plataformas exibem informações em unidades de plataforma, que dependem do DPI de um monitor.

Limitações

O XAML Live Preview funciona capturando uma captura de tela de aplicativo várias vezes por segundo e usa APIs disponíveis como PrintWindow. Ele está sujeito a seguintes limitações:

• Se uma parte de uma janela do aplicativo estiver fora da tela, essa parte provavelmente não exibirá alterações do XAML Hot Reload.
• Uma janela pode recusar a captura de tela e ficar indisponível para o XAML Live Preview usando SetWindowDisplayAffinity com WDA_EXCLUDEFROMCAPTURE ou DwmSetWindowAttribute com DWMWA_CLOAK.

Próximas etapas

Saiba mais sobre a Recarga Dinâmica XAML, que é emparelhada de perto com o XAML Live Preview.

Conteúdo relacionado

Notas sobre a versão do Visual Studio 2022