Bekerja dengan elemen di XAML Designer
Anda dapat menambahkan elemen—kontrol, tata letak, dan bentuk—ke aplikasi Anda di XAML, dalam kode, atau dengan menggunakan XAML Designer. Topik ini menjelaskan cara bekerja dengan elemen di XAML Designer di Visual Studio atau Blend untuk Visual Studio.
Menambahkan elemen ke tata letak
Tata letak adalah proses elemen ukuran dan penempatan dalam UI. Untuk memposisikan elemen visual, Anda harus meletakkannya di Panel tata letak. memiliki Panel properti anak yang merupakan kumpulan jenis FrameworkElement . Anda dapat menggunakan berbagai Panel elemen anak, seperti Canvas, StackPanel, dan Grid, untuk berfungsi sebagai kontainer tata letak dan untuk memosisikan dan mengatur elemen pada halaman.
Secara default, Grid panel digunakan sebagai kontainer tata letak tingkat atas dalam halaman atau formulir. Anda dapat menambahkan panel tata letak, kontrol, atau elemen lain dalam tata letak halaman tingkat atas.
Untuk menambahkan elemen ke tata letak di XAML Designer, lakukan salah satu hal berikut ini:
Klik dua kali elemen di Kotak Alat (atau pilih elemen di Kotak Alat dan tekan Enter).
Seret elemen dari Kotak Alat ke artboard.
Di Kotak Alat, pilih salah satu alat gambar (misalnya, Elips atau Persegi), lalu gambar elemen di panel aktif.
Mengubah urutan lapisan elemen
Ketika ada dua elemen pada artboard di XAML Designer, satu elemen akan muncul di depan yang lain dalam urutan lapisan. Di bagian bawah daftar elemen, di jendela Kerangka Dokumen adalah elemen paling depan (kecuali saat properti ZIndex untuk elemen diatur). Saat Anda menyisipkan elemen ke dalam kontainer halaman, formulir, atau tata letak, elemen secara otomatis ditempatkan di depan elemen lain dalam elemen kontainer aktif. Untuk mengubah urutan elemen, Anda bisa menggunakan perintah Pesanan atau seret elemen di pohon objek di jendela Kerangka Dokumen.
Untuk mengubah urutan lapisan, lakukan salah satu hal berikut:
Di jendela Kerangka Dokumen, seret elemen ke atas atau ke bawah untuk membuat urutan lapisan yang diinginkan.
Klik kanan elemen di jendela Kerangka Dokumen atau artboard yang ingin Anda ubah urutan lapisannya, arahkan ke Urutan, lalu klik salah satu hal berikut ini:
Bawa ke Depan untuk membawa elemen sampai ke depan pesanan.
Bawa Maju untuk membawa elemen ke depan satu tingkat dalam urutan.
Kirim Mundur untuk mengirim elemen kembali satu tingkat dalam urutan.
Kirim ke Kembali untuk mengirim elemen hingga ke bagian belakang pesanan.
Ubah properti ZIndex di bagian Tata Letak di jendela Properti. Untuk elemen yang tumpang tindih, properti ZIndex lebih diutamakan daripada urutan elemen yang diperlihatkan di jendela Kerangka Dokumen. Elemen yang memiliki nilai ZIndex yang lebih tinggi muncul di depan saat elemen tumpang tindih.
Mengubah perataan elemen
Anda dapat meratakan elemen di artboard dengan menggunakan perintah menu atau dengan menyeret elemen ke snapline.
Snapline adalah isensi visual yang membantu Anda menyelaraskan elemen yang relatif terhadap elemen lain di aplikasi.
Untuk meratakan dua elemen atau lebih dengan menggunakan perintah menu:
Pilih elemen yang ingin Anda ratakan. Anda dapat memilih lebih dari satu elemen dengan menekan dan menahan tombol Ctrl saat Anda memilih elemen.
Pilih salah satu properti berikut ini di bawah HorizontalAlignment di bagian Tata Letak jendela Properti: Kiri, Tengah, Kanan, atau Bentang.
Pilih salah satu properti berikut ini di bawah VerticalAlignment di bagian Tata Letak dari jendela Properti: Atas, Tengah, Bawah, atau Regang.
Untuk meratakan dua elemen atau lebih dengan menggunakan snapline, di XAML Designer, dalam tata letak yang berisi setidaknya dua elemen, seret atau ubah ukuran salah satu elemen sehingga tepi selaras dengan elemen lain.
Saat tepi diratakan, batas perataan tampaknya menunjukkan perataan. Batas perataan adalah garis putus-putus merah. Batas perataan hanya muncul saat melekatkan ke snapline diaktifkan. Untuk ilustrasi artboard yang memperlihatkan batas perataan, lihat Membuat UI dengan menggunakan Perancang XAML.
Mengubah margin elemen
Margin dalam XAML Designer menentukan jumlah ruang kosong yang ada di sekitar elemen pada artboard. Misalnya, margin menentukan jumlah ruang antara tepi luar elemen dan batas Grid panel yang berisi elemen . Margin juga menentukan jumlah spasi antar elemen yang terkandung dalam StackPanel.
Untuk mengubah margin elemen di jendela Properti:
Pilih elemen yang marginnya ingin Anda ubah.
Di bawah Tata Letak di jendela Properti, ubah nilai (dalam piksel atau unit independen perangkat, yang sekitar 1/96 inci) untuk salah satu properti Margin (Atas, Kiri, Kanan, atau Bawah).
Di artboard, untuk mengubah margin elemen relatif terhadap kontainer tata letak elemen, klik pujaan margin yang muncul di sekitar elemen saat elemen dipilih dan berada dalam kontainer tata letak. Untuk ilustrasi yang memperlihatkan penggiat margin, lihat Membuat UI dengan menggunakan XAML Designer.
Jika margin menggemaskan terbuka, secara vertikal atau horizontal, margin tersebut tidak diatur. Jika margin adorner ditutup, margin tersebut diatur.
Saat Anda membuka margin adorner dan margin yang berlawanan tidak diatur, margin yang berlawanan diatur ke nilai yang benar sesuai dengan lokasi elemen di artboard. Untuk margin yang berlawanan, seperti margin Kiri dan Kanan , setidaknya satu properti selalu diatur.
Penting
Elemen yang ditempatkan di dalam beberapa kontainer tata letak, seperti Kanvas, tidak memiliki penata margin. Elemen yang ditempatkan di dalam StackPanel memiliki penggorong margin untuk margin kiri dan kanan atau margin atas dan bawah, tergantung pada orientasi StackPanel.
Mengelompokkan dan memisahkan grup elemen
Mengelompokkan dua elemen atau lebih di XAML Designer membuat kontainer tata letak baru dan menempatkan elemen-elemen tersebut dalam kontainer tersebut. Menempatkan dua elemen atau lebih bersama-sama dalam kontainer tata letak memungkinkan Anda untuk dengan mudah memilih, memindahkan, dan mengubah grup seolah-olah elemen dalam grup tersebut adalah satu elemen. Pengelompokan juga berguna untuk mengidentifikasi elemen yang terkait satu sama lain dalam beberapa cara, seperti tombol yang membentuk elemen navigasi. Saat memisahkan grup elemen, Anda hanya menghapus kontainer tata letak yang berisi elemen.
Untuk mengelompokkan elemen ke dalam kontainer tata letak baru:
Pilih elemen yang ingin Anda kelompokkan. (Untuk memilih beberapa elemen, tekan dan tahan Tombol Ctrl saat Anda mengkliknya.)
Klik kanan elemen yang dipilih, arahkan ke Kelompokkan Ke, lalu klik jenis kontainer tata letak tempat Anda ingin grup berada.
Tip
Jika Anda memilih Kotak Tampilan, Batas, atau ScrollViewer untuk mengelompokkan elemen Anda, elemen ditempatkan di panel Kisi baru dalam Kotak Tampilan, Batas, atau ScrollViewer. Jika Anda memisahkan grup elemen di salah satu kontainer tata letak ini, hanya Kotak Tampilan, Batas, atau ScrollViewer yang dihapus, dan panel Kisi tetap ada. Untuk menghapus
Gridpanel, pisahkan grup elemen lagi.
Untuk memisahkan grup elemen dan menghapus tata letak, klik kanan grup yang ingin Anda pisahkan grupnya dan klik Pisahkan Grup. Anda juga dapat mengelompokkan atau memisahkan grup elemen dengan mengklik kanan item yang dipilih di jendela Kerangka Dokumen dan mengklik Kelompokkan Ke dalam atau Pisahkan Grup.
Mengatur ulang tata letak elemen
Anda dapat memulihkan nilai default untuk properti tata letak tertentu dari elemen dengan menggunakan perintah Tata Letak Reset. Dengan menggunakan perintah ini, Anda dapat mengatur ulang margin, perataan, lebar, tinggi, dan ukuran elemen, baik secara individual maupun kolektif.
Untuk mereset tata letak elemen, klik kanan elemen di jendela Kerangka Dokumen atau artboard, lalu pilih Tata Letak>ResetPropertyName, di mana PropertyName adalah properti yang ingin Anda reset (atau pilih Tata Letak>Reset Semua untuk mengatur ulang semua properti tata letak untuk elemen).