Udostępnij za pośrednictwem


Xamarin.Forms dynamiczne drzewo wizualizacji

Możesz otrzymać widok działającego kodu XAML w czasie rzeczywistym za pomocą dynamicznego drzewa wizualnego. Przedstawia widok drzewa elementów interfejsu użytkownika uruchomionej Xamarin.Forms aplikacji.

Wymagania

  • Użyj Xamarin.Forms wersji 5.0 lub nowszej.
  • Zmiany mają włączone tylko Przeładowywanie na gorąco (domyślnie włączone).

Użycie

Po spełnieniu wymagań debugowanie aplikacji i okna Dynamiczne drzewo wizualne spowoduje wyświetlenie hierarchii interfejsu użytkownika środowiska uruchomieniowego aplikacji.

  • Windows: domyślnie jest wyświetlany po lewej stronie środowiska IDE. Jeśli go nie widzisz, użyj debugowania drzewa wizualnego > Windows > Live, aby go wyświetlić.
  • Komputer Mac: domyślnie jest wyświetlany po prawej stronie środowiska IDE. Jeśli go nie widzisz, użyj polecenia Wyświetl > debugowanie drzewa wizualnego Windows > Live, aby go wyświetlić.

Użyj widoku drzewa, aby sprawdzić hierarchię interfejsu użytkownika środowiska uruchomieniowego dla aplikacji, rozwijając/zwijając węzły, aby skoncentrować się na określonych częściach interfejsu użytkownika.

Pasek narzędzi drzewa wizualizacji na żywo

Widok elementów XAML jest domyślnie uproszczony przy użyciu funkcji Just My XAML . Aby wyświetlić wszystkie elementy interfejsu użytkownika, przełącz przycisk Pokaż tylko mój kod XAML po prawej stronie na pasku narzędzi Live Visual Tree. Jeśli chcesz wyłączyć to ustawienie w opcjach, aby zawsze wyświetlać wszystkie elementy XAML.

Uwaga

Visual Studio dla komputerów Mac obecnie nie obsługuje Tylko moja funkcja XAML.

Struktura kodu XAML ma wiele elementów, których prawdopodobnie nie interesujeSz się bezpośrednio, a jeśli nie znasz kodu, możesz mieć trudności z poruszaniem się po drzewie, aby znaleźć to, czego szukasz. W związku z tym dynamiczne drzewo wizualne ma wiele podejść, które umożliwiają korzystanie z interfejsu użytkownika aplikacji w celu ułatwienia znalezienia elementu, który chcesz zbadać.

Wybierz element w uruchomionej aplikacji (obecnie obsługiwane tylko dla aplikacji platformy UWP). Ten tryb można włączyć po wybraniu najbardziej lewego przycisku na pasku narzędzi Live Visual Tree . W tym trybie można wybrać element interfejsu użytkownika w aplikacji, a dynamiczne drzewo wizualne automatycznie aktualizuje, aby wyświetlić węzeł w drzewie odpowiadającym temu elementowi i jego właściwościom.

Wyświetlanie modułów adoratorów układu w uruchomionej aplikacji (obecnie obsługiwane tylko w przypadku aplikacji platformy UWP). Ten tryb można włączyć po wybraniu przycisku, który znajduje się tuż obok po prawej stronie przycisku Włącz zaznaczanie. Gdy moduły układów wyświetlania są włączone, powoduje to, że okno aplikacji wyświetla linie poziome i pionowe wzdłuż granic wybranego obiektu, dzięki czemu można zobaczyć, do czego jest wyrównany, a także prostokąty pokazujące marginesy.

Podgląd zaznaczenia. Możesz włączyć ten tryb, wybierając trzeci przycisk po lewej stronie na pasku narzędzi Live Visual Tree. W tym trybie jest wyświetlany kod XAML, w którym zadeklarowano element, jeśli masz dostęp do kodu źródłowego aplikacji.