Memeriksa pohon visual aplikasi .NET MAUI

.NET Multi-platform App UI (.NET MAUI) Live Visual Tree adalah fitur Visual Studio yang menyediakan tampilan pohon elemen UI di aplikasi .NET MAUI Anda yang sedang berjalan.

Saat aplikasi .NET MAUI Anda berjalan dalam konfigurasi debug, dengan debugger terpasang, jendela Live Visual Tree dapat dibuka dengan memilih Debug > Windows > Live Visual Tree dari bilah menu Visual Studio:

Asalkan Hot Reload diaktifkan, jendela Live Visual Tree akan menampilkan hierarki elemen UI aplikasi Anda terlepas dari apakah UI aplikasi dibuat menggunakan XAML atau C#. Namun, Anda harus menonaktifkan Just My XAML untuk menampilkan hierarki elemen UI aplikasi Anda untuk UI yang dibuat menggunakan C#.

Hanya XAML Saya

Tampilan elemen UI disederhanakan secara default menggunakan fitur yang disebut Just My XAML. Di Visual Studio, mengklik tombol Tampilkan Just My XAML menonaktifkan fitur dan menampilkan semua elemen UI di pohon visual:

Just My XAML dapat dinonaktifkan secara permanen dengan memilih Opsi > Debug > XAML Hot Reload dari bilah menu Visual Studio. Selanjutnya, dalam kotak dialog Opsi , pastikan bahwa Aktifkan Just My XAML di Live Visual Tree dinonaktifkan:

Menemukan elemen UI

Struktur UI XAML memiliki banyak elemen yang mungkin tidak Anda minati, dan jika Anda tidak memiliki pemahaman penuh tentang kode sumber aplikasi, Anda mungkin kesulitan menavigasi pohon visual untuk menemukan elemen UI yang Anda cari. Oleh karena itu, pada Windows jendela Live Visual Tree memiliki beberapa pendekatan yang memungkinkan Anda menggunakan UI aplikasi untuk membantu Anda menemukan elemen yang ingin Anda periksa:

• Pilih elemen dalam aplikasi yang sedang berjalan. Anda dapat mengaktifkan mode ini dengan mengklik tombol Pilih Elemen di Tombol Menjalankan Aplikasi di toolbar Pohon Visual Langsung:

  

  Dengan mode ini diaktifkan, ketika Anda dapat memilih elemen UI di aplikasi, jendela Live Visual Tree secara otomatis diperbarui untuk menampilkan simpul di pohon yang sesuai dengan elemen tersebut.

• Tampilkan penata tata letak dalam aplikasi yang sedang berjalan. Anda dapat mengaktifkan mode ini dengan mengeklik Penata Tata Letak Tampilan di tombol Jalankan Aplikasi di toolbar Pohon Visual Langsung:

  

  Ketika mode ini diaktifkan, hal ini menyebabkan jendela aplikasi menampilkan garis horizontal dan vertikal di sepanjang batas objek yang dipilih sehingga Anda dapat melihat apa yang diratakannya, serta persegi panjang yang memperlihatkan margin.

• Pilihan Pratinjau. Anda dapat mengaktifkan mode ini dengan mengklik tombol Pratinjau Item Terpilih di toolbar Pohon Visual Langsung:

  

  Mode ini menunjukkan kode sumber XAML tempat elemen dideklarasikan, asalkan Anda memiliki akses ke kode sumber aplikasi.