Memeriksa properti XAML saat melakukan penelusuran kesalahan

Anda bisa mendapatkan tampilan real time dari kode XAML yang sedang berjalan dengan Pohon Visual Langsung dan Penjelajah Properti Langsung. Alat ini memberi Anda tampilan pohon elemen UI dari aplikasi XAML yang sedang berjalan, dan menunjukkan semua properti runtime elemen UI yang Anda pilih.

Anda dapat menggunakan alat ini dalam konfigurasi berikut:

Jenis Aplikasi	Sistem Operasi dan Alat
Aplikasi Windows Presentation Foundation (4.0 dan yang lebih baru)	Windows 7 dan yang lebih baru
Aplikasi Universal Windows	Windows 10 dan yang lebih baru, dengan SDK Windows 10 dan yang lebih baru
Aplikasi UI Aplikasi Multi-platform .NET	Windows 10 dan yang lebih baru, .NET 8 dan yang lebih baru, Visual Studio 2022 17.9 dan yang lebih baru

Lihat Elemen di Pohon Visual Langsung

Mari kita mulai dengan aplikasi WPF yang sangat sederhana, yang memiliki tampilan daftar dan tombol. Setiap kali Anda mengeklik tombol, item lain ditambahkan ke daftar. Item bernomor genap berwarna abu-abu, dan item bernomor ganjil berwarna kuning.

Membuat proyek

Buat aplikasi C# WPF baru (File>Proyek Baru>, ketik "C# WPF", pilih templat proyek Aplikasi WPF, beri nama proyek TestXAML, lalu verifikasi bahwa versi .NET yang benar muncul di drop-down Kerangka Kerja Target).

Ubah MainWindow.xaml menjadi berikut:

<Window x:Class="TestXAML.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local="clr-namespace:TestXAML"
   mc:Ignorable="d"
   Title="MainWindow" Height="350" Width="525">
   <Grid>
      <Button x:Name="button" Background="LightBlue" Content="Add Item" HorizontalAlignment="Left" Margin="216,206,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
      <ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="205,80,0,0"/>
   </Grid>
</Window>

Tambahkan penangan perintah berikut ke file MainWindow.xaml.cs:

int count;

private void button_Click(object sender, RoutedEventArgs e)
{
   ListBoxItem item = new ListBoxItem();
   item.Content = "Item" + ++count;
   if (count % 2 == 0)
   {
      item.Background = Brushes.LightGray;
   }
   else
   {
      item.Background = Brushes.LightYellow;
   }
   listBox.Items.Add(item);
}

Bangun proyek dan mulai penelusuran kesalahan. (Konfigurasi build harus Debug, bukan Rilis. Untuk informasi selengkapnya tentang konfigurasi build, lihat Memahami Konfigurasi Build.)

Saat jendela muncul, Anda akan melihat toolbar dalam aplikasi muncul dalam aplikasi yang sedang berjalan.
Sekarang, klik tombol Tambahkan Item beberapa kali untuk menambahkan item baru ke dalam daftar.

Memeriksa properti XAML

Selanjutnya, buka jendela Pohon Visual Langsung dengan mengeklik tombol di sebelah kiri toolbar dalam aplikasi (atau dengan masuk ke Debug > Windows > Pohon Visual Langsung). Setelah terbuka, seret menjauh dari posisi docking-nya sehingga kita dapat melihat jendela ini dan jendela Properti Langsung berdampingan.
Di jendela Pohon Visual Langsung, perluas node ContentPresenter. Ini harus berisi simpul untuk tombol dan kotak daftar. Perluas kotak daftar (lalu ScrollContentPresenter dan ItemPresenter) untuk menemukan item kotak daftar.

Jika Anda tidak melihat node ContentPresenter, alihkan ikon Tampilkan XAML Saya Saja pada toolbar. Mulai Visual Studio 2019 versi 16.4, tampilan elemen XAML disederhanakan secara default menggunakan fitur XAML Saya Saja. Anda juga dapat menonaktifkan pengaturan ini dalam opsi untuk selalu menampilkan semua elemen XAML.

Jendela akan terlihat seperti ini:
Kembali ke jendela aplikasi dan tambahkan beberapa item lagi. Anda akan melihat item kotak daftar lainnya muncul di Pohon Visual Langsung.
Sekarang, mari kita lihat properti salah satu item kotak daftar.

Pilih item kotak daftar pertama di Pohon Visual Langsung dan klik ikon Perlihatkan Properti pada toolbar. Penjelajah Properti Langsung akan muncul. Perhatikan bahwa bidang Konten adalah "Item1", dan bidang Warna>Latar Belakang adalah #FFFFFFE0.
Kembali ke Pohon Visual Langsung dan pilih item kotak daftar kedua. Penjelajah Properti Langsung harus menunjukkan bahwa bidang Konten adalah "Item2", dan bidang Warna>Latar Belakang adalah #FFD3D3D3 (bergantung pada tema).

Catatan

Batas kuning di sekitar properti di Penjelajah Properti Langsung berarti bahwa nilai properti diatur melalui pengikatan, seperti Color = {BindingExpression}. Batas hijau berarti bahwa nilai diatur menggunakan sumber daya, seperti Color = {StaticResource MyBrush}.

Struktur sebenarnya dari XAML memiliki banyak elemen yang mungkin tidak Anda minati secara langsung, dan jika Anda tidak tahu kode dengan baik, Anda mungkin kesulitan menavigasi pohon untuk menemukan apa yang Anda cari. Jadi Pohon Visual Langsung memiliki beberapa cara yang memungkinkan Anda menggunakan UI aplikasi guna membantu Anda menemukan elemen yang ingin Anda periksa.

Pilih Elemen di Aplikasi yang Sedang Berjalan. Anda dapat mengaktifkan mode ini ketika Anda memilih tombol ini pada toolbar Live Visual Tree . Dengan mode ini aktif, Anda dapat memilih elemen UI dalam aplikasi, dan Pohon Visual Langsung (dan Penampil Properti Langsung) secara otomatis diperbarui untuk menampilkan simpul di pohon yang sesuai dengan elemen tersebut, dan propertinya. Mulai Visual Studio 2019 versi 16.4, Anda dapat mengonfigurasi perilaku pemilihan elemen.

Tampilkan Penata Tata Letak di Aplikasi yang Sedang Berjalan. Anda dapat mengaktifkan mode ini ketika Anda memilih tombol yang segera berada di sebelah kanan tombol Pilih elemen... . Saat tampilan Tampilkan penata tata letak menyala, hal ini menyebabkan jendela aplikasi memperlihatkan garis horizontal dan vertikal di sepanjang batas objek yang dipilih sehingga Anda dapat melihat apa yang diratakannya, serta persegi yang memperlihatkan margin. Misalnya, nyalakan tata letak Pilih elemen dan Tampilkan elemen, dan pilih blok teks Tambahkan Item di aplikasi. Anda akan melihat simpul blok teks di Pohon Visual Langsung dan properti blok teks di Penampil Properti Langsung, serta garis horizontal dan vertikal pada batas blok teks.

Lacak Elemen Terfokus. Anda dapat mengaktifkan mode ini dengan memilih tombol ini pada toolbar Live Visual Tree. Mode ini menunjukkan XAML tempat elemen dideklarasikan, jika Anda memiliki akses ke kode sumber aplikasi. Pilih Pilih elemen dan Lacak Elemen Terfokus, lalu Anda memilih tombol di aplikasi pengujian kami. File MainWindow.xaml terbuka di Visual Studio dan kursor ditempatkan pada baris tempat tombol ditentukan.

Menggunakan alat XAML dengan aplikasi yang sedang berjalan

Anda dapat menggunakan alat XAML ini bahkan saat tidak memiliki kode sumber. Saat melampirkan ke aplikasi XAML yang sedang berjalan, Anda juga dapat menggunakan Pohon Visual Langsung pada elemen UI aplikasi tersebut. Berikut adalah contohnya, menggunakan aplikasi pengujian WPF yang sama dengan yang kami gunakan sebelumnya.

Mulai aplikasi TestXaml dalam konfigurasi Rilis. Anda tidak dapat melampirkan ke proses yang berjalan dalam konfigurasi Debug.
Buka instans kedua Visual Studio dan klik Debug > Lampirkan ke Proses. Temukan TestXaml.exe dalam daftar proses yang tersedia, dan klik Lampirkan.
Aplikasi mulai berjalan.
Dalam instans kedua Visual Studio, buka Pohon Visual Langsung (Debug > Windows > Pohon Visual Langsung). Anda akan melihat elemen UI TestXaml, dan Anda harus dapat memanipulasinya seperti yang Anda lakukan saat menelusuri kesalahan aplikasi secara langsung.

Menulis dan menelusuri kesalahan saat menjalankan kode XAML dengan XAML Hot Reload

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-12-12