Gambaran Umum GridView

mode tampilan GridView adalah salah satu mode tampilan untuk kontrol ListView. 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 menerapkan tombol sebagai tajuk 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.

Nota

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

Ilustrasi berikut ini memperlihatkan GridView tampilan ListView konten.

Cuplikan layar memperlihatkan ListView dengan output GridView yang menampilkan informasi file.

GridView kolom diwakili oleh GridViewColumn objek, yang dapat secara otomatis menyesuaikan ukuran dengan 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 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>

Tata Letak dan Gaya GridView

Sel kolom dan header kolom dengan 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 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

Gunakan kelas GridViewRowPresenter dan GridViewHeaderRowPresenter untuk memformat dan menampilkan baris dari sebuah GridView. Untuk contoh cara memformat baris dalam GridView mode tampilan, lihat Memformat Baris dalam ListView yang Mengimplementasikan GridView.

Masalah penyelarasan ketika 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 kontrol ListView. 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. Penangan acara dapat melakukan operasi seperti mengurutkan data yang ditampilkan dalam GridView berdasarkan konten kolom.

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

Susun ulang kolom dengan menggunakan metode seret dan lepas.

Pengguna dapat menyusun ulang kolom dalam GridView dengan menekan tombol mouse kiri di atas header kolom, kemudian 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 jenis GridViewColumnHeader yang dipicu ketika properti Role 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.

Nota

Anda dapat mengatur Width properti 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 Terpilih di 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 event pada tombol header kolom untuk menyediakan fungsionalitas seperti algoritma penyortiran. Untuk menangani Click peristiwa untuk header kolom tunggal, atur penanganan aktivitas pada GridViewColumnHeader. Untuk menetapkan penangan acara yang menangani peristiwa Click untuk semua header kolom, tetapkan penangan pada kontrol ListView.

Mengakses 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 untuk ListView dengan menurunkan dari kelas ViewBase. Untuk contoh mode tampilan kustom, lihat Membuat Mode Tampilan Kustom untuk ListView.

Kelas Pendukung GridView

Kelas berikut mendukung GridView mode tampilan.

Gaya dan templat

Anda dapat mengkustomisasi tampilan GridView header kolom dengan memodifikasi gaya dan templatnya. Bagian ini membahas urutan prioritas untuk properti yang Anda gunakan untuk mengkustomisasi header kolom dalam GridView mode ListView tampilan kontrol. Untuk informasi selengkapnya, lihat Apa itu gaya dan templat? dan Cara membuat templat untuk kontrol.

Menyesuaikan Header Kolom di GridView

Properti yang menentukan konten, tata letak, dan gaya header kolom dalam GridView ditemukan di banyak kelas terkait. Beberapa properti ini memiliki fungsionalitas yang serupa atau sama.

Baris dalam tabel berikut ini memperlihatkan grup properti yang melakukan fungsi yang sama. Anda dapat menggunakan properti ini untuk mengkustomisasi header kolom dalam GridView. Urutan prioritas untuk properti terkait adalah dari kanan ke kiri di mana properti di kolom kanan terjauh memiliki prioritas tertinggi. Misalnya, jika ContentTemplate diatur pada objek dan GridViewColumnHeader diatur pada yang terkait HeaderTemplateSelector, yang GridViewColumn diutamakan. Dalam skenario ini, HeaderTemplateSelector tidak berpengaruh.

Properti terkait untuk header kolom di GridView

	GridView	GridViewColumn	GridViewColumnHeader
Properti Menu Konteks	ColumnHeaderContextMenu	Tidak berlaku	ContextMenu
Tooltip Atribut	ColumnHeaderToolTip	Tidak berlaku	ToolTip
Template Header Atribut	ColumnHeaderTemplate ¹/ ColumnHeaderTemplateSelector	HeaderTemplate ¹/ HeaderTemplateSelector	ContentTemplate ¹/ ContentTemplateSelector
Properti Gaya	ColumnHeaderContainerStyle	HeaderContainerStyle	Style

¹Untuk Properti Templat Header, jika Anda mengatur properti pemilih templat dan templat, properti templat lebih diutamakan. Misalnya, jika Anda mengatur properti ContentTemplate dan ContentTemplateSelector, properti ContentTemplate lebih diutamakan.

Lihat juga

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-02-09