Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Dengan Pratinjau Langsung XAML, Anda dapat mengambil antarmuka pengguna (UI) aplikasi desktop dan membawanya ke jendela yang ditambakan dalam Visual Studio, yang memudahkan penggunaan XAML Hot Reload untuk mengubah aplikasi lalu melihat perubahan tersebut secara real time saat Anda membuatnya.
Jendela Pratinjau Langsung XAML
Jendela Pratinjau Langsung XAML tersedia selama proses debugging. Untuk membukanya, buka Debug>Windows>XAML Live Preview.
Mulai dari Visual Studio 2022 versi 17.14 Pratinjau 2, XAML Live Preview dan XAML Hot Reload tersedia saat waktu desain dan bukan hanya selama sesi debugging.
Atau, pilih tombol Tampilkan di Pratinjau Langsung XAML di toolbar aplikasi.
Menggulir dan memperbesar
Selain menggulir dengan bilah gulir, Anda juga dapat menggunakan interaksi berikut:
- Roda mouse, baik vertikal maupun horizontal (jika mouse Anda mendukungnya).
- Gulir menggunakan dua jari pada touchpad, baik vertikal maupun horizontal.
- Tombol Ctrl ditekan dipadukan dengan tindakan seret mouse.
Sedangkan untuk memperbesar tampilan, Anda juga dapat menggunakan interaksi berikut:
- Tombol Perbesar/perkecil di sudut kiri bawah.
- Pintasan keyboard Ctrl+tanda plus (+) atau Ctrl+tanda minus (-), jika Anda lebih suka menggunakan keyboard.
- Tekan tombol Ctrl dipasangkan dengan memutar roda mouse, atau gerakan menjepit untuk memperbesar dengan touchpad. Tambahan bonus menggunakan mouse adalah menjaga area kontrol.
Pilihan elemen
Pemilihan elemen dalam Pratinjau Langsung XAML mirip dengan pilihan dalam aplikasi yang sedang berjalan. Ini memungkinkan Anda untuk menemukan elemen di Live Visual Tree atau di sumber XAML.
Pemilihan elemen dikontrol oleh empat tombol toolbar pertama (dari kiri ke kanan).
Tombol toolbar menghasilkan tindakan berikut:
- Pemilihan elemen memulai tindakan pemilihan elemen; dengan kata lain, ini menyoroti elemen saat Anda memindahkan mouse Anda melalui konten aplikasi di Pratinjau Langsung XAML. Saat Anda mengeklik elemen, elemen dipilih di Live Visual Tree. Ini juga menavigasi ke sumber jika Pratinjau Elemen yang Dipilih diaktifkan, dan XAML sumber tersedia. Perilaku ini sama dengan yang ada di Live Visual Tree.
- Tampilkan info elemen saat pemilihan adalah tombol alih yang mengontrol tampilan informasi ukuran, warna, dan font tentang elemen di bawah kursor mouse Anda.
- Just My XAML adalah tombol pengalih yang mengontrol elemen mana yang akan disorot: semua, atau hanya elemen dengan XAML sumber yang tersedia dalam solusi. Perilaku ini sama dengan yang ada di Live Visual Tree.
- Pratayang Item Terpilih adalah tombol alih yang mengontrol navigasi ke sumber XAML ketika sebuah elemen dipilih. Ini nonaktif secara default. Perilaku ini sama dengan yang ada di Live Visual Tree.
Penguasa
Penggaris membantu Anda menyelaraskan elemen dalam aplikasi Anda. Mereka menampilkan jarak, di unit aplikasi, ke penggaris sebelumnya. Dengan cara ini, mereka membantu memverifikasi jarak antara berbagai bagian aplikasi Anda.
Grup kedua tombol toolbar mengontrol penggaris, sebagai berikut (dari kiri ke kanan):
- Tambahkan penggaris vertikal. Menambahkan satu penggaris vertikal. Jika Anda mengklik tombol ini beberapa kali berturut-turut, tombol ini akan menempatkan penggaris baru sehingga tidak tumpang tindih dengan penggaris yang ada.
- Tambahkan penggaris horizontal. Menambahkan penggaris horizontal tunggal, mirip dengan penggaris vertikal.
- Hapus semua penggaris. Menghapus semua penggaris pada waktunya.
- Pilih warna penggaris. Mengubah warna penggaris.
- Alihkan visibilitas penggaris. Menyembunyikan atau memperlihatkan semua penggaris dengan satu klik.
Penggaris ramah keyboard. Anda dapat menggunakan tombol tab untuk mengelilingi mereka. Anda dapat menggunakan tombol panah untuk memindahkan penggaris satu piksel sekali, atau tekan Ctrl bersama tombol panah untuk memindahkannya sebesar 10 unit per aplikasi sekali waktu. Tombol Del menghapus penggaris yang saat ini dipilih. Anda juga dapat menghapus penggaris dengan mouse dengan memilih tombol Hapus Penggaris di dekat label.
Anda juga dapat menambahkan penggaris di sekitar elemen saat menggunakan Pilihan Elemen. Klik kanan menambahkan penggaris vertikal. Untuk menambahkan penggaris horizontal, pilih dan tahan tombol Shift saat Anda mengklik kanan.
Aplikasi multi-jendela
Jika aplikasi Anda memiliki beberapa jendela, maka Anda dapat memilih jendela mana yang akan ditampilkan dengan menggunakan kotak kombo Jendela. Atau, gunakan tombol Tampilkan di Pratinjau Langsung XAML di toolbar aplikasi yang ada di jendela yang ingin Anda pratinjau.
Platform yang didukung
Rilis awal Visual Studio 2022 mendukung platform dan skenario debugging berikut.
| Plattform | Pemilihan Elemen & Tip Informasi | Penguasa |
|---|---|---|
| WPF (Windows Presentation Foundation) | Ya | Ya |
| UWP (Universal Windows Platform) | Ya | Ya |
| Desktop WinUI3 | Ya | Ya |
| .NET MAUI | Ya | Ya |
| Xamarin 5.0+ (Emulator Android) | Tidak. | Ya (px*) |
Nota
Dalam tabel sebelumnya, (px*) menunjukkan penggaris yang ditunjukkan dalam piksel; semua platform lain menampilkan info dalam satuan platform, yang bergantung pada DPI monitor.
Keterbatasan
Pratinjau Langsung XAML berfungsi dengan menangkap cuplikan layar aplikasi beberapa kali sedetik, dan menggunakan API yang tersedia seperti PrintWindow. Ini tunduk pada batasan berikut:
- Jika bagian dari jendela aplikasi di luar layar, maka bagian tersebut tidak mungkin menampilkan perubahan XAML Hot Reload.
- Jendela dapat menolak pengambilan cuplikan layar—dan menjadi tidak tersedia untuk Pratinjau Langsung XAML—dengan menggunakan SetWindowDisplayAffinity dengan WDA_EXCLUDEFROMCAPTURE atau DwmSetWindowAttribute dengan DWMWA_CLOAK.
Langkah selanjutnya
Pelajari lebih lanjut tentang XAML Hot Reload, yang dipasangkan erat dengan XAML Live Preview.