Membuat antarmuka pengguna menggunakan XAML Designer
Perancang XAML di Visual Studio dan Blend for Visual Studio menyediakan antarmuka visual untuk membantu Anda mendesain aplikasi berbasis XAML, seperti WPF dan UWP. Anda dapat membuat antarmuka pengguna untuk aplikasi Anda dengan menyeret kontrol dari jendela Toolbox (jendela Aset di Blend for Visual Studio) dan mengatur properti di jendela Properti. Anda juga dapat mengedit XAML secara langsung dalam tampilan XAML.
Untuk pengguna tingkat lanjut, Anda bahkan dapat menyesuaikan XAML Designer.
Catatan
Xamarin.Forms tidak mendukung perancang XAML. Untuk melihat antarmuka pengguna Xamarin.Forms XAML Anda dan mengeditnya saat aplikasi sedang berjalan, gunakan XAML Hot Reload untuk Xamarin.Forms. Untuk informasi selengkapnya, lihat halaman XAML Hot Reload untuk Xamarin.Forms (Pratinjau).
Catatan
Perancang WinUI 3 / .NET MAUI XAML tidak didukung di Visual Studio 2022. Untuk melihat UI WinUI 3 / .NET MAUI XAML Anda dan mengeditnya saat aplikasi sedang berjalan, gunakan XAML Hot Reload untuk WinUI 3 / .NET MAUI. Untuk informasi selengkapnya, lihat halaman XAML Hot Reload .
Ruang kerja XAML Designer
Ruang kerja di XAML Designer terdiri dari beberapa elemen antarmuka visual. Ini termasuk artboard (yang merupakan permukaan desain visual), editor XAML, jendela Kerangka Dokumen (jendela Objek dan Garis Waktu di Blend for Visual Studio), dan jendela Properti. Untuk membuka XAML Designer, klik kanan file XAML di Penjelajah Solusi dan pilih View Designer.
XAML Designer menyediakan tampilan XAML dan tampilan Desain yang disinkronkan dari markup XAML yang dirender aplikasi Anda. Dengan file XAML terbuka di Visual Studio atau Blend for Visual Studio, Anda dapat beralih antara tampilan Desain dan tampilan XAML menggunakan tab Desain dan XAML. Anda dapat menggunakan tombol 
Tukar Panel untuk mengalihkan jendela mana yang muncul di atas: artboard atau editor XAML.
Tampilan desain
Dalam tampilan Desain, jendela yang berisi artboard adalah jendela aktif dan Anda dapat menggunakannya sebagai permukaan kerja utama. Anda dapat menggunakannya untuk mendesain halaman secara visual di aplikasi Anda dengan menambahkan, menggambar, atau mengubah elemen. Untuk informasi selengkapnya, lihat Bekerja dengan elemen di XAML Designer. Ilustrasi ini menunjukkan artboard dalam tampilan Desain.
Fitur-fitur ini tersedia di artboard:
Snapline
Snapline adalah batas perataan yang muncul sebagai garis putus-putus merah untuk ditampilkan saat edge kontrol diratakan atau saat garis dasar teks diratakan. Batas perataan hanya muncul saat melekatkan ke snapline diaktifkan.
Rel kisi
Rel kisi digunakan untuk mengelola baris dan kolom dalam panel Kisi. Anda dapat membuat dan menghapus baris dan kolom, dan Anda dapat menyesuaikan lebar dan tinggi relatifnya. Rel Grid vertikal, yang muncul di sebelah kiri artboard, digunakan untuk baris, dan garis horizontal, yang muncul di atas, digunakan untuk kolom.
Adorner Kisi
Adorner Kisi muncul sebagai segitiga yang memiliki garis vertikal atau horizontal yang terlampir padanya pada rel Grid. Saat Anda menyeret adorner Kisi, lebar atau tinggi kolom atau baris yang berdekatan diperbarui saat Anda menggerakkan mouse.
Adorner Kisi digunakan untuk mengontrol lebar dan tinggi baris dan kolom Kisi. Anda dapat menambahkan kolom atau baris baru dengan mengeklik di rel Kisi. Saat Anda menambahkan baris atau garis kolom baru untuk panel Kisi yang memiliki dua atau lebih kolom atau baris, toolbar mini muncul di luar rel yang memungkinkan Anda untuk mengatur lebar dan tinggi secara eksplisit. Toolbar mini memungkinkan Anda untuk mengatur pilihan ukuran untuk baris dan kolom Kisi.
Handel ubah ukuran
Handel ubah ukuran muncul pada kontrol yang dipilih dan memungkinkan Anda untuk mengubah ukuran kontrol. Saat Anda mengubah ukuran kontrol, nilai lebar dan tinggi biasanya muncul untuk membantu Anda mengukur kontrol. Untuk informasi selengkapnya tentang memanipulasi kontrol dalam tampilan Desain, lihat Bekerja dengan elemen di XAML Designer.
Margin
Margin mewakili jumlah ruang tetap antara edge kontrol dan edge kontainernya. Anda bisa mengatur margin kontrol menggunakan properti Margin di bagian Tata Letak di jendela Properti.
Adorner margin
Gunakan adorner margin untuk mengubah margin elemen relatif terhadap kontainer tata letaknya. Saat adorner margin terbuka, margin tidak diatur dan adorner margin menampilkan rantai yang putus. Saat margin tidak diatur, elemen tetap di tempatnya saat kontainer tata letak diubah ukurannya pada durasi. Saat adorner margin ditutup, adorner margin menampilkan rantai yang tidak terputus, dan elemen bergerak dengan margin saat kontainer tata letak diubah ukurannya pada durasi (margin tetap).
Handel elemen
Anda dapat mengubah elemen menggunakan handel elemen yang muncul di artboard saat Anda memindahkan pointer ke sudut kotak biru yang mengelilingi elemen. Handel ini memungkinkan Anda untuk memutar, mengubah ukuran, membalik, memindahkan, atau menambahkan radius sudut ke elemen. Simbol untuk handel elemen bervariasi berdasarkan fungsi dan perubahan tergantung pada lokasi pointer yang tepat. Jika Anda tidak melihat handel elemen, pastikan elemen dipilih.
Dalam tampilan Desain, perintah artboard tambahan tersedia di area kiri bawah jendela, seperti yang ditunjukkan di sini:
Perintah-perintah ini tersedia di toolbar ini:
Zoom
Perbesar tampilan memungkinkan Anda mengukur permukaan desain. Anda dapat memperbesar tampilan dari 12,5% menjadi 800% atau memilih opsi seperti Sesuaikan pilihan dan Sesuaikan semua.
Tampilkan/Sembunyikan kisi lekat
Menampilkan atau menyembunyikan kisi lekat yang memperlihatkan garis kisi. Garis kisi digunakan saat Anda mengaktifkan melekatkan ke garis kisi atau melekatkan ke snapline.
Mengaktifkan/menonaktifkan pelekatan ke garis kisi
Jika melekatkan ke garis kisi diaktifkan, elemen cenderung rata dengan garis kisi horizontal dan vertikal terdekat saat Anda menyeretnya ke artboard.
Menghidupkan/mematikan latar belakang artboard
Beralih antara latar belakang terang dan gelap.
Mengaktifkan/menonaktifkan pelekatan ke snapline
Snapline membantu Anda meratakan kontrol relatif satu sama lain. Jika melekatkan ke snapline diaktifkan, saat Anda menyeret kontrol relatif terhadap kontrol lain, batas perataan muncul saat edge dan teks beberapa kontrol diratakan secara horizontal atau vertikal. Batas perataan muncul sebagai garis putus-putus merah.
Menonaktifkan kode proyek
Menonaktifkan kode proyek, misalnya, kontrol kustom dan pengonversi nilai, dan memuat ulang perancang.
Tampilan XAML
Dalam tampilan XAML, jendela yang berisi editor XAML adalah jendela yang aktif, dan editor XAML adalah alat penulisan utama Anda. Extensible Application Markup Language (XAML) menyediakan kosakata berbasis XML deklaratif untuk menentukan antarmuka pengguna aplikasi. Tampilan XAML mencakup IntelliSense, pemformatan otomatis, penyorotan sintaksis, dan navigasi tag. Gambar berikut menunjukkan tampilan XAML dengan menu IntelliSense terbuka:
Jendela Kerangka Dokumen
Jendela Kerangka Dokumen di Visual Studio mirip dengan jendela Objek dan Garis Waktu di Blend for Visual Studio. Kerangka Dokumen membantu Anda melakukan tugas berikut:
Melihat struktur hierarki semua elemen di artboard.
Memilih elemen sehingga Anda dapat mengubahnya. Misalnya, Anda dapat memindahkannya dalam hierarki atau mengatur propertinya di jendela Properti. Untuk informasi selengkapnya, lihat Bekerja dengan elemen di XAML Designer.
Membuat dan mengubah templat untuk elemen yang merupakan kontrol.
Membuat animasi (khusus Blend for Visual Studio).
Untuk melihat jendela Kerangka Dokumen di Visual Studio, pada bilah menu pilih Lihat>Jendela Lainnya>Kerangka Dokumen. Untuk melihat jendela Objek dan Garis Waktu di Blend for Visual Studio, pada bilah menu pilih Lihat>Kerangka Dokumen.
Tampilan utama di jendela Kerangka Dokumen/Objek dan Garis Waktu menampilkan hierarki dokumen dalam struktur pohon. Anda dapat menggunakan sifat hierarki kerangka dokumen untuk memeriksa dokumen pada berbagai tingkat detail dan untuk mengunci dan menyembunyikan elemen secara tunggal atau dalam grup. Opsi berikut ini tersedia di jendela Kerangka Dokumen/Objek dan Garis Waktu:
Perlihatkan/sembunyikan
Menampilkan atau menyembunyikan elemen artboard. Muncul sebagai simbol mata saat diperlihatkan. Anda juga dapat menekan Ctrl+H untuk menyembunyikan elemen dan Shift+Ctrl+H untuk memperlihatkannya.
Kunci/buka kunci
Mengunci atau membuka kunci elemen artboard. Elemen terkunci tidak dapat diubah. Muncul sebagai simbol gembok saat terkunci. Anda juga dapat menekan Ctrl+L untuk mengunci elemen dan Shift+Ctrl+L untuk membuka kuncinya.
Kembalikan cakupan ke pageRoot
Opsi di bagian atas jendela Kerangka Dokumen/Objek dan Garis Waktu, yang memperlihatkan simbol panah atas, berpindah ke cakupan sebelumnya. Cakupan hanya berlaku jika Anda berada dalam cakupan gaya atau templat.
Jendela properti
Jendela Properti memungkinkan Anda mengatur nilai properti pada kontrol. Berikut tampilannya:
Ada berbagai opsi di bagian atas jendela Properti:
- Ubah nama elemen yang saat ini dipilih di kotak Nama.
- Di sudut kiri atas, ada ikon yang mewakili elemen yang saat ini dipilih.
- Untuk menyusun properti menurut kategori atau menurut abjad, klik Kategori, Nama, atau Sumber dalam daftar Susun menurut.
- Untuk melihat daftar peristiwa untuk kontrol, klik tombol Peristiwa, yang muncul sebagai simbol petir.
- Untuk mencari properti, mulailah mengetik nama properti di kotak pencarian. Jendela Properti menampilkan properti yang cocok dengan pencarian saat Anda mengetik.
Beberapa properti memungkinkan Anda mengatur properti tingkat lanjut dengan memilih tombol panah bawah.
Di sebelah kanan setiap nilai properti terdapat penanda properti yang muncul sebagai simbol kotak. Munculnya penanda properti menunjukkan apakah ada pengikatan data atau sumber daya yang diterapkan ke properti. Misalnya, simbol kotak putih menunjukkan nilai default, simbol kotak hitam biasanya menunjukkan bahwa sumber daya lokal telah diterapkan, dan kotak oranye biasanya menunjukkan pengikatan data telah diterapkan. Saat Anda mengeklik penanda properti, Anda dapat membuka definisi gaya, membuka pembuat pengikatan data, atau membuka pemilih sumber daya.
Untuk informasi selengkapnya tentang menggunakan properti dan menangani peristiwa, lihat Pengantar kontrol dan pola.