Sprawdzanie drzewa wizualnego aplikacji MAUI platformy .NET

Wieloplatformowy interfejs użytkownika aplikacji platformy .NET (.NET MAUI) Live Visual Tree to funkcja programu Visual Studio, która udostępnia widok drzewa elementów interfejsu użytkownika w uruchomionej aplikacji .NET MAUI.

Po uruchomieniu aplikacji .NET MAUI w konfiguracji debugowania z dołączonym debugerem można otworzyć okno Live Visual Tree (Dynamiczne drzewo wizualne), wybierając pozycję Debuguj > drzewo wizualne Windows > Live na pasku menu programu Visual Studio:

Jeśli Przeładowywanie na gorąco jest włączona, w oknie Live Visual Tree zostanie wyświetlona hierarchia elementów interfejsu użytkownika aplikacji niezależnie od tego, czy interfejs użytkownika aplikacji jest kompilowany przy użyciu języka XAML czy C#. Należy jednak wyłączyć funkcję Tylko mój kod XAML, aby wyświetlić hierarchię elementów interfejsu użytkownika aplikacji dla interfejsów użytkownika utworzonych przy użyciu języka C#.

Tylko mój kod XAML

Widok elementów interfejsu użytkownika jest domyślnie uproszczony przy użyciu funkcji o nazwie Just My XAML. W programie Visual Studio kliknięcie przycisku Pokaż tylko mój kod XAML powoduje wyłączenie funkcji i wyświetlenie wszystkich elementów interfejsu użytkownika w drzewie wizualizacji:

Po prostu Mój kod XAML można trwale wyłączyć, wybierając pozycję Opcje > debugowania > XAML Przeładowywanie na gorąco na pasku menu programu Visual Studio. Następnie w oknie dialogowym Opcje upewnij się, że opcja Włącz tylko mój kod XAML w dynamicznym drzewie wizualnym jest wyłączona:

Znajdowanie elementu interfejsu użytkownika

Struktura interfejsu użytkownika XAML zawiera wiele elementów, które mogą cię nie zainteresować. Jeśli nie masz pełnego zrozumienia kodu źródłowego aplikacji, może być trudny czas nawigowania po drzewie wizualnym w celu znalezienia szukanego elementu interfejsu użytkownika. W związku z tym w oknie Windows Live Visual Tree (Drzewo wizualne na żywo) istnieje 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. Możesz włączyć ten tryb, klikając przycisk Wybierz element na przycisku Uruchomiona aplikacja na pasku narzędzi Live Visual Tree :

  

  Po włączeniu tego trybu, gdy można wybrać element interfejsu użytkownika w aplikacji, okno Live Visual Tree automatycznie aktualizuje, aby wyświetlić węzeł w drzewie odpowiadającym temu elementowi.

• Wyświetlanie modułów adoratorów układu w uruchomionej aplikacji. Możesz włączyć ten tryb, klikając przycisk Adoratory układu wyświetlania na pasku narzędzi Uruchomiona aplikacja na pasku narzędzi Dynamiczne drzewo wizualne:

  

  Gdy ten tryb jest włączony, powoduje to, że okno aplikacji wyświetla linie poziome i pionowe wzdłuż granic wybranego obiektu, dzięki czemu można zobaczyć, do czego się wyrównuje, a także prostokąty pokazujące marginesy.

• Podgląd zaznaczenia. Możesz włączyć ten tryb, klikając przycisk Podgląd wybranego elementu na pasku narzędzi Dynamiczne drzewo wizualne:

  

  W tym trybie jest wyświetlany kod źródłowy XAML, w którym zadeklarowano element, pod warunkiem, że masz dostęp do kodu źródłowego aplikacji.