Bagikan melalui

Tentang Bilah Gulir

Jendela dapat menampilkan objek data, seperti dokumen atau bitmap, yang lebih besar dari area klien jendela. Saat disediakan dengan bilah gulir, pengguna dapat menggulir objek data di area klien untuk melihat bagian objek yang membentang di luar batas jendela.

Bilah gulir harus disertakan di jendela mana pun yang konten area kliennya meluas di luar batas jendela. Orientasi bilah gulir menentukan arah pengguliran terjadi saat pengguna mengoperasikan bilah gulir. Bilah gulir horizontal memungkinkan pengguna untuk menggulir konten jendela ke kiri atau kanan. Bilah gulir vertikal memungkinkan pengguna untuk menggulir konten ke atas atau ke bawah.

Topik berikut dibahas di bagian ini.

Bagian dari Bilah Gulir

Bilah gulir terdiri dari batang berbayang dengan tombol panah di setiap ujungnya dan kotak penggulir (terkadang disebut ibu jari) di antara tombol panah tersebut. Bilah gulir mewakili panjang keseluruhan atau lebar objek data di area klien jendela; kotak gulir mewakili bagian objek yang terlihat di area klien. Posisi kotak gulir berubah setiap kali pengguna menggulir objek data untuk menampilkan bagian yang berbeda darinya. Sistem juga menyesuaikan ukuran kotak gulir sehingga menunjukkan bagian mana dari seluruh objek data yang saat ini terlihat di jendela. Jika sebagian besar objek terlihat, kotak gulir menempati sebagian besar poros bilah gulir. Demikian pula, jika hanya sebagian kecil objek yang terlihat, kotak gulir menempati bagian kecil dari poros bilah gulir.

Pengguna menggulir konten jendela dengan mengklik salah satu tombol panah, dengan mengklik area di poros bilah gulir berteduh, atau dengan menyeret kotak gulir. Saat pengguna mengklik tombol panah, aplikasi menggulir konten satu unit (biasanya satu baris atau kolom). Saat pengguna mengklik area yang diarsir, aplikasi menggeser konten sebesar satu halaman. Jumlah pengguliran yang terjadi saat pengguna menyeret kotak gulir tergantung pada jarak pengguna menyeret kotak gulir dan pada rentang gulir bilah gulir. Untuk informasi selengkapnya tentang rentang gulir, lihat Posisi Kotak Gulir dan Rentang Gulir.

Cuplikan layar berikut menunjukkan kontrol edit yang kaya dengan bilah gulir vertikal dan horizontal, sebagaimana muncul di Windows Vista. Bilah gulir vertikal saat ini "panas" karena penunjuk mouse mengarah ke atasnya ketika bidikan layar diambil.

cuplikan layar kontrol edit kaya dengan bilah gulir

Bilah Gulir Standar dan Kontrol Bilah Gulir

Bilah gulir disertakan dalam jendela baik sebagai bilah gulir standar atau sebagai kontrol bilah gulir. Bilah gulir standar terletak di area nonklien jendela. Ini dibuat bersamaan dengan jendela dan akan muncul saat jendela ditampilkan. Satu-satunya tujuan bilah gulir standar adalah untuk memungkinkan pengguna menghasilkan permintaan pengguliran untuk melihat seluruh konten area klien. Anda dapat menyertakan bilah gulir standar di jendela dengan menentukan WS_HSCROLL, WS_VSCROLL, atau kedua gaya saat Anda membuat jendela. Gaya WS_HSCROLL membuat bilah gulir horizontal yang diposisikan di bagian bawah area klien. Gaya WS_VSCROLL membuat bilah gulir vertikal yang diposisikan di sebelah kanan area klien. Nilai metrik sistem SM_CXHSCROLL dan SM_CYHSCROLL menentukan lebar dan tinggi bilah gulir horizontal standar. Nilai SM_CXVSCROLL dan SM_CYVSCROLL menentukan lebar dan tinggi bilah gulir vertikal standar. Bilah gulir standar adalah bagian dari jendela terkait dan karena itu tidak memiliki handel jendela sendiri.

Kontrol bilah gulir adalah jendela kontrol milik kelas jendela SCROLLBAR. Kontrol bilah gulir muncul dan berfungsi seperti bilah gulir standar, tetapi merupakan jendela terpisah. Sebagai jendela yang terpisah, kontrol scrollbar langsung mendapatkan fokus input. Tidak seperti bilah gulir standar, kontrol bilah gulir juga memiliki antarmuka keyboard bawaan.

Anda dapat menggunakan kontrol bilah gulir sebanyak yang diperlukan dalam satu jendela. Saat membuat kontrol bilah gulir, Anda harus menentukan ukuran dan posisi bilah gulir. Namun, jika jendela kontrol bilah gulir dapat diubah ukurannya, penyesuaian ukuran bilah gulir harus dilakukan setiap kali ukuran jendela berubah.

Keuntungan menggunakan bilah gulir standar adalah sistem membuat bilah gulir dan secara otomatis mengatur ukuran dan posisinya. Namun, bilah gulir standar terkadang terlalu membatasi. Misalnya, Anda ingin membagi area klien menjadi kuadran dan menggunakan sekumpulan bilah gulir terpisah untuk mengontrol konten setiap kuadran. Anda tidak dapat menggunakan bilah gulir standar karena Anda hanya dapat membuat satu set bilah gulir untuk jendela tertentu. Gunakan kontrol bilah gulir sebagai gantinya, karena Anda dapat menambahkan sebanyak mungkin ke jendela yang Anda inginkan.

Aplikasi dapat menyediakan kontrol bilah gulir untuk tujuan selain menggulir konten jendela. Misalnya, aplikasi pengaman layar mungkin menyediakan bilah gulir untuk mengatur kecepatan di mana grafik dipindahkan di layar.

Kontrol bilah gulir dapat memiliki sejumlah gaya yang berfungsi untuk mengontrol orientasi dan posisi bilah gulir. Anda menentukan gaya yang Anda inginkan saat memanggil fungsi CreateWindowEx untuk membuat kontrol bilah gulir. Beberapa gaya membuat kontrol bilah gulir yang menggunakan lebar atau tinggi default. Namun, Anda harus selalu menentukan koordinat x- dan y dan dimensi lain dari bilah gulir.

Untuk tabel gaya kontrol bilah gulir, lihat Gaya Kontrol Bilah Gulir.

Nota

Untuk menggunakan gaya visual dengan bilah gulir, aplikasi harus menyertakan manifes dan harus memanggil InitCommonControls di awal program. Untuk informasi tentang gaya visual, lihat Visual Styles. Untuk informasi tentang manifes, lihat Mengaktifkan Gaya Visual.

 

Posisi Kotak Gulir dan Rentang Pengguliran

Posisi kotak gulir direpresentasikan sebagai bilangan bulat; relatif terhadap ujung kiri atau atas bilah gulir, tergantung pada apakah bilah gulir horizontal atau vertikal. Posisi harus berada dalam nilai minimum dan maksimum rentang gulir. Misalnya, di bilah gulir dengan rentang 0 hingga 100, posisi 50 berada di tengah, dengan posisi yang tersisa didistribusikan secara merata di sepanjang bilah gulir. Rentang awal tergantung pada bilah gulir. Bilah gulir standar memiliki rentang awal 0 hingga 100; kontrol bilah gulir memiliki rentang kosong (nilai minimum dan maksimum adalah nol), kecuali Anda menyediakan rentang eksplisit saat kontrol dibuat. Anda dapat mengubah rentang kapan saja. Anda dapat menggunakan fungsiSetScrollInfo untuk mengatur nilai rentang, dan fungsiGetScrollInfo untuk mengambil nilai rentang saat ini.

Aplikasi biasanya menyesuaikan rentang gulir ke bilangan bulat yang nyaman, sehingga mudah untuk menerjemahkan posisi kotak gulir ke dalam nilai yang sesuai dengan objek data yang akan digulir. Misalnya, jika aplikasi harus menampilkan 260 baris file teks di jendela yang hanya dapat menampilkan 16 baris pada satu waktu, rentang bilah gulir vertikal dapat diatur ke 1 hingga 244. Jika kotak gulir berada di posisi 1, baris pertama akan berada di bagian atas jendela. Jika kotak gulir berada di posisi 244, baris terakhir (baris 260) akan berada di bagian bawah jendela. Jika aplikasi mencoba menentukan nilai posisi yang kurang dari minimum atau lebih dari maksimum, nilai rentang gulir minimum atau maksimum digunakan sebagai gantinya.

Anda dapat mengatur ukuran halaman untuk bilah gulir. Ukuran halaman mewakili jumlah unit data yang dapat pas di area klien jendela pemilik mengingat ukurannya saat ini. Misalnya, jika area klien dapat menampung 16 baris teks, aplikasi akan mengatur ukuran halaman menjadi 16. Sistem menggunakan ukuran halaman, bersama dengan rentang gulir dan panjang poros bilah gulir, untuk mengatur ukuran kotak gulir. Setiap kali jendela yang berisi bilah gulir diubah ukurannya, aplikasi harus memanggil fungsiSetScrollInfo untuk mengatur ukuran halaman. Aplikasi dapat mengambil ukuran halaman saat ini dengan memanggil fungsi pengiriman GetScrollInfo.

Untuk membuat hubungan yang berguna antara rentang bilah gulir dan objek data, aplikasi harus menyesuaikan rentang setiap kali ukuran objek data berubah.

Saat pengguna memindahkan kotak gulir di bilah gulir, bilah gulir melaporkan posisi kotak gulir sebagai bilangan bulat dalam rentang gulir. Jika posisi adalah nilai minimum, kotak gulir berada di bagian atas bilah gulir vertikal atau di ujung kiri bilah gulir horizontal. Jika posisi adalah nilai maksimum, kotak gulir berada di bagian bawah bilah gulir vertikal atau di ujung kanan bilah gulir horizontal.

Nilai maksimum yang dapat dilaporkan bilah gulir (yaitu, posisi pengguliran maksimum) tergantung pada ukuran halaman. Jika bilah gulir memiliki ukuran halaman yang lebih besar dari satu, posisi pengguliran maksimum kurang dari nilai rentang maksimum. Anda bisa menggunakan rumus berikut untuk menghitung posisi gulir maksimum:

MaxScrollPos = MaxRangeValue - (PageSize - 1)

Aplikasi harus dapat memindahkan kotak gulir pada bilah gulir. Meskipun pengguna membuat permintaan untuk menggulir di bilah gulir, bilah gulir tidak secara otomatis memperbarui posisi kotak gulir. Sebaliknya, ini meneruskan permintaan ke jendela induk, yang harus menggulir data dan memperbarui posisi kotak gulir. Aplikasi menggunakan fungsi SetScrollInfo untuk memperbarui posisi kotak gulir; jika tidak, ia menggunakan fungsisetScrollPos. Karena mengontrol pergerakan kotak gulir, aplikasi dapat memindahkan kotak gulir dengan tahapan yang paling sesuai untuk data saat digulir.

Visibilitas Bilah Gulir

Sistem menyembunyikan dan menonaktifkan bilah gulir standar ketika nilai minimum dan maksimum yang sama ditentukan. Sistem juga menyembunyikan dan menonaktifkan bilah gulir standar jika Anda menentukan ukuran halaman yang menyertakan seluruh rentang gulir bilah gulir. Ini adalah cara untuk menyembunyikan bilah gulir sementara ketika tidak diperlukan untuk konten area klien. Tidak perlu membuat permintaan gulir melalui bilah gulir saat disembunyikan. Sistem mengaktifkan bilah gulir dan memperlihatkannya lagi saat Anda mengatur nilai minimum dan maksimum ke nilai yang tidak sama dan ketika ukuran halaman tidak menyertakan seluruh rentang gulir. Fungsi ShowScrollBar juga dapat digunakan untuk menyembunyikan atau menampilkan bilah gulir. Ini tidak memengaruhi rentang bilah gulir, ukuran halaman, atau posisi kotak gulir.

FungsiEnableScrollBar dapat digunakan untuk menonaktifkan satu atau kedua panah bilah gulir. Aplikasi menampilkan panah yang dinonaktifkan berwarna abu-abu dan tidak merespons input pengguna.

Permintaan Bilah Gulir

Pengguna membuat permintaan gulir dengan mengklik berbagai bagian bilah gulir. Sistem mengirim permintaan ke jendela yang ditentukan dalam bentuk pesan WM_HSCROLL atau WM_VSCROLL. Bilah gulir horizontal mengirim pesan WM_HSCROLL; bilah gulir vertikal mengirimkan pesan WM_VSCROLL. Setiap pesan menyertakan kode permintaan yang sesuai dengan tindakan pengguna, pegangan bilah gulir (hanya kontrol bilah gulir), dan, dalam beberapa kasus, posisi kotak penggulir.

Diagram berikut menunjukkan kode permintaan yang dihasilkan pengguna saat mengklik berbagai bagian bilah gulir.

diagram memperlihatkan kode permintaan yang terkait dengan setiap wilayah pada dua bilah gulir

Nilai SB_ menentukan tindakan yang diambil pengguna. Aplikasi memeriksa kode yang menyertai pesan WM_HSCROLL dan WM_VSCROLL lalu melakukan operasi pengguliran yang sesuai. Dalam tabel berikut, tindakan pengguna ditentukan untuk setiap nilai, diikuti oleh respons aplikasi. Dalam setiap kasus, unit didefinisikan dalam aplikasi sebagai yang sesuai untuk data. Misalnya, unit umum untuk menggulir teks secara vertikal adalah baris teks.

Permintaan Perbuatan Jawaban
SB_SUSUNAN Pengguna mengklik panah gulir atas. Mengurangi posisi kotak gulir; menggulir ke arah bagian atas data sebanyak satu unit.
SB_LINEDOWN Pengguna mengklik panah gulir bawah. Menambah posisi kotak gulir; menggulir satu unit ke arah bawah data.
SB_LINELEFT Pengguna mengklik panah gulir kiri. Mengurangi posisi kotak gulir; menggulir ke ujung kiri data sejauh satu unit.
SB_LINERIGHT Pengguna mengklik panah gulir kanan. Meningkatkan posisi kotak gulir; menggulir ke arah ujung kanan data sebanyak satu unit.
SB_PAGEUP Pengguna mengklik poros bilah gulir di atas kotak gulir. Mengurangi posisi kotak gulir dengan jumlah unit data di jendela; menggulir ke bagian atas data dengan jumlah unit yang sama.
SB_PAGEDOWN Pengguna mengklik poros bilah gulir di bawah kotak gulir. Menaikkan posisi kotak gulir dengan jumlah unit data di jendela; menggulir ke bagian bawah data dengan jumlah unit yang sama.
SB_PAGELEFT Pengguna mengklik poros bilah gulir di sebelah kiri kotak gulir. Mengurangi posisi kotak gulir dengan jumlah unit data di jendela; menggulir ke ujung kiri data dengan jumlah unit yang sama.
SB_PAGERIGHT Pengguna mengklik poros bilah gulir di sebelah kanan kotak gulir. Menaikkan posisi kotak gulir dengan jumlah unit data di jendela; menggulir ke ujung kanan data dengan jumlah unit yang sama.
SB_THUMBPOSITION Pengguna melepaskan kotak gulir setelah menyeretnya. Mengatur kotak gulir ke posisi yang ditentukan dalam pesan; menggulir data dengan jumlah unit yang sama yang telah dipindahkan oleh kotak gulir.
SB_THUMBTRACK Pengguna menyeret kotak gulir. Mengatur kotak gulir ke posisi yang ditentukan dalam pesan dan menggulir data dengan jumlah unit yang sama dengan perpindahan kotak gulir untuk aplikasi yang menggambar data dengan cepat. Aplikasi yang tidak dapat menggambar data dengan cepat harus menunggu kode permintaan SB_THUMBPOSITION sebelum memindahkan kotak gulir dan menggulir data.
SB_ENDSCROLL Pengguna melepaskan mouse setelah menahannya di panah atau di poros bilah gulir. Tidak ada respons yang diperlukan.

 

Bilah gulir menghasilkan kode permintaan SB_THUMBPOSITION dan SB_THUMBTRACK saat pengguna mengklik dan menyeret kotak gulir. Aplikasi harus diprogram untuk memproses kode permintaan SB_THUMBTRACK atau SB_THUMBPOSITION.

Kode permintaan SB_THUMBPOSITION terjadi ketika pengguna melepaskan tombol mouse setelah mengklik kotak pengguliran. Aplikasi yang memproses pesan ini melakukan operasi pengguliran setelah pengguna menyeret kotak gulir ke posisi yang diinginkan dan melepaskan tombol mouse.

Kode permintaan SB_THUMBTRACK terjadi saat pengguna menyeret kotak gulir. Jika aplikasi memproses SB_THUMBTRACK kode permintaan, aplikasi dapat menggulir konten jendela saat pengguna menyeret kotak gulir. Namun, bilah gulir dapat menghasilkan banyak kode permintaan SB_THUMBTRACK dalam waktu singkat, sehingga aplikasi harus memproses kode permintaan ini hanya jika dapat dengan cepat mengecat ulang konten jendela.

Antarmuka Keyboard untuk Bilah Gulir

Kontrol bilah gulir menyediakan antarmuka keyboard bawaan yang memungkinkan pengguna mengeluarkan permintaan gulir dengan menggunakan keyboard; bilah gulir standar tidak. Saat kontrol scrollbar memiliki fokus keyboard, ia akan mengirim pesan WM_HSCROLL dan WM_VSCROLL ke jendela induknya saat pengguna menekan tombol panah. Kode permintaan dikirim dengan setiap pesan yang sesuai dengan tombol panah yang telah ditekan pengguna. Berikut ini adalah tombol panah dan kode permintaan yang sesuai.

Tombol panah Kode permintaan
KE BAWAH SB_LINEDOWN atau SB_LINERIGHT
AKHIR SB_BOTTOM
RUMAH SB_TOP
KIRI SB_LINEUP atau SB_LINELEFT
PGDN SB_PAGEDOWN atau SB_PAGERIGHT
PGUP SB_PAGEUP atau SB_PAGELEFT
KANAN SB_LINEDOWN atau SB_LINERIGHT
Ke atas SB_LINEUP atau SB_LINELEFT

 

 

Nota

Antarmuka keyboard kontrol bilah gulir mengirimkan kode permintaan SB_TOP dan SB_BOTTOM. Kode permintaan SB_TOP menunjukkan bahwa pengguna telah mencapai nilai teratas rentang gulir. Aplikasi menggulir konten jendela ke bawah sehingga bagian atas objek data terlihat. Kode permintaan SB_BOTTOM menunjukkan bahwa pengguna telah mencapai nilai bawah rentang gulir. Jika aplikasi memproses kode permintaan SB_BOTTOM, aplikasi akan menggulir konten jendela ke atas sehingga bagian bawah objek data terlihat.

 

Jika Anda menginginkan antarmuka keyboard untuk bilah gulir standar, Anda dapat membuatnya sendiri dengan memproses pesan WM_KEYDOWN dalam prosedur jendela Anda lalu melakukan tindakan gulir yang sesuai berdasarkan kode kunci virtual yang menyertai pesan. Untuk informasi tentang cara membuat antarmuka keyboard untuk bilah gulir, lihat Membuat Antarmuka Keyboard untuk Bilah Gulir Standar.

Menggulir Daerah Pengguna

Cara paling sederhana untuk menggulir konten area klien adalah dengan menghapus dan kemudian menggambarnya kembali. Ini adalah metode yang mungkin digunakan aplikasi dengan kode permintaan SB_PAGEUP, SB_PAGEDOWN, dan SB_TOP, yang biasanya memerlukan konten yang sama sekali baru.

Untuk beberapa kode permintaan, seperti SB_LINEUP dan SB_LINEDOWN, tidak semua konten perlu dihapus, karena beberapa tetap terlihat setelah pengguliran terjadi. Fungsi ScrollWindowEx mempertahankan sebagian konten area klien, memindahkan bagian yang dipertahankan dalam jumlah tertentu, lalu menyiapkan sisa area klien untuk melukis informasi baru. ScrollWindowEx menggunakan fungsiBitBltuntuk memindahkan bagian tertentu dari objek data ke lokasi baru dalam area klien. Setiap bagian yang tidak tertutupi dari area klien (yang tidak dipertahankan) dibatalkan, dihapus, dan dicat saat pesan WM_PAINT berikutnya terjadi.

Fungsi ScrollWindowEx dapat digunakan untuk mengecualikan sebagian area klien dari operasi pengguliran. Ini menjaga elemen dengan posisi tetap yang tetap, seperti jendela anak, dari pergerakan di dalam area klien. Ini secara otomatis menghapus validitas bagian area klien yang akan menerima informasi baru, sehingga aplikasi tidak perlu menghitung wilayah klipingnya sendiri. Untuk informasi selengkapnya tentang kliping, lihat Kliping.

Biasanya aplikasi menggulir konten jendela ke arah yang berlawanan yang ditunjukkan oleh bilah gulir. Misalnya, ketika pengguna mengklik poros bilah gulir di area di bawah kotak gulir, aplikasi menggulir objek di jendela ke atas untuk mengungkapkan sebagian objek yang berada di bawah bagian yang terlihat.

Anda juga dapat menggulir wilayah persegi panjang menggunakan fungsiScrollDC.

Warna dan Metrik Bilah Gulir

Nilai warna yang ditentukan sistem, COLOR_SCROLLBAR, mengontrol warna dalam poros bilah gulir. Gunakan fungsiGetSysColor untuk menentukan warna poros bilah gulir dan fungsiSetSysColors untuk mengatur warna poros bilah gulir. Namun, perhatikan bahwa perubahan warna ini memengaruhi semua bilah gulir dalam sistem.

Anda bisa mendapatkan dimensi bitmap yang digunakan sistem di bilah gulir standar dengan memanggil fungsi GetSystemMetrics. Berikut ini adalah nilai metrik sistem yang terkait dengan bilah gulir.

Metrik sistem Deskripsi
SM_CXHSCROLL Lebar bitmap panah pada bilah gulir horizontal
SM_CXHTHUMB Lebar kotak gulir pada bilah gulir horizontal. Nilai ini mengambil lebar bilah gulir yang memiliki ukuran halaman yang bernilai nol.
SM_CXVSCROLL Lebar panah bitmap pada bilah gulir vertikal
SM_CYHSCROLL Tinggi bitmap panah pada scrollbar horizontal
SM_CYVSCROLL Tinggi bitmap panah pada scrollbar vertikal
SM_CYVTHUMB Tinggi kotak gulir pada bilah gulir vertikal. Nilai ini mengambil tinggi bilah gulir yang memiliki ukuran halaman nol.