Panel tata letak

Panel tata letak adalah kontainer yang memungkinkan Anda mengatur dan mengelompokkan elemen UI di aplikasi Anda. Panel tata letak XAML bawaan mencakup RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, dan Canvas. Di sini, kami menjelaskan setiap panel dan menunjukkan cara menggunakannya untuk tata letak elemen antarmuka pengguna XAML.

Ada beberapa hal yang perlu dipertimbangkan saat memilih panel tata letak:

• Bagaimana panel memposisikan elemen turunannya.
• Bagaimana panel mengukur elemen turunannya.
• Bagaimana elemen turunan yang tumpang tindih berlapis di atas satu sama lain (z-order).
• Jumlah dan kompleksitas elemen panel berlapis yang diperlukan untuk membuat tata letak yang Anda inginkan.

Contoh

Galeri WinUI 2
	Jika Anda menginstal aplikasi Galeri WinUI 2, lihat RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, dan Canvas yang sedang beraksi. Mendapatkan aplikasi Galeri WinUI 2 (Microsoft Store) Dapatkan kode sumber (GitHub)

Properti panel

Sebelum kita membahas panel individual, mari kita membahas beberapa properti umum yang dimiliki semua panel.

Properti terlampir panel

Sebagian besar panel tata letak XAML menggunakan properti terlampir untuk membiarkan elemen anak mereka menginformasikan panel induk tentang bagaimana mereka harus diposisikan di UI. Properti terlampir menggunakan sintaks AttachedPropertyProvider.PropertyName. Jika Anda memiliki panel yang disarangkan di dalam panel lain, properti terlampir pada elemen UI yang menentukan karakteristik tata letak ke induk ditafsirkan oleh panel induk yang paling langsung saja.

Berikut adalah contoh bagaimana Anda dapat mengatur properti terlampir Canvas.Left pada kontrol Tombol di XAML. Ini menginformasikan kanvas induk bahwa Tombol harus diposisikan 50 piksel efektif dari tepi kiri Kanvas.

<Canvas>
  <Button Canvas.Left="50">Hello</Button>
</Canvas>

Untuk informasi selengkapnya tentang properti terlampir, lihat Gambaran umum properti terlampir.

Batas panel

Panel RelativePanel, StackPanel, dan Grid menentukan properti batas yang memungkinkan Anda menggambar batas di sekitar panel tanpa membungkusnya dalam elemen Batas tambahan. Properti batas adalah BorderBrush, BorderThickness, CornerRadius, dan Padding.

Berikut adalah contoh cara mengatur properti batas pada Kisi.

<Grid BorderBrush="Blue" BorderThickness="12" CornerRadius="12" Padding="12">
    <TextBlock Text="Hello World!"/>
</Grid>

Menggunakan properti batas bawaan mengurangi jumlah elemen XAML, yang dapat meningkatkan performa UI aplikasi Anda. Untuk informasi selengkapnya tentang panel tata letak dan performa UI, lihat Mengoptimalkan tata letak XAML Anda.

RelativePanel

RelativePanel memungkinkan Anda membuat tata letak elemen UI dengan menentukan ke mana mereka pergi sehubungan dengan elemen lain dan dalam kaitannya dengan panel. Secara default, elemen diposisikan di sudut kiri atas panel. Anda dapat menggunakan RelativePanel dengan VisualStateManager dan AdaptiveTrigger untuk mengatur ulang UI Anda untuk ukuran jendela yang berbeda.

Tabel ini memperlihatkan properti terlampir yang dapat Anda gunakan untuk meratakan elemen terkait dengan panel atau elemen lainnya.

Perataan panel	Perataan saudara	Posisi saudara
AlignTopWithPanel	RatakanTopWith	Atas
AlignBottomWithPanel	AlignBottomWith	Bawah
AlignLeftWithPanel	AlignLeftWith	LeftOf
AlignRightWithPanel	AlignRightWith	RightOf
AlignHorizontalCenterWithPanel	AlignHorizontalCenterWith
AlignVerticalCenterWithPanel	AlignVerticalCenterWith

XAML ini menunjukkan cara mengatur elemen dalam RelativePanel.

<RelativePanel BorderBrush="Gray" BorderThickness="1">
    <Rectangle x:Name="RedRect" Fill="Red" Height="44" Width="44"/>
    <Rectangle x:Name="BlueRect" Fill="Blue"
               Height="44" Width="88"
               RelativePanel.RightOf="RedRect" />

    <Rectangle x:Name="GreenRect" Fill="Green" 
               Height="44"
               RelativePanel.Below="RedRect" 
               RelativePanel.AlignLeftWith="RedRect" 
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Orange"
               RelativePanel.Below="GreenRect" 
               RelativePanel.AlignLeftWith="BlueRect" 
               RelativePanel.AlignRightWithPanel="True"
               RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Hasilnya terlihat seperti ini.

Berikut adalah beberapa hal yang perlu diperhatikan tentang ukuran persegi panjang:

• Persegi panjang merah diberi ukuran eksplisit 44x44. Ini ditempatkan di sudut kiri atas panel, yang merupakan posisi default.
• Persegi panjang hijau diberi tinggi eksplisit 44. Sisi kirinya selaras dengan persegi panjang merah, dan sisi kanannya selaras dengan persegi panjang biru, yang menentukan lebarnya.
• Persegi panjang oranye tidak diberi ukuran eksplisit. Sisi kirinya selaras dengan persegi panjang biru. Tepi kanan dan bawahnya selaras dengan tepi panel. Ukurannya ditentukan oleh perataan ini dan akan mengubah ukuran saat panel mengubah ukuran.

StackPanel

StackPanel mengatur elemen turunannya ke dalam satu baris yang dapat berorientasi horizontal atau vertikal. StackPanel biasanya digunakan untuk mengatur sub-bagian kecil UI pada halaman.

Anda dapat menggunakan properti Orientasi untuk menentukan arah elemen anak. Orientasi defaultnya adalah Vertikal.

XAML berikut menunjukkan cara membuat StackPanel vertikal item.

<StackPanel>
    <Rectangle Fill="Red" Height="44"/>
    <Rectangle Fill="Blue" Height="44"/>
    <Rectangle Fill="Green" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</StackPanel>

Hasilnya terlihat seperti ini.

Dalam StackPanel, jika ukuran elemen turunan tidak diatur secara eksplisit, elemen ini membentang untuk mengisi lebar yang tersedia (atau tinggi jika Orientasinya Horizontal). Dalam contoh ini, lebar persegi panjang tidak diatur. Persegi diperluas untuk mengisi seluruh lebar StackPanel.

Kisi

Panel Kisi mendukung tata letak fluida dan memungkinkan Anda mengatur kontrol dalam tata letak multi-baris dan multi-kolom. Anda menentukan baris dan kolom Kisi dengan menggunakan properti RowDefinitions dan ColumnDefinitions.

Untuk memosisikan objek dalam sel tertentu dari Kisi, gunakan properti Grid.Column dan Grid.Row yang dilampirkan.

Untuk membuat konten mencakup beberapa baris dan kolom, gunakan properti terlampir Grid.RowSpan dan Grid.ColumnSpan.

Contoh XAML ini menunjukkan cara membuat Kisi dengan dua baris dan dua kolom.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Width="44"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

Hasilnya terlihat seperti ini.

Dalam contoh ini, ukuran berfungsi seperti ini:

• Baris kedua memiliki tinggi eksplisit 44 piksel efektif. Secara default, tinggi baris pertama mengisi ruang apa pun yang tersisa.
• Lebar kolom pertama diatur ke Otomatis, sehingga seluas yang diperlukan untuk anak-anaknya. Dalam hal ini, lebarnya 44 piksel efektif untuk mengakomodasi lebar persegi panjang merah.
• Tidak ada batasan ukuran lain pada persegi panjang, sehingga masing-masing membentang untuk mengisi sel kisi tempatnya berada.

Anda dapat mendistribusikan ruang dalam kolom atau baris dengan menggunakan Ukuran otomatis atau bintang. Anda menggunakan ukuran otomatis untuk memungkinkan elemen UI mengubah ukuran agar sesuai dengan konten atau kontainer induknya. Anda juga dapat menggunakan ukuran otomatis dengan baris dan kolom kisi. Untuk menggunakan ukuran otomatis, atur Tinggi dan/atau Lebar elemen UI ke Otomatis.

Anda menggunakan ukuran proporsional, juga disebut ukuran bintang, untuk mendistribusikan ruang yang tersedia di antara baris dan kolom kisi berdasarkan proporsi tertimbang. Dalam XAML, nilai bintang dinyatakan sebagai * (atau n* untuk ukuran bintang tertimbang). Misalnya, untuk menentukan bahwa satu kolom lebih lebar 5 kali dari kolom kedua dalam tata letak 2 kolom, gunakan "5*" dan "*" untuk properti Lebar dalam elemen ColumnDefinition.

Contoh ini menggabungkan ukuran tetap, otomatis, dan proporsional dalam Kisi dengan 4 kolom.

Kolom	Pengukuran	Deskripsi
Column_1	Auto	Kolom akan berukuran agar sesuai dengan kontennya.
Column_2	*	Setelah kolom Otomatis dihitung, kolom mendapatkan bagian dari lebar yang tersisa. Column_2 akan menjadi separuh lebar Column_4.
Column_3	44	Kolom akan lebarnya 44 piksel.
Column_4	2*	Setelah kolom Otomatis dihitung, kolom mendapatkan bagian dari lebar yang tersisa. Column_4 akan dua kali lebih lebar dari Column_2.

Lebar kolom default adalah "*", jadi Anda tidak perlu secara eksplisit mengatur nilai ini untuk kolom kedua.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>

Di perancang Visual Studio XAML, hasilnya terlihat seperti ini.

VariableSizedWrapGrid

VariableSizedWrapGrid adalah panel tata letak gaya Kisi tempat baris atau kolom secara otomatis membungkus ke baris atau kolom baru saat nilai MaximumRowsOrColumns tercapai.

Properti Orientasi menentukan apakah kisi menambahkan itemnya dalam baris atau kolom sebelum dibungkus. Orientasi defaultnya adalah Vertikal, yang berarti kisi menambahkan item dari atas ke bawah hingga kolom penuh, lalu membungkus ke kolom baru. Saat nilainya Horizontal, kisi menambahkan item dari kiri ke kanan, lalu membungkus ke baris baru.

Dimensi sel ditentukan oleh ItemHeight dan ItemWidth. Setiap sel memiliki ukuran yang sama. Jika ItemHeight atau ItemWidth tidak ditentukan, maka ukuran sel pertama pas dengan kontennya, dan setiap sel lainnya adalah ukuran sel pertama.

Anda dapat menggunakan properti terlampir VariableSizedWrapGrid.ColumnSpan dan VariableSizedWrapGrid.RowSpan untuk menentukan berapa banyak sel yang berdekatan yang harus diisi elemen anak.

Berikut cara menggunakan VariableSizedWrapGrid di XAML.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Hasilnya terlihat seperti ini.

Dalam contoh ini, jumlah maksimum baris di setiap kolom adalah 3. Kolom pertama hanya berisi 2 item (persegi panjang merah dan biru) karena persegi panjang biru mencakup 2 baris. Persegi panjang hijau kemudian membungkus ke bagian atas kolom berikutnya.

Kanvas

Panel Kanvas memposisikan elemen turunannya menggunakan titik koordinat tetap dan tidak mendukung tata letak cairan. Anda menentukan titik pada elemen anak individual dengan mengatur properti Canvas.Left dan Canvas.Top terlampir pada setiap elemen. Induk Kanvas membaca nilai properti terlampir ini dari turunannya selama pass tata letak Susun .

Objek dalam Kanvas dapat tumpang tindih, di mana satu objek digambar di atas objek lain. Secara default, Kanvas merender objek anak dalam urutan dinyatakan, sehingga anak terakhir dirender di atas (setiap elemen memiliki indeks z default 0). Ini sama dengan panel bawaan lainnya. Namun, Canvas juga mendukung properti terlampir Canvas.ZIndex yang dapat Anda atur pada setiap elemen anak. Anda dapat mengatur properti ini dalam kode untuk mengubah urutan gambar elemen selama run time. Elemen dengan nilai Canvas.ZIndex tertinggi menarik terakhir dan karenanya menarik elemen lain yang berbagi ruang atau tumpang tindih yang sama dengan cara apa pun. Perhatikan bahwa nilai alfa (transparansi) dihormati, jadi bahkan jika elemen tumpang tindih, konten yang ditampilkan di area tumpang tindih mungkin dicambuk jika yang teratas memiliki nilai alfa non-maksimum.

Kanvas tidak melakukan ukuran anak-anaknya. Setiap elemen harus menentukan ukurannya.

Berikut adalah contoh Kanvas di XAML.

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red" Height="44" Width="44"/>
    <Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Hasilnya terlihat seperti ini.

Gunakan panel Kanvas dengan kebijaksanaan. Meskipun nyaman untuk dapat mengontrol posisi elemen di UI secara tepat untuk beberapa skenario, panel tata letak yang diposisikan tetap menyebabkan area UI Anda menjadi kurang adaptif terhadap perubahan ukuran jendela aplikasi secara keseluruhan. Pengubahan ukuran jendela aplikasi mungkin berasal dari perubahan orientasi perangkat, jendela aplikasi terpisah, mengubah monitor, dan sejumlah skenario pengguna lainnya.

Panel untuk ItemsControl

Ada beberapa panel tujuan khusus yang hanya dapat digunakan sebagai ItemsPanel untuk menampilkan item dalam ItemsControl. Ini adalah ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel, dan WrapGrid. Anda tidak dapat menggunakan panel ini untuk tata letak antarmuka pengguna umum.

Mendapatkan kode sampel

• Sampel Galeri WinUI 2 - Lihat semua kontrol XAML dalam format interaktif.