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 poros berteduh dengan tombol panah di setiap ujung dan kotak gulir (kadang-kadang disebut ibu jari) di antara tombol panah. 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 bilah 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 berteduh, aplikasi menggulir konten satu jendela. 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 Gulir Posisi Kotak dan Rentang Gulir.

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

screen shot of a rich edit control with scroll bars

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 nonkelola jendela. Ini dibuat dengan jendela dan ditampilkan 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 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 terpisah, kontrol bilah gulir mengambil fokus input langsung. 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 ketat. 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.

Catatan

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

 

Gulir Posisi Kotak dan Rentang Gulir

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 fungsi SetScrollInfo untuk mengatur nilai rentang, dan fungsi GetScrollInfo 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 menunjukkan 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 fungsi SetScrollInfo untuk mengatur ukuran halaman. Aplikasi dapat mengambil ukuran halaman saat ini dengan memanggil fungsi getScrollInfo pengiriman.

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 memindahkan kotak gulir di 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, aplikasi menggunakan fungsi SetScrollPos. Karena mengontrol pergerakan kotak gulir, aplikasi dapat memindahkan kotak gulir dengan kenaikan yang paling sesuai untuk data yang sedang 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.

Fungsi EnableScrollBar 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 mengirimkan permintaan ke jendela yang ditentukan dalam bentuk pesan WM_HSCROLL atau WM_VSCROLL. Bilah gulir horizontal mengirim pesan WM_HSCROLL ; bilah gulir vertikal mengirim pesan WM_VSCROLL . Setiap pesan menyertakan kode permintaan yang sesuai dengan tindakan pengguna, ke handel ke bilah gulir (hanya kontrol bilah gulir), dan, dalam beberapa kasus, ke posisi kotak gulir.

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

diagram showing the request codes associated with each region on two scroll bars

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

Permintaan Perbuatan Respons
SB_LINEUP Pengguna mengklik panah gulir atas. Mengurangi posisi kotak gulir; menggulir ke bagian atas data satu unit.
SB_LINEDOWN Pengguna mengklik panah gulir bawah. Menaikkan posisi kotak gulir; menggulir ke bagian bawah data satu unit.
SB_LINELEFT Pengguna mengklik panah gulir kiri. Mengurangi posisi kotak gulir; menggulir ke ujung kiri data satu unit.
SB_LINERIGHT Pengguna mengklik panah gulir kanan. Menaikkan posisi kotak gulir; menggulir ke ujung kanan data 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 merilis 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 yang telah dipindahkan 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 merilis tombol mouse setelah mengklik kotak gulir. 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 bilah gulir memiliki fokus keyboard, kontrol akan mengirim WM_HSCROLL dan WM_VSCROLL pesan 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 Minta kode
DOWN SB_LINEDOWN atau SB_LINERIGHT
END SB_BOTTOM
BERANDA SB_TOP
LEFT SB_LINEUP atau SB_LINELEFT
PGDN SB_PAGEDOWN atau SB_PAGERIGHT
PGUP SB_PAGEUP atau SB_PAGELEFT
RIGHT SB_LINEDOWN atau SB_LINERIGHT
UP SB_LINEUP atau SB_LINELEFT

 

 

Catatan

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 Area Klien

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 fungsi BitBlt untuk memindahkan bagian tertentu dari objek data ke lokasi baru dalam area klien. Setiap bagian yang belum ditemukan dari area klien (apa pun yang tidak dipertahankan) tidak valid, dihapus, dan dicat ketika pesan WM_PAINT berikutnya terjadi.

Fungsi ScrollWindowEx dapat digunakan untuk mengecualikan sebagian area klien dari operasi gulir. Ini menjaga item dengan posisi tetap, seperti jendela anak, dari bergerak di dalam area klien. Ini secara otomatis membatalkan bagian area klien yaitu menerima informasi baru, sehingga aplikasi tidak perlu menghitung wilayah klipingnya sendiri. Untuk informasi selengkapnya tentang pengklipan, lihat Pengklipan.

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 fungsi ScrollDC.

Warna dan Metrik Bilah Gulir

Nilai warna yang ditentukan sistem, COLOR_SCROLLBAR, mengontrol warna dalam poros bilah gulir. Gunakan fungsi GetSysColor untuk menentukan warna poros bilah gulir dan fungsi SetSysColors 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 nol.
SM_CXVSCROLL Lebar bitmap panah pada bilah gulir vertikal
SM_CYHSCROLL Tinggi bitmap panah pada bilah gulir horizontal
SM_CYVSCROLL Tinggi bitmap panah pada bilah gulir vertikal
SM_CYVTHUMB Tinggi kotak gulir pada bilah gulir vertikal. Nilai ini mengambil tinggi bilah gulir yang memiliki ukuran halaman nol.