Panel tata letak
Panel tata letak adalah kontainer yang memungkinkan Anda mengatur dan mengelompokkan elemen UI di aplikasi Anda. Panel tata letak XAML bawaan termasuk 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 memiliki aplikasi Galeri WinUI 2 yang terinstal , lihat RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, dan Canvas yang sedang beraksi. |
Properti panel
Sebelum kita membahas masing-masing panel, 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 ditumpuk 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 Border tambahan. Properti batasnya 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 mengatur 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 sehubungan dengan panel atau elemen lainnya.
| Perataan panel | Perataan saudara kandung | Posisi saudara kandung |
|---|---|---|
| AlignTopWithPanel | AlignTopWith | Atas |
| AlignBottomWithPanel | AlignBottomWith | Berikut |
| AlignLeftWithPanel | AlignLeftWith | LeftOf |
| AlignRightWithPanel | AlignRightWith | RightOf |
| AlignHorizontalCenterWithPanel | AlignHorizontalCenterWith | |
| AlignVerticalCenterWithPanel | AlignVerticalCenterWith |
XAML ini menunjukkan cara mengatur elemen di 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 diorientasikan secara 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 anak tidak diatur secara eksplisit, elemen ini meregang 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.
Kotak
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 terlampir.
Untuk membuat konten mencakup beberapa baris dan kolom, gunakan properti terlampir Grid.RowSpan dan Grid.ColumnSpan .
Contoh XAML ini memperlihatkan 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 selebar 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 meregang untuk mengisi sel kisi tempatnya berada.
Anda dapat mendistribusikan ruang dalam kolom atau baris dengan menggunakan Ukuran otomatis atau star. 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 star, untuk mendistribusikan ruang yang tersedia di antara baris dan kolom kisi berdasarkan proporsi tertimbang. Dalam XAML, nilai star dinyatakan sebagai * (atau n* untuk ukuran star 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 Grid dengan 4 kolom.
| Kolom | Pengukuran | Deskripsi |
|---|---|---|
| Column_1 | Auto | Ukuran kolom akan sesuai dengan isinya. |
| Column_2 | * | Setelah kolom Otomatis dihitung, kolom mendapatkan bagian dari lebar yang tersisa. Column_2 akan menjadi separuh lebar Column_4. |
| Column_3 | 44 | Lebar kolom akan menjadi 44 piksel. |
| Column_4 | 2* | Setelah kolom Otomatis dihitung, kolom mendapatkan bagian dari lebar yang tersisa. Column_4 akan menjadi 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 desainer Visual Studio XAML, hasilnya terlihat seperti ini.
VariableSizedWrapGrid
VariableSizedWrapGrid adalah panel tata letak gaya Grid 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 berukuran sama. Jika ItemHeight atau ItemWidth tidak ditentukan, maka ukuran sel pertama agar 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.
Canvas
Panel Canvas 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. Kanvas induk membaca nilai properti terlampir ini dari turunannya selama proses Susun tata letak.
Objek dalam Kanvas dapat tumpang tindih, di mana satu objek digambar di atas objek lain. Secara default, Canvas 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 durasi. Elemen dengan nilai Canvas.ZIndex tertinggi menarik terakhir dan karenanya menarik elemen lain yang memiliki ruang atau tumpang tindih yang sama dengan cara apa pun. Perhatikan bahwa nilai alfa (transparansi) dihormati, jadi meskipun elemen tumpang tindih, konten yang ditampilkan di area tumpang tindih mungkin dipadukan 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 Canvas dengan kebijaksanaan. Meskipun nyaman untuk dapat mengontrol posisi elemen di UI secara tepat untuk beberapa skenario, panel tata letak tetap menyebabkan area antarmuka pengguna 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 UI umum.
Dapatkan kode sampel
- Sampel Galeri WinUI 2 - Lihat semua kontrol XAML dalam format interaktif.
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk