XAML Live Preview: capturar e editar a interface do usuário do aplicativo de área de trabalho
Com o XAML Live Preview, você pode capturar a interface do usuário de um aplicativo da área de trabalho e colocá-la em uma janela encaixada no Visual Studio, o que facilita o uso da Recarga Dinâmica de XAML para alterar o aplicativo e exibir essas alterações em tempo real à medida que as faz.
Janela do XAML Live Preview
A janela do XAML Live Preview fica disponível durante a depuração. Para abri-la, acesse Depurar>Janelas>XAML Live Preview.
Ou selecione o botão Mostrar no XAML Live Preview na barra de ferramentas do aplicativo.
Rolagem e ampliação
Além de rolar com as barras de rolagem, você também pode usar as seguintes interações:
- A roda do mouse, vertical e horizontal (se o mouse for compatível).
- Uma rolagem de dois dedos com touchpad, vertical e horizontal.
- A tecla Ctrl pressionada junto com uma ação de arrastar do mouse.
Quanto à ampliação, você também pode usar as seguintes interações:
- Os botões Ampliar/reduzir no canto inferior esquerdo.
- Pressionar o atalho de teclado Ctrl+sinal de adição (+) ou Ctrl+sinal de subtração (-), se preferir usar um teclado.
- A tecla Ctrl pressionada junto com uma ação da roda do mouse ou uma ação de pinçar para ampliar usando o touchpad. Um bônus extra de se usar o 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 elemento inicia a ação de seleção do elemento; em outras palavras, ela realça os elementos à medida que você passa o mouse sobre o conteúdo do aplicativo no XAML Live Preview. Quando você clica em um elemento, ele é selecionado na Árvore Visual Dinâmica. Ela também navega até a origem se a opção Visualizar Elemento Selecionado estiver habilitada e o XAML de origem disponível. Esse comportamento é o mesmo que na Árvore Visual Dinâmica.
- Mostrar informações de elemento durante a seleção é um botão de alternância que controla a exibição de informações de tamanho, cor e fonte do elemento sob o mouse.
- Apenas Meu XAML é um botão de alternância que controla quais elementos destacar: todos ou apenas os elementos com XAML de origem disponível na solução. Esse comportamento é o mesmo que na Árvore Visual Dinâmica.
- Visualizar Item Selecionado é um botão de alternância que controla a navegação até o XAML de origem quando um elemento é selecionado. Ele está desativado por padrão. Esse comportamento é o mesmo que na Árvore Visual Dinâmica.
Réguas
As réguas ajudam você a alinhar elementos em seu aplicativo. Eles exibem a distância, em unidades do aplicativo, até a régua anterior. Dessa forma, elas ajudam a verificar distâncias entre diferentes partes do seu 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 nesse botão algumas vezes seguidas, ele colocará novas réguas de modo que elas não se sobreponham às réguas existentes.
- Adicionar régua horizontal. Adiciona uma única régua horizontal, semelhante à régua vertical.
- Remover todas as réguas. Remove todas as réguas de uma só vez.
- Selecionar cor da régua. Altera a cor das réguas.
- Alternar a visibilidade da régua. Oculta ou mostra todas as réguas com um único clique.
As réguas funcionam com o teclado. Você pode usar TAB para percorrê-las. Você pode usar as teclas de direção para mover as réguas um pixel de cada vez ou pressionar Ctrl com as teclas de direção para movê-las em 10 unidades de aplicativo por vez. A tecla Del exclui a régua que está selecionada. Você também pode excluir uma régua com o 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.
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 usar 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 e Dica de Informação | Réguas |
|---|---|---|
| WPF | Sim | Sim |
| UWP | Sim | Sim |
| Área de trabalho do WinUI3 | Sim | Sim |
| .NET MAUI | Sim | Sim |
| Xamarin 5.0+ (Emulador 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 da plataforma, que dependem do DPI de um monitor.
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. 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 da Recarga Dinâmica de XAML.
- 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 de XAML, que funciona com o XAML Live Preview.