Meratakan dan memosisikan kontrol .NET MAUI

Setiap kontrol .NET Multi-platform App UI (.NET MAUI) yang berasal dari View, yang mencakup tampilan dan tata letak, memiliki HorizontalOptions dan VerticalOptions properti, jenis LayoutOptions. Struktur LayoutOptions merangkum perataan pilihan tampilan, yang menentukan posisi dan ukurannya dalam tata letak induknya ketika tata letak induk berisi ruang yang tidak digunakan (yaitu, tata letak induk lebih besar dari ukuran gabungan semua turunannya).

Selain itu, Margin kontrol posisi properti dan Padding relatif terhadap kontrol yang berdekatan, atau turunan. Untuk informasi selengkapnya, lihat Kontrol posisi.

Meratakan tampilan dalam tata letak

Perataan View, relatif terhadap induknya, dapat dikontrol dengan mengatur HorizontalOptions properti View atau VerticalOptions ke salah satu bidang publik dari LayoutOptions struktur. Bidang publik adalah Start, , CenterEnd, dan Fill.

Bidang Start, Center, End, dan Fill digunakan untuk menentukan perataan tampilan dalam tata letak induk:

• Untuk perataan horizontal, Start posisi View di sisi kiri tata letak induk, dan untuk perataan vertikal, posisinya View di bagian atas tata letak induk.
• Untuk perataan horizontal dan vertikal, Center secara horizontal atau vertikal memusatkan View.
• Untuk perataan horizontal, End posisikan View di sisi kanan tata letak induk, dan untuk perataan vertikal, posisinya View di bagian bawah tata letak induk.
• Untuk perataan horizontal, Fill memastikan bahwa View mengisi lebar tata letak induk, dan untuk perataan vertikal, ia memastikan bahwa View mengisi tinggi tata letak induk.

Catatan

Nilai default properti dan VerticalOptions tampilan HorizontalOptions adalah LayoutOptions.Fill.

Hanya StackLayout menghormati Startbidang , Center, End, dan FillLayoutOptions pada tampilan anak yang berada di arah yang berlawanan dengan StackLayout orientasi. Oleh karena itu, tampilan anak dalam berorientasi StackLayout vertikal dapat mengatur propertinya HorizontalOptions ke salah Startsatu bidang , , CenterEnd, atau Fill . Demikian pula, tampilan anak dalam berorientasi StackLayout horizontal dapat mengatur propertinya VerticalOptions ke salah Startsatu bidang , , CenterEnd, atau Fill .

Tidak menghormati Startbidang , , EndCenter, danLayoutOptionsFillpada tampilan anak yang berada dalam arah yang sama dengan StackLayout orientasi.StackLayout Oleh karena itu, berorientasi StackLayout vertikal mengabaikan Startbidang , , CenterEnd, atau Fill jika diatur pada VerticalOptions properti tampilan anak. Demikian pula, berorientasi StackLayout horizontal mengabaikan Startbidang , , EndCenter, atau Fill jika diatur pada HorizontalOptions properti tampilan anak.

Penting

LayoutOptions.Fill umumnya mengambil alih permintaan ukuran yang ditentukan menggunakan HeightRequest properti dan WidthRequest .

Contoh XAML berikut menunjukkan berorientasi StackLayout vertikal di mana setiap anak Label mengatur propertinya HorizontalOptions ke salah satu dari empat bidang perataan dari LayoutOptions struktur:

<StackLayout>
  ...
  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>

Cuplikan layar berikut menunjukkan perataan yang dihasilkan dari setiap Label:

Kontrol posisi

Margin Kontrol posisi properti dan Padding relatif terhadap kontrol yang berdekatan, atau turunan. 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 tampilan.
• Properti Padding mewakili jarak antara elemen dan elemen turunannya, dan digunakan untuk memisahkan kontrol dari kontennya sendiri. Padding nilai dapat ditentukan pada halaman, tata letak, dan tampilan.

Diagram berikut mengilustrasikan dua konsep:

Catatan

Margin nilai bersifat aditif. Oleh karena itu, jika dua elemen yang berdekatan menentukan margin 20 unit independen perangkat, jarak antara elemen akan menjadi 40 unit independen perangkat. Selain itu, nilai margin dan padding bersifat aditif ketika keduanya diterapkan, di mana jarak antara elemen dan konten apa pun akan menjadi margin ditambah padding.

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 XAML berikut menunjukkan ketiga kemungkinan:

<StackLayout Padding="0,20,0,0">
  <!-- Margin defined by a single uniform value. -->
  <Label Text=".NET MAUI" Margin="20" />
  <!-- Margin defined by horizontal and vertical values. -->  
  <Label Text=".NET for iOS" Margin="10,15" />
  <!-- Margin defined by four distinct values that are applied to the left, top, right, and bottom. -->  
  <Label Text=".NET for Android" Margin="0,20,15,5" />
</StackLayout>

Kode C# yang setara adalah:

StackLayout stackLayout = new StackLayout
{
  Padding = new Thickness(0,20,0,0)
};
// Margin defined by a single uniform value.
stackLayout.Add(new Label { Text = ".NET MAUI", Margin = new Thickness(20) });
// Margin defined by horizontal and vertical values.
stackLayout.Add(new Label { Text = ".NET for iOS", Margin = new Thickness(10,25) });
// Margin defined by four distinct values that are applied to the left, top, right, and bottom.
stackLayout.Add(new Label { Text = ".NET for Android", Margin = new Thickness(0,20,15,5) });  

Catatan

Thickness nilai bisa negatif, yang biasanya mengklip atau menguraikan konten.