Bagikan melalui

Gambaran Umum GridView

mode tampilan GridView adalah salah satu mode tampilan untuk kontrol ListView. Kelas GridView dan kelas pendukungnya memungkinkan Anda dan pengguna untuk melihat koleksi item dalam tabel yang biasanya menggunakan tombol sebagai header kolom interaktif. Topik ini memperkenalkan kelas GridView dan menguraikan penggunaannya.

Apa itu Tampilan GridView?

Mode tampilan GridView 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 data GridView sesuai dengan konten kolom tertentu.

Nota

Kontrol tombol yang GridView gunakan untuk header kolom berasal dari ButtonBase.

Ilustrasi berikut memperlihatkan pandangan GridView dari konten ListView.

Cuplikan layar yang memperlihatkan tampilan konten ListView dalam GridView.

GridView kolom diwakili oleh objek GridViewColumn, 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 DisplayMemberBinding mengikat konten GridViewColumn ke kategori data EmployeeInfoDataSource.


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

Cuplikan layar yang menampilkan ListView dengan output GridView.

Tata Letak dan Gaya GridView

Sel-sel kolom dan kepala kolom pada GridViewColumn memiliki lebar yang 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 properti DisplayMemberBinding, CellTemplate, atau CellTemplateSelector. Properti DisplayMemberBinding lebih diutamakan daripada salah satu properti templat.

Untuk menentukan perataan konten dalam kolom GridView, tentukan CellTemplate. Jangan gunakan properti HorizontalContentAlignment dan VerticalContentAlignment untuk konten ListView yang ditampilkan dengan menggunakan GridView.

Untuk menentukan properti templat dan gaya untuk header kolom, gunakan kelas GridView, 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 kontrol CheckBox dan Button, ke mode tampilan GridView, 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

Gunakan kelas GridViewRowPresenter dan GridViewHeaderRowPresenter untuk memformat dan menampilkan baris GridView. Untuk contoh cara mengatur baris dalam mode tampilan GridView, lihat Mengatur Gaya Baris dalam ListView yang Menggunakan 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 properti Margin atau tentukan ControlTemplate yang menambahkan CheckBox ke ItemContainerStyle yang ditentukan pada kontrol ListView. Sebagai gantinya, tentukan properti dan templat yang memengaruhi lebar kolom langsung pada kelas yang menentukan mode tampilan GridView.

Misalnya, untuk menambahkan CheckBox ke baris dalam mode tampilan GridView, tambahkan CheckBox ke DataTemplate, lalu atur properti CellTemplate ke DataTemplatetersebut.

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. Penangan acara dapat melakukan operasi seperti mengurutkan data yang ditampilkan di GridView sesuai dengan isi kolom.

Daftar berikut membahas secara lebih rinci kemampuan menggunakan GridView untuk interaksi pengguna:

  • Urutkan ulang kolom dengan cara drag and drop.

    Pengguna dapat menyusun ulang kolom dalam GridView dengan 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 sebuah header, tentukan ControlTemplate untuk tipe GridViewColumnHeader yang dipicu ketika atribut Role diatur ke Floating. Untuk informasi selengkapnya, lihat Membuat Gaya untuk Header Kolom Tampilan Kisi Terseret.

  • Ubah ukuran kolom sesuai dengan kontennya.

    Pengguna dapat mengeklik dua kali gripper di sebelah kanan header kolom untuk mengubah ukuran kolom agar sesuai dengan kontennya.

    Nota

    Anda dapat mengatur properti Width ke Double.NaN untuk 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 untuk Mengubah Gaya Item yang Dipilih 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 kontrol ScrollViewer. 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 mengelola event Click untuk tombol header kolom guna menyediakan fungsionalitas seperti algoritma pengurutan. Untuk menangani peristiwa Click untuk header kolom tunggal, atur penanganan aktivitas pada GridViewColumnHeader. Untuk mengatur penanganan aktivitas yang menangani peristiwa Click untuk semua header kolom, atur handler pada kontrol ListView.

Mendapatkan Tampilan Kustom Lainnya

Kelas GridView, yang berasal dari kelas abstrak ViewBase, hanyalah salah satu mode tampilan yang mungkin untuk kelas ListView. Anda dapat membuat tampilan kustom lainnya untuk ListView dengan turunan dari kelas ViewBase. Untuk contoh mode tampilan kustom, lihat Membuat Mode Tampilan Kustom untuk ListView.

Kelas Pendukung GridView

Kelas berikut mendukung mode tampilan GridView.

Lihat juga