Xamarin.Forms árvore visual dinâmicaXamarin.Forms live visual tree

Você pode receber uma exibição em tempo real de seu código XAML em execução com a árvore visual ativa.You can receive a real-time view of your running XAML code with the Live Visual Tree. Ele mostra uma exibição de árvore dos elementos da interface do usuário de seu aplicativo em execução Xamarin.Forms .It shows a tree view of the UI elements of your running Xamarin.Forms application.

RequisitosRequirements

  • Use Xamarin.Forms 5,0 ou mais recente.Use Xamarin.Forms 5.0 or newer.
  • Têm alterações apenas de Recarregamento automático habilitado (habilitada por padrão).Have changes only Hot Reload enabled (it's enabled by default).

UsoUsage

Com os requisitos atendidos, Depure seu aplicativo e a janela de árvore visual ao vivo mostrarão a hierarquia de IU de tempo de execução do seu aplicativo.With the requirements met, debug your app and Live Visual Tree window will show the runtime UI hierarchy of your app.

  • Windows: por padrão, ele aparece na esquerda do IDE.Windows: By default, it appears on the IDE's left. Se você não o vir, use Debug > árvore visual do Windows > Live para mostrá-lo.If you don't see it, use Debug > Windows > Live Visual Tree to show it.
  • Mac: por padrão, ele aparece no direito do IDE.Mac: By default, it appears on the IDE's right. Se você não o vir, use o modo de exibição > depurar o Windows > árvore visual ao vivo para mostrá-lo.If you don't see it, use View > Debug Windows > Live Visual Tree to show it.

Use a exibição de árvore para inspecionar a hierarquia da interface do usuário de tempo de execução para seu aplicativo, expandindo/recolhendo nós para se concentrar em partes específicas da interface do usuário.Use the tree view to inspect the runtime UI hierarchy for your app, expanding/collapsing nodes to focus on particular parts of the UI.

Barra de ferramentas da árvore visual ativaLive visual tree toolbar

A exibição de elementos XAML é simplificada por padrão usando apenas o meu recurso XAML .The view of XAML elements is simplified by default using the Just My XAML feature. Alterne o botão Mostrar apenas meu XAML , na extrema direita na barra de ferramentas da árvore visual ao vivo, para mostrar todos os elementos da interface do usuário.Toggle the Show Just My XAML button, rightmost on the Live Visual Tree toolbar, to show all UI elements. Se desejar, você pode desabilitar essa configuração em opções para sempre mostrar todos os elementos XAML.If you wish you can disable this setting in options to always show all XAML elements.

Observação

No momento, o Visual Studio para Mac não dá suporte ao recurso apenas meu XAML .Visual Studio for Mac doesn't currently support the Just My XAML feature.

A estrutura do XAML tem muitos elementos dos quais você provavelmente não está interessado diretamente e, se você não souber o código, poderá ter um tempo rígido para navegar pela árvore e encontrar o que está procurando.The structure of the XAML has a lot of elements that you're probably not directly interested in, and if you don't know the code well you might have a hard time navigating the tree to find what you're looking for. Portanto, a árvore visual ativa tem várias abordagens que permitem que você use a interface do usuário do aplicativo para ajudá-lo a encontrar o elemento que deseja examinar.Therefore, the Live Visual Tree has multiple approaches that let you use the application's UI to help you find the element you want to examine.

Selecione o elemento no aplicativo em execução (atualmente só tem suporte para aplicativos UWP).Select element in the running application (currently only supported for UWP apps). Você pode habilitar esse modo quando seleciona o botão mais à esquerda na barra de ferramentas da árvore visual ativa .You can enable this mode when you select the leftmost button on the Live Visual Tree toolbar. Com esse modo ativado, você pode selecionar um elemento de interface do usuário no aplicativo e a árvore visual ativa é atualizada automaticamente para mostrar o nó na árvore correspondente a esse elemento e suas propriedades.With this mode on, you can select a UI element in the application, and the Live Visual Tree automatically updates to show the node in the tree corresponding to that element, and its properties.

Exibir adorners de layout no aplicativo em execução (atualmente, há suporte apenas para aplicativos UWP).Display layout adorners in the running application (currently only supported for UWP apps). Você pode habilitar esse modo ao selecionar o botão que está imediatamente à direita do botão habilitar seleção.You can enable this mode when you select the button that is immediately to the right of the Enable selection button. Quando o layout de exibição adorners está ativado, faz com que a janela do aplicativo mostre linhas horizontais e verticais ao longo dos limites do objeto selecionado para que você possa ver o que ele alinha, bem como os retângulos que mostram as margens.When Display layout adorners is on, it causes the application window to show horizontal and vertical lines along the bounds of the selected object so you can see what it aligns to, as well as rectangles showing the margins.

Visualizar Seleção.Preview Selection. Você pode habilitar esse modo selecionando o terceiro botão à esquerda na barra de ferramentas da árvore visual ao vivo.You can enable this mode by selecting the third button from the left on the Live Visual Tree toolbar. Esse modo mostra o XAML em que o elemento foi declarado, se você tiver acesso ao código-fonte do aplicativo.This mode shows the XAML where the element was declared, if you have access to the source code of the application.