Tentukan tata letak CollectionView
Telusuri sampelUI Aplikasi Multi-platform .NET (.NET MAUI) CollectionView menentukan properti berikut yang mengontrol tata letak:
ItemsLayout, dari jenisIItemsLayout, menentukan tata letak yang akan digunakan.ItemSizingStrategy, dari jenisItemSizingStrategy, menentukan strategi pengukuran item yang akan digunakan.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data.
Secara default, akan CollectionView menampilkan itemnya dalam daftar vertikal. Namun, salah satu tata letak berikut dapat digunakan:
- Daftar vertikal – daftar kolom tunggal yang tumbuh secara vertikal saat item baru ditambahkan.
- Daftar horizontal – daftar baris tunggal yang tumbuh secara horizontal saat item baru ditambahkan.
- Kisi vertikal – kisi multi-kolom yang tumbuh secara vertikal saat item baru ditambahkan.
- Kisi horizontal – kisi multi-baris yang tumbuh secara horizontal saat item baru ditambahkan.
Tata letak ini dapat ditentukan dengan mengatur ItemsLayout properti ke kelas yang berasal dari ItemsLayout kelas . Kelas ini mendefinisikan properti berikut:
Orientation, dari jenisItemsLayoutOrientation, menentukan arah di mana perluasan CollectionView sebagai item ditambahkan.SnapPointsAlignment, dari jenisSnapPointsAlignment, menentukan bagaimana titik snap diselaraskan dengan item.SnapPointsType, dari jenisSnapPointsType, menentukan perilaku titik rekam jepret saat menggulir.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data. Untuk informasi selengkapnya tentang titik rekam jepret, lihat Titik rekam jepret di Kontrol yang menggulir di CollectionView.
Enumerasi ItemsLayoutOrientation menentukan anggota berikut:
Verticalmenunjukkan bahwa CollectionView akan diperluas secara vertikal saat item ditambahkan.Horizontalmenunjukkan bahwa CollectionView akan diperluas secara horizontal saat item ditambahkan.
Kelas LinearItemsLayout mewarisi dari ItemsLayout kelas, dan menentukan ItemSpacing properti, jenis double, yang mewakili ruang kosong di sekitar setiap item. Nilai default properti ini adalah 0, dan nilainya harus selalu lebih besar dari atau sama dengan 0. Kelas ini LinearItemsLayout juga mendefinisikan statis Vertical dan Horizontal anggota. Anggota ini masing-masing dapat digunakan untuk membuat daftar vertikal atau horizontal. Atau, LinearItemsLayout objek dapat dibuat, menentukan ItemsLayoutOrientation anggota enumerasi sebagai argumen.
Kelas GridItemsLayout mewarisi dari ItemsLayout kelas , dan menentukan properti berikut:
VerticalItemSpacing, dari jenisdouble, yang mewakili ruang kosong vertikal di sekitar setiap item. Nilai default properti ini adalah 0, dan nilainya harus selalu lebih besar dari atau sama dengan 0.HorizontalItemSpacing, dari jenisdouble, yang mewakili ruang kosong horizontal di sekitar setiap item. Nilai default properti ini adalah 0, dan nilainya harus selalu lebih besar dari atau sama dengan 0.Span, dari jenisint, yang menunjukkan jumlah kolom atau baris untuk ditampilkan dalam kisi. Nilai default properti ini adalah 1, dan nilainya harus selalu lebih besar dari atau sama dengan 1.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data.
Catatan
CollectionView menggunakan mesin tata letak asli untuk melakukan tata letak.
Daftar vertikal
Secara default, CollectionView akan menampilkan itemnya dalam tata letak daftar vertikal. Oleh karena itu, tidak perlu mengatur ItemsLayout properti untuk menggunakan tata letak ini:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Namun, untuk kelengkapan, di XAML CollectionView dapat diatur untuk menampilkan itemnya dalam daftar vertikal dengan mengatur propertinya ItemsLayout ke VerticalList:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="VerticalList">
...
</CollectionView>
Atau, ini juga dapat dicapai dengan mengatur ItemsLayout properti ke LinearItemsLayout objek, menentukan VerticalItemsLayoutOrientation anggota enumerasi sebagai Orientation nilai properti:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Vertical
};
Ini menghasilkan daftar kolom tunggal, yang tumbuh secara vertikal saat item baru ditambahkan:
Tip
Menempatkan CollectionView di dalam VerticalStackLayout dapat menghentikan CollectionView pengguliran, dan dapat membatasi jumlah item yang ditampilkan. Dalam situasi ini, ganti VerticalStackLayout dengan Grid.
Daftar horizontal
Di XAML, CollectionView dapat menampilkan itemnya dalam daftar horizontal dengan mengatur propertinya ItemsLayout ke HorizontalList:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Atau, tata letak ini juga dapat dicapai dengan mengatur ItemsLayout properti ke LinearItemsLayout objek, menentukan HorizontalItemsLayoutOrientation anggota enumerasi sebagai Orientation nilai properti:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Horizontal
};
Ini menghasilkan daftar baris tunggal, yang tumbuh secara horizontal saat item baru ditambahkan:
Kisi vertikal
Di XAML, CollectionView dapat menampilkan itemnya dalam kisi vertikal dengan mengatur propertinya ItemsLayout ke VerticalGrid:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="VerticalGrid, 2">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Atau, tata letak ini juga dapat dicapai dengan mengatur ItemsLayout properti ke GridItemsLayout objek yang propertinya Orientation diatur ke Vertical:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};
Secara default, vertikal GridItemsLayout akan menampilkan item dalam satu kolom. Namun, contoh ini mengatur properti ke GridItemsLayout.Span 2. Ini menghasilkan kisi dua kolom, yang tumbuh secara vertikal saat item baru ditambahkan:
Kisi horizontal
Di XAML, CollectionView dapat menampilkan itemnya dalam kisi horizontal dengan mengatur propertinya ItemsLayout ke HorizontalGrid:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="HorizontalGrid, 4">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Atau, tata letak ini juga dapat dicapai dengan mengatur ItemsLayout properti ke GridItemsLayout objek yang propertinya Orientation diatur ke Horizontal:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal"
Span="4" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};
Secara default, horizontal GridItemsLayout akan menampilkan item dalam satu baris. Namun, contoh ini mengatur properti ke GridItemsLayout.Span 4. Ini menghasilkan kisi empat baris, yang tumbuh secara horizontal saat item baru ditambahkan:
Header dan footer
CollectionView dapat menyajikan header dan footer yang menggulir dengan item dalam daftar. Header dan footer dapat berupa string, tampilan, atau DataTemplate objek.
CollectionView menentukan properti berikut untuk menentukan header dan footer:
Header, dari jenisobject, menentukan string, pengikatan, atau tampilan yang akan ditampilkan di awal daftar.HeaderTemplate, dari jenis DataTemplate, menentukan DataTemplate untuk digunakan untuk memformatHeader.Footer, dari jenisobject, menentukan string, pengikatan, atau tampilan yang akan ditampilkan di akhir daftar.FooterTemplate, dari jenis DataTemplate, menentukan DataTemplate untuk digunakan untuk memformatFooter.
Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti dapat menjadi target pengikatan data.
Saat header ditambahkan ke tata letak yang tumbuh secara horizontal, dari kiri ke kanan, header ditampilkan di sebelah kiri daftar. Demikian pula, ketika footer ditambahkan ke tata letak yang tumbuh secara horizontal, dari kiri ke kanan, footer ditampilkan di sebelah kanan daftar.
Menampilkan string di header dan footer
Properti Header dan Footer dapat diatur ke string nilai, seperti yang ditunjukkan dalam contoh berikut:
<CollectionView ItemsSource="{Binding Monkeys}"
Header="Monkeys"
Footer="2019">
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
Header = "Monkeys",
Footer = "2019"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Kode ini menghasilkan cuplikan layar berikut, dengan header yang ditampilkan di cuplikan layar iOS, dan footer yang ditampilkan di cuplikan layar Android:
Menampilkan tampilan di header dan footer
Properti Header dan Footer masing-masing dapat diatur ke tampilan. Ini bisa berupa tampilan tunggal, atau tampilan yang berisi beberapa tampilan turunan. Contoh berikut menunjukkan Header properti dan Footer yang masing-masing diatur ke StackLayout objek yang berisi Label objek:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray">
<Label Margin="10,0,0,0"
Text="Monkeys"
FontSize="12"
FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.Footer>
<StackLayout BackgroundColor="LightGray">
<Label Margin="10,0,0,0"
Text="Friends of Xamarin Monkey"
FontSize="12"
FontAttributes="Bold" />
</StackLayout>
</CollectionView.Footer>
...
</CollectionView>
Kode C# yang setara adalah:
StackLayout headerStackLayout = new StackLayout();
header.StackLayout.Add(new Label { Text = "Monkeys", ... } );
StackLayout footerStackLayout = new StackLayout();
footerStackLayout.Add(new Label { Text = "Friends of Xamarin Monkey", ... } );
CollectionView collectionView = new CollectionView
{
Header = headerStackLayout,
Footer = footerStackLayout
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Kode ini menghasilkan cuplikan layar berikut, dengan header yang ditampilkan di cuplikan layar iOS, dan footer yang ditampilkan di cuplikan layar Android:
Menampilkan header dan footer templat
Properti HeaderTemplate dan FooterTemplate dapat diatur ke DataTemplate objek yang digunakan untuk memformat header dan footer. Dalam skenario ini, Header properti dan Footer harus mengikat ke sumber saat ini agar templat diterapkan, seperti yang ditunjukkan dalam contoh berikut:
<CollectionView ItemsSource="{Binding Monkeys}"
Header="{Binding .}"
Footer="{Binding .}">
<CollectionView.HeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="LightGray">
<Label Margin="10,0,0,0"
Text="Monkeys"
FontSize="12"
FontAttributes="Bold" />
</StackLayout>
</DataTemplate>
</CollectionView.HeaderTemplate>
<CollectionView.FooterTemplate>
<DataTemplate>
<StackLayout BackgroundColor="LightGray">
<Label Margin="10,0,0,0"
Text="Friends of Xamarin Monkey"
FontSize="12"
FontAttributes="Bold" />
</StackLayout>
</DataTemplate>
</CollectionView.FooterTemplate>
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
HeaderTemplate = new DataTemplate(() =>
{
return new StackLayout { };
}),
FooterTemplate = new DataTemplate(() =>
{
return new StackLayout { };
})
};
collectionView.SetBinding(ItemsView.HeaderProperty, ".");
collectionView.SetBinding(ItemsView.FooterProperty, ".");
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Kode ini menghasilkan cuplikan layar berikut, dengan header yang ditampilkan di cuplikan layar iOS, dan footer yang ditampilkan di cuplikan layar Android:
Penspasian item
Secara default, tidak ada spasi di antara setiap item dalam CollectionView. Perilaku ini dapat diubah dengan mengatur properti pada tata letak item yang CollectionViewdigunakan oleh .
Saat mengatur CollectionView propertinya ItemsLayout ke LinearItemsLayout objek, LinearItemsLayout.ItemSpacing properti dapat diatur ke double nilai yang mewakili spasi di antara item:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Catatan
Properti LinearItemsLayout.ItemSpacing memiliki set panggilan balik validasi, yang memastikan bahwa nilai properti selalu lebih besar dari atau sama dengan 0.
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
ItemSpacing = 20
}
};
Kode ini menghasilkan daftar kolom tunggal vertikal yang memiliki spasi 20 di antara item:
Saat mengatur CollectionView propertinya ItemsLayout ke GridItemsLayout objek, GridItemsLayout.VerticalItemSpacing properti dan GridItemsLayout.HorizontalItemSpacing dapat diatur ke double nilai yang mewakili ruang kosong secara vertikal dan horizontal di antara item:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2"
VerticalItemSpacing="20"
HorizontalItemSpacing="30" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Catatan
Properti GridItemsLayout.VerticalItemSpacing dan GridItemsLayout.HorizontalItemSpacing memiliki panggilan balik validasi yang ditetapkan, yang memastikan bahwa nilai properti selalu lebih besar dari atau sama dengan 0.
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
{
VerticalItemSpacing = 20,
HorizontalItemSpacing = 30
}
};
Kode ini menghasilkan kisi dua kolom vertikal yang memiliki spasi vertikal 20 antara item dan spasi horizontal 30 di antara item:
Ukuran item
Secara default, setiap item dalam diukur CollectionView secara individual dan berukuran, asalkan elemen UI dalam DataTemplate tidak menentukan ukuran tetap. Perilaku ini, yang dapat diubah, ditentukan oleh CollectionView.ItemSizingStrategy nilai properti. Nilai properti ini dapat diatur ke salah ItemSizingStrategy satu anggota enumerasi:
MeasureAllItems– setiap item diukur secara individual. Ini adalah nilai default.MeasureFirstItem– hanya item pertama yang diukur, dengan semua item berikutnya diberi ukuran yang sama dengan item pertama.
Penting
Strategi MeasureFirstItem ukuran akan menghasilkan peningkatan performa ketika digunakan dalam situasi di mana ukuran item dimaksudkan untuk seragam di semua item.
Contoh kode berikut menunjukkan pengaturan ItemSizingStrategy properti:
<CollectionView ...
ItemSizingStrategy="MeasureFirstItem">
...
</CollectionView>
Kode C# yang setara adalah:
CollectionView collectionView = new CollectionView
{
...
ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};
Mengubah ukuran dinamis item
Item dalam CollectionView dapat diubah ukurannya secara dinamis pada runtime dengan mengubah properti elemen terkait tata letak dalam DataTemplate. Misalnya, contoh kode berikut mengubah HeightRequest properti Image dan WidthRequest objek:
void OnImageTapped(object sender, EventArgs e)
{
Image image = sender as Image;
image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}
Penanganan OnImageTapped aktivitas dijalankan sebagai respons terhadap objek yang Image diketuk, dan mengubah dimensi gambar sehingga lebih mudah dilihat:
Tata letak kanan-ke-kiri
CollectionView dapat mengatur tata letak kontennya dalam arah alur kanan-ke-kiri dengan mengatur propertinya FlowDirection ke RightToLeft. Namun, FlowDirection properti idealnya harus diatur pada halaman atau tata letak akar, yang menyebabkan semua elemen dalam halaman, atau tata letak akar, merespons arah alur:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CollectionViewDemos.Views.VerticalListFlowDirectionPage"
Title="Vertical list (RTL FlowDirection)"
FlowDirection="RightToLeft">
<Grid Margin="20">
<CollectionView ItemsSource="{Binding Monkeys}">
...
</CollectionView>
</Grid>
</ContentPage>
Default FlowDirection untuk elemen dengan induk adalah MatchParent. Oleh karena itu, CollectionView mewarisi FlowDirection nilai properti dari StackLayout, yang pada gilirannya FlowDirection mewarisi nilai properti dari ContentPage. Ini menghasilkan tata letak kanan-ke-kiri yang diperlihatkan dalam cuplikan layar berikut:
Untuk informasi selengkapnya tentang arah alur, lihat Pelokalan kanan ke kiri.
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