Inspecionar a árvore visual de um aplicativo .NET MAUI
Interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) Live Visual Tree é um recurso do Visual Studio que fornece uma exibição em árvore dos elementos da interface do usuário em seu aplicativo .NET MAUI em execução.
Quando seu aplicativo .NET MAUI está sendo executado na configuração de depuração, com o depurador anexado, a janela Live Visual Tree pode ser aberta selecionando Depurar > Windows > Live Visual Tree na barra de menus do Visual Studio:
Desde que o Hot Reload esteja habilitado, a janela Live Visual Tree exibirá a hierarquia dos elementos da interface do usuário do seu aplicativo, independentemente de a interface do usuário do aplicativo ser criada usando XAML ou C#. No entanto, você terá que desabilitar Just My XAML para exibir a hierarquia dos elementos da interface do usuário do seu aplicativo para interfaces do usuário criadas usando C#.
Apenas meu XAML
A exibição dos elementos da interface do usuário é simplificada por padrão usando um recurso chamado Just My XAML. Clicar no botão Mostrar apenas meu XAML desabilita o recurso e mostra todos os elementos da interface do usuário na árvore visual:
Apenas Meu XAML pode ser desabilitado permanentemente selecionando Opções de depuração > XAML Hot Reload na barra de menus > do Visual Studio. Em seguida, na caixa de diálogo Opções, verifique se Habilitar Apenas Meu XAML na Live Visual Tree está desabilitado:
Localizar um elemento da interface do usuário
A estrutura de uma interface do usuário XAML tem muitos elementos nos quais talvez você não esteja interessado e, se não tiver uma compreensão completa do código-fonte do aplicativo, talvez tenha dificuldade em navegar na árvore visual para encontrar o elemento da interface do usuário que está procurando. Portanto, no Windows, a janela Live Visual Tree tem várias abordagens que permitem usar a interface do usuário do aplicativo para ajudá-lo a encontrar o elemento que deseja examinar:
Selecione o elemento no aplicativo em execução. Você pode habilitar esse modo clicando no botão Selecionar elemento no botão Aplicativo em execução na barra de ferramentas Live Visual Tree :
Com esse modo habilitado, quando você pode selecionar um elemento de interface do usuário no aplicativo, a janela Live Visual Tree é atualizada automaticamente para mostrar o nó na árvore correspondente a esse elemento.
Exibir adornos de layout no aplicativo em execução. Você pode habilitar esse modo clicando em Exibir Adoradores de Layout no botão Aplicativo em Execução na barra de ferramentas Árvore Visual ao Vivo:
Quando esse modo está habilitado, ele faz com que a janela do aplicativo mostre linhas horizontais e verticais ao longo dos limites do objeto selecionado para que você possa ver a que ele se alinha, bem como retângulos mostrando as margens.
Visualizar Seleção. Você pode habilitar esse modo clicando no botão Visualizar item selecionado na barra de ferramentas Árvore visual dinâmica:
Esse modo mostra o código-fonte XAML onde o elemento foi declarado, desde que você tenha acesso ao código-fonte do aplicativo.
Comentários
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja: https://aka.ms/ContentUserFeedback.
Submeter e ver comentários