Perataan, margin, padding

  • Artikel

Di aplikasi XAML, sebagian besar elemen antarmuka pengguna (UI) mewarisi dari kelas FrameworkElement . Setiap FrameworkElement memiliki dimensi, perataan, margin, dan properti padding, yang memengaruhi perilaku tata letak. Panduan berikut memberikan gambaran umum tentang cara menggunakan properti tata letak ini untuk memastikan UI aplikasi Anda dapat terbaca dan mudah digunakan dalam konteks apa pun.

Dimensi (Tinggi, Lebar)

Ukuran yang tepat memastikan semua konten jelas dan terbaca. Pengguna tidak boleh menggulir atau memperbesar tampilan untuk menguraikan konten utama.

diagram memperlihatkan dimensi

  • Tinggi dan Lebar menentukan ukuran elemen. Nilai defaultnya adalah NaN matematis (Bukan Angka). Anda dapat mengatur nilai tetap yang diukur dalam piksel yang efektif, atau Anda dapat menggunakan Ukuran otomatis atau proporsional untuk perilaku fluida.

  • ActualHeight dan ActualWidth adalah properti baca-saja yang menyediakan ukuran elemen saat runtime. Jika tata letak fluida bertambah atau menyusut, maka nilai berubah dalam peristiwa SizeChanged . Perhatikan bahwa RenderTransform tidak akan mengubah nilai ActualHeight dan ActualWidth.

  • MinWidth/MaxWidth dan MinHeight/MaxHeight menentukan nilai yang membatasi ukuran elemen sambil memungkinkan pengubahan ukuran cairan.

  • FontSize dan properti teks lainnya mengontrol ukuran tata letak untuk elemen teks. Meskipun elemen teks tidak memiliki dimensi yang dideklarasikan secara eksplisit, elemen teks tersebut telah menghitung ActualWidth dan ActualHeight.

Penjajaran

Perataan membuat UI Anda terlihat rapi, terorganisir, dan seimbang dan juga dapat digunakan untuk membangun hierarki visual dan hubungan.

diagram memperlihatkan perataan

  • HorizontalAlignment dan VerticalAlignment menentukan bagaimana elemen harus diposisikan dalam kontainer induknya.

    • Nilai untuk HorizontalAlignment adalah Kiri, Tengah, Kanan, dan Regangkan.
    • Nilai untuk VerticalAlignment adalah Atas, Tengah, Bawah, dan Regangkan.

  • Stretch adalah default untuk kedua properti, dan elemen mengisi semua ruang yang disediakan dalam kontainer induk. Tinggi dan Lebar angka nyata membatalkan nilai Stretch, yang sebaliknya akan bertindak sebagai nilai Tengah. Beberapa kontrol, seperti Tombol, mengganti nilai Stretch default dalam gaya defaultnya.

  • HorizontalContentAlignment dan VerticalContentAlignment menentukan bagaimana elemen anak diposisikan dalam kontainer.

  • Perataan dapat memengaruhi kliping dalam panel tata letak. Misalnya, dengan HorizontalAlignment="Left", sisi kanan elemen akan terpotong jika konten lebih besar dari ActualWidth.

  • Elemen teks menggunakan properti TextAlignment . Umumnya, sebaiknya gunakan penyelarasan kiri, nilai default. Untuk informasi selengkapnya tentang menata teks, lihat Tipografi.

Margin dan padding

Properti margin dan padding mencegah UI terlihat terlalu berantakan atau terlalu jarang, dan mereka juga dapat mempermudah penggunaan input tertentu seperti pena dan sentuhan. Berikut adalah ilustrasi yang menampilkan margin dan padding untuk kontainer dan kontennya.

margin xaml dan diagram padding

Margin

Margin mengontrol jumlah ruang kosong di sekitar elemen. Margin tidak menambahkan piksel ke ActualHeight dan ActualWidth dan tidak dianggap sebagai bagian dari elemen untuk pengujian hit dan sumber peristiwa input.

  • Nilai margin bisa seragam atau berbeda. Dengan Margin="20", margin seragam 20 piksel akan diterapkan ke elemen di sisi kiri, atas, kanan, dan bawah. Dengan Margin="0,10,5,25", nilai diterapkan ke kiri, atas, kanan, dan bawah (dalam urutan tersebut).

  • Margin bersifat aditif. Jika dua elemen menentukan margin seragam 10 piksel dan merupakan serekan yang berdampingan dalam orientasi apa pun, jarak di antaranya adalah 20 piksel.

  • Margin negatif diizinkan. Namun, menggunakan margin negatif sering dapat menyebabkan kliping, atau overdraw rekan, sehingga bukan teknik umum untuk menggunakan margin negatif.

  • Nilai margin dibatasi terakhir, jadi berhati-hatilah dengan margin karena kontainer dapat memotong atau membatasi elemen. Nilai Margin bisa menjadi penyebab elemen tidak muncul untuk dirender; dengan Margin diterapkan, dimensi elemen dapat dibatasi menjadi 0.

Padding

Padding mengontrol jumlah ruang antara batas dalam elemen dan konten atau elemen turunannya. Nilai Padding positif mengurangi area konten elemen.

Tidak seperti Margin, Padding bukan properti frameworkElement. Ada beberapa kelas yang masing-masing mendefinisikan properti Padding mereka sendiri:

  • Control.Padding: mewarisi semua kelas turunan Kontrol . Tidak semua kontrol memiliki konten, jadi untuk kontrol tersebut, mengatur properti tidak melakukan apa pun. Jika kontrol memiliki batas, padding berlaku di dalam batas tersebut.
  • Border.Padding: menentukan spasi antara garis persegi yang dibuat oleh BorderThickness/BorderBrush dan elemen Child .
  • ItemsPresenter.Padding: berkontribusi pada tampilan item dalam kontrol item, menempatkan padding yang ditentukan di sekitar setiap item.
  • TextBlock.Padding dan RichTextBlock.Padding: perluas kotak batas di sekitar teks elemen teks. Elemen teks ini tidak memiliki Latar Belakang, sehingga bisa sulit dilihat secara visual. Untuk alasan itu, gunakan pengaturan Margin pada kontainer Blokir sebagai gantinya.

Dalam setiap kasus ini, elemen juga memiliki properti Margin. Jika Margin dan Padding diterapkan, keduanya bersifat aditif: jarak yang jelas antara kontainer luar dan konten dalam apa pun akan menjadi margin ditambah padding.

Contoh

Mari kita lihat efek Margin dan Padding pada kontrol nyata. Berikut adalah Kotak Teks di dalam Kisi dengan nilai Margin dan Padding default 0.

Kotak Teks dengan margin dan padding 0

Berikut adalah Kotak Teks dan Kisi yang sama dengan nilai Margin dan Padding pada Kotak Teks seperti yang ditunjukkan dalam XAML ini.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

Kotak Teks dengan margin positif dan nilai padding

Sumber daya gaya

Anda tidak perlu mengatur setiap nilai properti satu per satu pada kontrol. Biasanya lebih efisien untuk mengelompokkan nilai properti ke dalam sumber daya Gaya dan menerapkan Gaya ke kontrol. Ini terutama berlaku ketika Anda perlu menerapkan nilai properti yang sama ke banyak kontrol. Untuk informasi selengkapnya tentang menggunakan gaya, lihat gaya XAML.

Rekomendasi umum

  • Hanya terapkan nilai pengukuran ke elemen kunci tertentu dan gunakan perilaku tata letak fluida untuk elemen lain. Ini menyediakan UI responsif ketika lebar jendela berubah.

  • Jika Anda menggunakan nilai pengukuran, semua dimensi, margin, dan padding harus dalam kenaikan 4 epx. Saat XAML menggunakan piksel dan penskalaan yang efektif untuk membuat aplikasi Anda dapat terbaca di semua perangkat dan ukuran layar, aplikasi akan menskalakan elemen UI dengan kelipatan 4. Menggunakan nilai dengan kenaikan 4 menghasilkan penyajian terbaik dengan menyelaraskan dengan seluruh piksel.

  • Untuk lebar jendela kecil (kurang dari 640 piksel), kami merekomendasikan 12 selokan epx, dan untuk lebar jendela yang lebih besar, kami merekomendasikan 24 selokan epx.

selokan yang direkomendasikan