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 mengatur ukuran elemen anaknya.
• Bagaimana elemen-elemen turunan yang saling tumpang tindih disusun berlapis di atas satu sama lain (z-order).
• Jumlah dan kompleksitas elemen panel berlapis yang diperlukan untuk membuat tata letak yang Anda inginkan.

Contoh

Buka aplikasi Galeri WinUI 3 dan lihat panel tata letak beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Properti panel

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

Properti terlampir pada 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 diinterpretasikan hanya oleh panel induk terdekat.

Berikut adalah contoh bagaimana Anda dapat mengatur properti terlampir Canvas.Left pada kontrol Tombol di XAML. Ini menginformasikan Kanvas induk bahwa Tombol harus ditempatkan 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 Grid.

<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.

Buka aplikasi Galeri WinUI 3 dan lihat RelativePanel beraksi

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	RatakanAtasDengan	Atas
AlignBottomWithPanel	AlignBottomWith	Di bawah ini
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 sejajar 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.

Buka aplikasi Galeri WinUI 3 dan lihat StackPanel beraksi

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

XAML berikut menunjukkan cara membuat StackPanel vertikal untuk 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 panjang mengembang untuk mengisi seluruh lebar StackPanel.

Jaringan

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

Buka aplikasi Galeri WinUI 3 dan lihat Grid beraksi

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. Pada kasus ini, lebarnya 44 piksel efektif untuk mengakomodasi lebar persegi panjang merah.
• Tidak ada batasan ukuran lain pada persegi panjang, sehingga setiap persegi panjang dapat membentang untuk mengisi sel grid di dalamnya.

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 penyesuaian ukuran otomatis pada baris dan kolom grid. 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	Ukuran	Deskripsi
Kolom_1	Auto	Kolom akan berukuran agar sesuai dengan kontennya.
Column_2	*	Setelah proses perhitungan kolom Otomatis, kolom tersebut mendapatkan bagian dari lebar yang tersisa. Column_2 akan menjadi separuh lebar Column_4.
Column_3	44	Kolom akan lebarnya 44 piksel.
Kolom_4	2*	Setelah proses perhitungan kolom Otomatis, kolom tersebut 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>

Dalam perancang XAML Visual Studio, hasilnya terlihat seperti ini.

Sebuah kisi dengan 4 kolom di perancang Visual Studio

VariableSizedWrapGrid

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

Buka aplikasi Galeri WinUI 3 dan lihat VariableSizedWrapGrid beraksi

Properti Orientasi menentukan apakah grid menambahkan itemnya dalam baris atau kolom sebelum membungkusnya. Orientasi defaultnya adalah Vertikal, yang berarti kisi menambahkan item dari atas ke bawah hingga kolom penuh, lalu berlanjut ke kolom baru. Saat nilainya Horizontal, kisi menambahkan item dari kiri ke kanan, lalu lanjut 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 lampiran VariableSizedWrapGrid.ColumnSpan dan VariableSizedWrapGrid.RowSpan untuk menentukan berapa banyak sel berdekatan yang harus diisi oleh 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 responsif. 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 tahap Susun pada tata letak.

Buka aplikasi Galeri WinUI 3 dan lihat Canvas beraksi

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 akan ditampilkan terakhir dan karena itu menutupi elemen lain yang berbagi ruang atau tumpang tindih dengan cara apa pun. Perhatikan bahwa nilai alfa (transparansi) tetap diperhatikan, sehingga meskipun elemen saling tumpang tindih, konten yang ditampilkan di area tumpang tindih mungkin terbaur 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 memudahkan untuk dapat mengontrol posisi elemen dalam antarmuka pengguna (UI) secara tepat dalam beberapa skenario, panel tata letak dengan posisi tetap membuat 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.

WrapPanel

Important

WrapPaneltersedia mulai dari SDK Aplikasi Windows 2.0 Eksperimental 2. SDK Aplikasi Windows 2.0 Experimental 4 mengganti nama properti penspasiannya menjadi ItemSpacing dan LineSpacing. API ditandai eksperimental dan mungkin berubah atau dihapus dalam rilis mendatang. Jangan gunakan di aplikasi produksi.

WrapPanel mengatur elemen anaknya satu demi satu dalam satu baris. Ketika elemen berikutnya tidak pas di sisa ruang yang tersisa pada baris, panel memindahkannya ke awal baris baru. Gunakan WrapPanel untuk sekumpulan kecil elemen, seperti tag atau tombol filter, yang harus di-reflow saat ruang yang tersedia berubah. WrapPanel adalah port dari Windows Community Toolkit WrapPanel.

Buka aplikasi Galeri WinUI 3 dan lihat WrapPanel beraksi

Properti Orientasi menentukan arah di mana panel menambahkan item. Orientasi defaultnya adalah Horizontal, yang berarti panel menambahkan item dari kiri ke kanan, lalu membungkus ke baris baru. Saat nilainya vertikal, panel menambahkan item dari atas ke bawah, lalu membungkus ke kolom baru. Ketika FlowDirection panel adalah RightToLeft, misalnya dalam aplikasi yang dilokalkan untuk bahasa kanan-ke-kiri, panel mencerminkan tata letak ini. Ini mengisi setiap baris dari kanan ke kiri, dan menambahkan setiap kolom baru di sebelah kiri kolom sebelumnya.

Tidak seperti VariableSizedWrapGrid, WrapPanel tidak menggunakan sel dengan ukuran tetap. Setiap anak mempertahankan ukuran yang diinginkan ke arah orientasi. Dalam satu baris, setiap anak mendapatkan slot setinggi anak tertinggi di baris itu. Dalam kolom, setiap anak mendapatkan slot selebar elemen anak yang paling lebar di kolom tersebut.

Gunakan properti ini untuk menambahkan ruang ke tata letak:

• ItemSpacing mengatur spasi antara item yang berdekatan pada baris yang sama. Defaultnya adalah 0.
• LineSpacing mengatur spasi antarbaris. Defaultnya adalah 0.
• Padding mengatur ruang antara tepi panel dan itemnya.

Berikut cara menggunakan WrapPanel di XAML.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Width="60" Height="44"/>
</WrapPanel>

Hasilnya terlihat seperti ini.

Dalam contoh ini, persegi panjang merah dan biru dan penspasian item di antaranya menggunakan 128 dari 132 piksel panel, sehingga berada pada baris pertama yang sama. Persegi panjang hijau tidak pas di ruang yang tersisa, sehingga berpindah ke baris kedua. Persegi panjang oranye pas di samping persegi panjang hijau pada baris kedua.

Untuk membuat anak terakhir mengisi ruang yang tersisa di barisnya, atur properti ItemsStretch ke Last. Nilai default, None, menjaga setiap anak pada ukuran yang diinginkan. Jangan atur lebar eksplisit pada anak terakhir, atau tinggi eksplisit saat orientasinya vertikal, karena ukuran eksplisit mencegah anak membentang.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4" ItemsStretch="Last">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</WrapPanel>

Hasilnya terlihat seperti ini.

Dalam contoh ini, persegi panjang oranye mengisi sisa baris kedua. Untuk mengatur nilai dalam kode, gunakan enumerasi WrapPanelItemsStretch .

// Stretch the last child of a WrapPanel named tagPanel.
tagPanel.ItemsStretch = WrapPanelItemsStretch.Last;

WrapPanel menata item turunannya ke baris/kolom berikutnya hanya ketika ruang yang tersedia untuk panel tersebut dalam arah orientasi terbatas. Misalnya, StackPanel horizontal tidak membatasi lebar turunannya, sehingga WrapPanel horizontal di dalamnya menunjukkan semua turunannya dalam satu baris. Panel tidak memesan ruang atau menambahkan spasi untuk anak-anak yang VisibilitasnyaCiut.

WrapPanel tidak mendukung virtualisasi pada elemen turunannya. Ini membuat dan menata letak setiap elemen anak, termasuk elemen anak yang digulir ke luar tampilan. Untuk menampilkan koleksi besar yang berpindah ke baris berikutnya, gunakan GridView atau ItemsRepeater dengan UniformGridLayout. Kontrol ini mendukung virtualisasi UI.

Panel-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.

Dapatkan kode contoh

• sampel Galeri WinUI 3 - Lihat semua kontrol XAML dalam format interaktif.