Compartilhar via

Inspecionar a árvore visual de um aplicativo do .NET MAUI

  • Artigo

A árvore visual dinâmica do.NET MAUI (.NET Multi-platform App UI) é um recurso do Visual Studio que fornece um modo de exibição de árvore dos elementos da interface do usuário no aplicativo do .NET MAUI em execução.

Quando seu aplicativo do .NET MAUI estiver em execução na configuração de depuração com o depurador anexado, a janela Árvore visual dinâmica poderá ser aberta selecionando Depurar > Windows > Árvore Visual Dinâmica na barra de menus do Visual Studio:

Captura de tela da janela Árvore visual dinâmica no Visual Studio.

Se a Recarga Dinâmica estiver habilitada, a janela Árvore Visual Dinâmica 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ê precisará desabilitar o Just My XAML para exibir a hierarquia dos elementos de interface do usuário do aplicativo das interfaces do usuário criadas usando C#.

Just My XAML

A exibição dos elementos da interface do usuário é simplificada por padrão usando um recurso chamado Just My XAML. No Visual Studio, clicar no botão Mostrar Just My XAML desabilita o recurso e mostra todos os elementos da interface do usuário na árvore visual:

Captura de tela de todos os elementos da interface do usuário na janela Árvore Visual Dinâmica.

O Just My XAML pode ser desabilitado permanentemente selecionando Depurar > Opções > Recarga Dinâmica de XAML na barra de menus do Visual Studio. Em seguida, na caixa de diálogo Opções, verifique se Habilitar o Just My XAML na Árvore Visual Dinâmica está desabilitado:

Captura de tela do botão Just My XAML desabilitado na janela Árvore Visual Dinâmica no Visual Studio.

Localizar um elemento da interface do usuário

A estrutura de uma interface do usuário em XAML tem muitos elementos nos quais você pode não ter interesse e, se você não tiver uma compreensão completa do código-fonte do aplicativo, poderá ter dificuldade em navegar na árvore visual para encontrar o elemento de interface do usuário que está procurando. Portanto, no Windows, a janela Árvore Visual Dinâmica tem algumas abordagens que permitem que você use a interface do usuário do aplicativo para ajudar a encontrar o elemento que deseja examinar:

  • Selecione o elemento no aplicativo em execução. Você pode ativar esse modo clicando no botão Selecionar elemento no aplicativo em execução na barra de ferramentas Árvore Visual Dinâmica:

    Captura de tela do botão Selecionar elemento no aplicativo em execução na barra de ferramentas Árvore Visual Dinâmica.

    Com esse modo ativado, quando você puder selecionar um elemento da interface do usuário no aplicativo, a janela Árvore Visual Dinâmica será atualizada automaticamente para mostrar o nó na árvore correspondente a esse elemento.

  • Exibir adornos de layout no aplicativo em execução. Você pode ativar esse modo clicando no botão Exibir adornos de layout no aplicativo em execução na barra de ferramentas Árvore Visual Dinâmica:

    Captura de tela do botão Exibir adornos de layout no aplicativo em execução na barra de ferramentas Árvore Visual Dinâmica.

    Quando este modo estiver ativado, a janela do aplicativo mostrará 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 ativar esse modo clicando no botão Visualizar item selecionado na barra de ferramentas Árvore Visual Dinâmica:

    Captura de tela do botão Visualizar item selecionado na barra de ferramentas Árvore Visual Dinâmica.

    Esse modo mostra o código-fonte de XAML em que o elemento foi declarado, se você tiver acesso ao código-fonte do aplicativo.