XAML Live Preview: Capturar e editar a interface de utilizador do aplicativo da área de trabalho

Com o XAML Live Preview, você pode capturar a interface do usuário (UI) de um aplicativo de área de trabalho e trazê-la para uma janela encaixada no Visual Studio, o que facilita o uso do XAML Hot Reload para alterar o aplicativo e, em seguida, exibir essas alterações em tempo real à medida que você as faz.

Janela XAML Live Preview

A janela XAML Live Preview está disponível durante o debugging. Para abri-lo, vá para Depurar>Windows>XAML Live Preview.

A partir do Visual Studio 2022 versão 17.14, o XAML Live Preview e o XAML Hot Reload estão disponíveis durante a fase de design em apps .NET MAUI e não apenas durante uma sessão de depuração. Dispositivos Android e emuladores também são suportados.

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

Deslocamento e zoom

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

• Uma roda de rolagem do rato, tanto vertical como horizontal (se o rato o suportar).
• Um touchpad de rolagem de dois dedos, vertical e horizontal.
• Pressionar a tecla Ctrl em conjunto com arrastar o mouse.

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

• Os botões de Ampliar/reduzir no canto inferior esquerdo.
• Um atalho de teclado com Ctrl+sinal de mais (+) ou Ctrl+sinal de menos (-), se preferir usar um teclado.
• Pressionar a tecla Ctrl em conjunto com a ação da roda do rato, ou um gesto de pinça para ampliar com o touchpad. Um bônus extra de usar um mouse é manter uma área de controle.

Seleção de elementos

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 Live Visual Tree 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 elementos; em outras palavras, ele destaca 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 Live Visual Tree. Ele também navega até a origem se o Elemento Selecionado de Visualização estiver habilitado e o XAML de origem estiver 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 mouse.
• Just My XAML é um botão de alternância que controla quais elementos destacar: todos ou apenas os elementos com XAML de origem disponíveis 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 de origem quando um elemento é selecionado. Está desativado por padrão. Esse comportamento é o mesmo que no Live Visual Tree.

Governantes

As réguas ajudam a alinhar elementos no seu aplicativo. Eles exibem a distância, em unidades de aplicação, para a régua anterior. Dessa forma, eles ajudam a verificar as distâncias entre as diferentes partes do seu aplicativo.

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

• Adicione régua vertical. Adiciona uma única régua vertical. Se você clicar nesse botão algumas vezes seguidas, ele colocará novas réguas para que elas não se sobreponham às réguas existentes.
• Adicione régua horizontal. Adiciona uma única régua horizontal, semelhante à régua vertical.
• Remova todas as réguas. Remove todas as réguas ao mesmo tempo.
• Selecione a cor da régua. Muda 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 otimizadas para uso com o teclado. Pode navegar entre eles usando a tecla Tab. Você pode usar as teclas de seta para mover as réguas um pixel de cada vez ou pressionar Ctrl emparelhado com as teclas de seta para movê-las por 10 unidades de aplicativos de cada vez. A tecla Del exclui a régua selecionada no momento. Você também pode apagar uma régua com o rato selecionando o botão Apagar régua próximo à etiqueta.

Você também pode adicionar réguas em torno 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 mantenha pressionada a tecla Shift enquanto clica com o botão direito do mouse.

Aplicações de múltiplas janelas

Se o seu 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 suportadas

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

Limitações

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

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

Próximos passos

Saiba mais sobre o XAML Hot Reload, que emparelha estreitamente com o XAML Live Preview.

Conteúdo relacionado

Notas de versão do Visual Studio 2022