Upcoming Events
Unite 2010
11/10 - 11/12 @ Montréal, Canada

GDC China
12/5 - 12/7 @ Shanghai, China

Asia Game Show 2010
12/24 - 12/27  

GDC 2011
2/28 - 3/4 @ San Francisco, CA

More events...
Quick Stats
106 people currently visiting GDNet.
2406 articles in the reference section.

Help us fight cancer!
Join SETI Team GDNet!
Link to us Events 4 Gamers
Intel sponsors gamedev.net search:

  Contents

 Introduction
 GUI Controls
 We'll Need

 Breaking It Down
 Static Controls
 Pushbuttons
 Carets and The
 Textbox Control

 Progress Bars
 Sliders and
 Scrollbars

 Listbox Control
 Conclusion

 Printable version

 


  The Series

 Part I
 Part II
 Part III
 Part IV

 

Sliders and Scrollbars

Drawing a slider or a scrollbar is similar to drawing a progress bar, in that you need to express the slider's current position as a percentage of its client rectangle, giving you the position at which to draw the "pointer" (or, for a scrollbar, the elevator). You'll have to make some slight modifications for horizontal vs. vertical controls - I got around these by implementing a base class, gui_slider, which contained all of the common code, and all of the member variables, and then implementing two specific derivatives, gui_slider_horz and gui_slider_vert, which handled the differences in drawing and clicking logic.

As for processing mouse clicks, I opted for the easy way when I created my sliders. If a mouse click occurs in the client area of a scrollbar, I automatically scroll directly to that position. In my sliders, you can't click in the "shaft" and move the position by a page at a time - you jump directly to where you clicked. This was a decision I made primarily because it was easy, but also because I dislike the default Windows behavior of paging.

As for the scrollbar / slider logic, you've got the same basic setup as a progress bar - min, max, and current positions. Unlike a progress bar, however, the user can change the current position by clicking in the control.

Now, scrollbars. I decided, for my GUI, that scrollbars are just sliders with two buttons tacked onto either side. These two buttons (the up/down or left/right arrows) move the elevator one position. This method eliminated a lot of code duplication between the pushbutton class and the scrollbars, and I would highly recommend that you take a look at doing something similar.

Now that we've got scrollbars, we can tackle the most complex control of them all… the listbox.


Next : The Listbox Control