Gambaran Umum GridView
GridView mode tampilan adalah salah satu mode tampilan untuk ListView kontrol. Kelas GridView dan kelas pendukungnya memungkinkan Anda dan pengguna anda untuk melihat koleksi item dalam tabel yang biasanya menggunakan tombol sebagai header kolom interaktif. Topik ini memperkenalkan GridView kelas dan menguraikan penggunaannya.
Apa itu Tampilan GridView?
GridView Mode tampilan menampilkan daftar item data dengan mengikat bidang data ke kolom dan dengan menampilkan header kolom untuk mengidentifikasi bidang. Gaya default GridView mengimplementasikan tombol sebagai header kolom. Dengan menggunakan tombol untuk header kolom, Anda dapat menerapkan kemampuan interaksi pengguna yang penting; misalnya, pengguna dapat mengklik header kolom untuk mengurutkan GridView data sesuai dengan konten kolom tertentu.
Catatan
Kontrol tombol yang GridView menggunakan untuk header kolom berasal dari ButtonBase.
Ilustrasi berikut ini memperlihatkan GridView tampilan ListView konten.
GridView kolom diwakili oleh GridViewColumn objek, yang dapat secara otomatis mengukur kontennya. Secara opsional, Anda dapat secara eksplisit mengatur GridViewColumn ke lebar tertentu. Anda dapat mengubah ukuran kolom dengan menyeret gripper di antara header kolom. Anda juga dapat menambahkan, menghapus, mengganti, dan menyusun ulang kolom secara dinamis karena fungsionalitas ini dibangun ke dalam GridView. Namun, GridView tidak dapat langsung memperbarui data yang ditampilkannya.
Contoh berikut menunjukkan cara menentukan GridView yang menampilkan data karyawan. Dalam contoh ini, ListView mendefinisikan EmployeeInfoDataSource sebagai ItemsSource. Definisi properti dari DisplayMemberBinding konten yang diikat GridViewColumn ke EmployeeInfoDataSource kategori data.
<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}">
<ListView.View>
<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Employee Information">
<GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>
<GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Width="100">
<GridViewColumnHeader>Last Name
<GridViewColumnHeader.ContextMenu>
<ContextMenu MenuItem.Click="LastNameCM_Click" Name="LastNameCM">
<MenuItem Header="Ascending" />
<MenuItem Header="Descending" />
</ContextMenu>
</GridViewColumnHeader.ContextMenu>
</GridViewColumnHeader>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" Header="Employee No." Width="100"/>
</GridView>
</ListView.View>
</ListView>
Ilustrasi berikut ini memperlihatkan tabel yang dibuat contoh sebelumnya. Kontrol GridView menampilkan data dari objek ItemsSource:
Tata Letak dan Gaya GridView
Sel kolom dan header kolom memiliki lebar yang GridViewColumn sama. Secara default, setiap kolom mengukur lebarnya agar pas dengan kontennya. Secara opsional, Anda dapat mengatur kolom ke lebar tetap.
Konten data terkait ditampilkan dalam baris horizontal. Misalnya, dalam ilustrasi sebelumnya, nama belakang, nama depan, dan nomor ID setiap karyawan ditampilkan sebagai set karena muncul di baris horizontal.
Menentukan dan Menata Kolom dalam GridView
Saat menentukan bidang data untuk ditampilkan dalam GridViewColumn, gunakan DisplayMemberBindingproperti , , CellTemplateatau CellTemplateSelector . Properti DisplayMemberBinding lebih diutamakan daripada salah satu properti templat.
Untuk menentukan perataan konten dalam kolom GridView, tentukan CellTemplate. Jangan gunakan HorizontalContentAlignment properti dan VerticalContentAlignment untuk ListView konten yang ditampilkan dengan menggunakan GridView.
Untuk menentukan properti templat dan gaya untuk header kolom, gunakan GridViewkelas , GridViewColumn, dan GridViewColumnHeader . Untuk informasi selengkapnya, lihat Gambaran Umum Gaya dan Templat Header Kolom GridView.
Menambahkan Elemen Visual ke GridView
Untuk menambahkan elemen visual, seperti CheckBox dan Button kontrol, ke GridView mode tampilan, gunakan templat atau gaya.
Jika Anda secara eksplisit menentukan elemen visual sebagai item data, elemen tersebut hanya dapat muncul satu kali dalam GridView. Batasan ini ada karena elemen hanya dapat memiliki satu induk dan oleh karena itu, hanya dapat muncul satu kali di pohon visual.
Menata Baris dalam GridView
GridViewRowPresenter Gunakan kelas dan GridViewHeaderRowPresenter untuk memformat dan menampilkan baris .GridView Untuk contoh cara menata baris dalam GridView mode tampilan, lihat Gaya Baris dalam ListView yang Mengimplementasikan GridView.
Masalah perataan saat Anda menggunakan ItemContainerStyle
Untuk mencegah masalah perataan antara header kolom dan sel, jangan atur properti atau tentukan templat yang memengaruhi lebar item dalam ItemContainerStyle. Misalnya, jangan atur Margin properti atau tentukan ControlTemplate yang menambahkan CheckBox ke ItemContainerStyle yang ditentukan pada ListView kontrol. Sebagai gantinya, tentukan properti dan templat yang memengaruhi lebar kolom langsung pada kelas yang menentukan GridView mode tampilan.
Misalnya, untuk menambahkan CheckBox ke baris dalam GridView mode tampilan, tambahkan CheckBox ke DataTemplate, lalu atur CellTemplate properti ke DataTemplate.
Interaksi Pengguna dengan GridView
Saat Anda menggunakan GridView di aplikasi Anda, pengguna dapat berinteraksi dengan dan memodifikasi pemformatan GridView. Misalnya, pengguna dapat menyusun ulang kolom, mengubah ukuran kolom, memilih item dalam tabel, dan menggulir konten. Anda juga dapat menentukan penanganan aktivitas yang merespons saat pengguna mengklik tombol header kolom. Penanganan aktivitas dapat melakukan operasi seperti mengurutkan data yang ditampilkan sesuai GridView dengan konten kolom.
Daftar berikut membahas secara lebih rinci kemampuan penggunaan GridView untuk interaksi pengguna:
Urutkan ulang kolom dengan menggunakan metode seret dan letakkan.
Pengguna dapat menyusun ulang kolom dalam dengan GridView menekan tombol mouse kiri saat berada di atas header kolom lalu menyeret kolom tersebut ke posisi baru. Saat pengguna menyeret header kolom, versi mengambang header ditampilkan serta garis hitam solid yang menunjukkan tempat menyisipkan kolom.
Jika Anda ingin mengubah gaya default untuk versi mengambang header, tentukan ControlTemplate untuk GridViewColumnHeader jenis yang dipicu saat Role properti diatur ke Floating. Untuk informasi selengkapnya, lihat Membuat Gaya untuk Header Kolom Tampilan Kisi Terseret.
Mengubah ukuran kolom ke kontennya.
Pengguna dapat mengeklik dua kali gripper di sebelah kanan header kolom untuk mengubah ukuran kolom agar sesuai dengan kontennya.
Catatan
Anda dapat mengatur Width properti ke
Double.NaNuntuk menghasilkan efek yang sama.Pilih item baris.
Pengguna dapat memilih satu atau beberapa item dalam GridView.
Jika Anda ingin mengubah Style item yang dipilih, lihat Menggunakan Pemicu ke Gaya Item Terpilih dalam ListView.
Gulir untuk melihat konten yang awalnya tidak terlihat di layar.
Jika ukuran GridView tidak cukup besar untuk menampilkan semua item, pengguna dapat menggulir secara horizontal atau vertikal dengan menggunakan bilah gulir, yang disediakan oleh ScrollViewer kontrol. ScrollBar disembunyikan jika semua konten terlihat dalam arah tertentu. Header kolom tidak menggulir dengan bilah gulir vertikal, tetapi gulir secara horizontal.
Berinteraksi dengan kolom dengan mengklik tombol header kolom.
Saat pengguna mengklik tombol header kolom, mereka dapat mengurutkan data yang ditampilkan di kolom jika Anda telah menyediakan algoritma pengurutan.
Anda dapat menangani Click peristiwa untuk tombol header kolom untuk menyediakan fungsionalitas seperti algoritma pengurutan. Untuk menangani Click peristiwa untuk header kolom tunggal, atur penanganan aktivitas pada GridViewColumnHeader. Untuk mengatur penanganan aktivitas yang menangani Click peristiwa untuk semua header kolom, atur handler pada ListView kontrol.
Mendapatkan Tampilan Kustom Lainnya
KelasGridView, yang berasal dari ViewBase kelas abstrak, hanyalah salah satu mode tampilan yang mungkin untuk kelas.ListView Anda dapat membuat tampilan kustom lainnya dengan ListView turunan dari ViewBase kelas. Untuk contoh mode tampilan kustom, lihat Membuat Mode Tampilan Kustom untuk ListView.
Kelas Pendukung GridView
Kelas berikut mendukung GridView mode tampilan.
Baca juga
.NET Desktop feedback