Margin dan Padding
Properti Margin dan Padding mengontrol perilaku tata letak saat elemen dirender di antarmuka pengguna. Artikel ini menunjukkan perbedaan antara dua properti, dan cara mengaturnya.
Gambaran Umum
Margin dan padding adalah konsep tata letak terkait:
- Properti
Margin
mewakili jarak antara elemen dan elemen yang berdekatan, dan digunakan untuk mengontrol posisi penyajian elemen, dan posisi penyajian tetangganya.Margin
nilai dapat ditentukan pada tata letak dan melihat kelas. - Properti
Padding
mewakili jarak antara elemen dan elemen turunannya, dan digunakan untuk memisahkan kontrol dari kontennya sendiri.Padding
nilai dapat ditentukan pada kelas tata letak .
Diagram berikut mengilustrasikan dua konsep:
Perhatikan bahwa Margin
nilai bersifat aditif. Oleh karena itu, jika dua elemen yang berdekatan menentukan margin 20 piksel, jarak antara elemen akan menjadi 40 piksel. Selain itu, margin dan padding bersifat aditif ketika keduanya diterapkan, di mana jarak antara elemen dan konten apa pun akan menjadi margin ditambah padding.
Menentukan Ketebalan
Properti Margin
dan Padding
keduanya berjenis Thickness
. Ada tiga kemungkinan saat membuat Thickness
struktur:
- Buat struktur yang
Thickness
ditentukan oleh satu nilai seragam. Nilai tunggal diterapkan ke sisi kiri, atas, kanan, dan bawah elemen. - Buat struktur yang
Thickness
ditentukan oleh nilai horizontal dan vertikal. Nilai horizontal diterapkan secara simetris ke sisi kiri dan kanan elemen, dengan nilai vertikal diterapkan secara simetris ke sisi atas dan bawah elemen. - Buat struktur yang
Thickness
ditentukan oleh empat nilai berbeda yang diterapkan ke sisi kiri, atas, kanan, dan bawah elemen.
Contoh kode XAML berikut menunjukkan ketiga kemungkinan:
<StackLayout Padding="0,20,0,0">
<Label Text="Xamarin.Forms" Margin="20" />
<Label Text="Xamarin.iOS" Margin="10, 15" />
<Label Text="Xamarin.Android" Margin="0, 20, 15, 5" />
</StackLayout>
Kode C# yang setara ditampilkan dalam contoh kode berikut:
var stackLayout = new StackLayout {
Padding = new Thickness(0,20,0,0),
Children = {
new Label { Text = "Xamarin.Forms", Margin = new Thickness (20) },
new Label { Text = "Xamarin.iOS", Margin = new Thickness (10, 25) },
new Label { Text = "Xamarin.Android", Margin = new Thickness (0, 20, 15, 5) }
}
};
Catatan
Thickness
nilai bisa negatif, yang biasanya mengklip atau menguraikan konten.
Ringkasan
Artikel ini menunjukkan perbedaan antara Margin
properti dan Padding
, dan cara mengaturnya. Properti mengontrol perilaku tata letak saat elemen dirender di antarmuka pengguna.