Home

Scroll Bars

 

Introduction

A scroll bar is a control equipped with a bar that lies on a long rectangular area that has an arrow on each of its two sides. A scroll bar allows the user to navigate from one section of the host window to the opposite section.

There are two main types of scroll bars. The most classic scroll bar is used on single document interface (SDI) applications or children of a multiple document interface (MDI). Such scroll bars are positioned on the right and/or the bottom side of the interface. A scroll bar can also be used as Windows control. In this case, it can be placed on a dialog box or a form view.

Starting the Application

  1. Start Microsoft Visual Studio or Microsoft Visual C++.
  2. On the main menu, click File -> New…
  3. To create the project, from the New dialog box, click the Projects property sheet
  4. Click MFC AppWizard (exe)
  5. In the Project Name edit box, type ScrollBar1 and click OK
  6. In the MFC AppWizard – Step 1, click the Dialog Based radio button and click Next
  7. In the MFC AppWizard – Step 2 of 4, in the edit box, type Scroll Bar Example and click Next
  8. In the MFC AppWizard – Step 3 of 4, click the No Thanks radio button and click Next
  9. In the MFC AppWizard Step 4 of 4, in the classes list, click CScrollBar1App to select it.
  10. Change the Class Name to CScrollBarApp
  11. Click CScrollBar1Dlg
  12. Change the Class Name to CScrollBarDlg
  13. Change the Header File to ScrollBarDlg.h
  14. Change the Implementation File to ScrollBarDlg.cpp
     
  15. Click Finish and click OK
 

Designing the Application

  1. On the dialog box, click the TODO line and press Delete.
  2. On the Dialog toolbar, click the Toggle Grid button .
    On the Controls toolbox, click Vertical Scroll Bar and click on the dialog box.
  3. Right-click the newly added scroll bar on the dialog and click Properties.
  4. Change the ID of the control to IDC_SCROLLBAR

Programming the Application

  1. Right-click the scroll bar and click ClassWizard.
  2. Click the Member Variables property sheet. Double-click IDC_SCROLLBAR and type m_ScrollBar
  3. Change the Category to Control and make sure that CScrollBar is selected as the Variable Type.
  4. Click OK to close the Add Variable dialog box.
  5. Click the Message Maps property sheet.
  6. In the Messages list, click WM_INITDIALOG: and click Edit Code.
  7. Change the function as follows:
     
    BOOL CScrollBarDlg::OnInitDialog()
    {
    	CDialog::OnInitDialog();
    
    	// Add "About..." menu item to system menu.
    
    	// IDM_ABOUTBOX must be in the system command range.
    	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
    	ASSERT(IDM_ABOUTBOX < 0xF000);
    
    	CMenu* pSysMenu = GetSystemMenu(FALSE);
    	if (pSysMenu != NULL)
    	{
    		CString strAboutMenu;
    		strAboutMenu.LoadString(IDS_ABOUTBOX);
    		if (!strAboutMenu.IsEmpty())
    		{
    			pSysMenu->AppendMenu(MF_SEPARATOR);
    			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
    		}
    	}
    
    	SetIcon(m_hIcon, TRUE);			// Set big icon
    	SetIcon(m_hIcon, FALSE);		// Set small icon
    	
    	// TODO: Add extra initialization here
    	m_ScrollBar.SetScrollRange(0, 122);
    	return TRUE;  // return TRUE  unless you set the focus to a control
    }
  8. Unfortunately, because Microsoft Visual C++ does provide true Rapid Application Development (RAD), the scroll bar still cannot scroll. You have to implement such a function manually.
    Press Ctrl + W to call the ClassWizard dialog box.
  9. In the Object IDs list of the Message Maps property sheet, click CScrollBarDlg
  10. In the Messages list, double-click WM_VSCROLL to create the function.
  11. Click Edit Code and implement the function as follows:
     
    
                  
  12. Click Edit Code and implement the function as follows:
     
    void CScrollBarDlg::OnVScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar) 
    {
    	// TODO: Add your message handler code here and/or call default
    	int CurPos = m_ScrollBar.GetScrollPos();
    
    	// Determine the new position of scroll box.
    	switch (nSBCode)
    	{
    	case SB_LEFT:      // Scroll to far left.
    		CurPos = 0;
    		break;
    
    	case SB_RIGHT:      // Scroll to far right.
    		CurPos = 122;
    		break;
    
    	case SB_ENDSCROLL:   // End scroll.
    		break;
    
    	case SB_LINELEFT:      // Scroll left.
    		if (CurPos > 0)
    			CurPos--;
    		break;
    
    	case SB_LINERIGHT:   // Scroll right.
    		if (CurPos < 122)
    			CurPos++;
    		break;
    
    	case SB_PAGELEFT:    // Scroll one page left.
    		{
    			// Get the page size. 
    			SCROLLINFO   info;
    			m_ScrollBar.GetScrollInfo(&info, SIF_ALL);
       
    			if (CurPos > 0)
    				CurPos = max(0, CurPos - (int) info.nPage);
    		}
    		break;
    
    	case SB_PAGERIGHT:      // Scroll one page right
    		{
    			// Get the page size. 
    			SCROLLINFO   info;
    			m_ScrollBar.GetScrollInfo(&info, SIF_ALL);
    
    			if (CurPos < 122)
    				CurPos = min(122, CurPos + (int) info.nPage);
    		}
    		break;
    
    	case SB_THUMBPOSITION: // Scroll to absolute position. nPos is the position
    		CurPos = nPos;      // of the scroll box at the end of the drag operation.
    		break;
    
    	case SB_THUMBTRACK:   // Drag scroll box to specified position. nPos is the
    		CurPos = nPos;     // position that the scroll box has been dragged to.
    		break;
    	}
    
    	// Set the new position of the thumb (scroll box).
    	m_ScrollBar.SetScrollPos(CurPos);
    	
    	CDialog::OnVScroll(nSBCode, nPos, pScrollBar);
    }
  13. Execute your application and test the scroll bar. Make sure it can scroll up and down. Then return to MSVC.
  14. One the most important pieces of information to get from a scroll bar is the position of the scrolling bar while it is moving. To get and display that position, on the dialog, add a Static Text control somewhere in the dialog such as under the scroll bar.
  15. Set its ID to IDC_POSITION.
  16. Change the bottom section of the OnVScroll() function as follows:
     
    void CScrollBarDlg::OnVScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar) 
    {
    	// TODO: Add your message handler code here and/or call default
    	int CurPos = m_ScrollBar.GetScrollPos();
    
    	// Determine the new position of scroll box.
    	switch (nSBCode)
    	{
    	...
    	}
    
    	// Set the new position of the thumb (scroll box).
    	m_ScrollBar.SetScrollPos(CurPos);
    
    	CString szPosition;
    
    	szPosition.Format("%d", CurPos);
    	SetDlgItemText(IDC_POSITION, szPosition);
    
    	CDialog::OnVScroll(nSBCode, nPos, pScrollBar);
    }
  17. Execute your program and test the scroll bar:
     

    Dialog Box

Programming the Application

On the things your can do with a scroll bar is to use its position and involve it for some other operation of your application. For example, you can use a scroll bar to navigate through a list of items, the same way you would proceed for a list box. We are going to use a scroll bar to navigate a list of names and display them in text boxes.

  1. On the dialog, add a Static Text control and set its Caption to Country
  2. On the right side of the static label, add an Edit Box control and set its ID to IDC_COUNTRY
  3. Press Ctrl + W to call the ClassWizard dialog box.
  4. From the Member Variables property sheet, double-click IDC_COUNTRY.
  5. Set the Member Variable Name to m_Country
  6. Make sure its Category is Value and its Variable Type is CString
  7. Click OK to close the ClassWizard dialog box.
  8. In the Workspace, click the ClassView property sheet. Expand the ScrollBar1 Classes folder and double-click the CScrollBar folder to access its header file.
  9. Create a list of countries as follows:
     
    // ScrollBarDlg.h : header file
    //
    
    #if !defined(AFX_SCROLLBARDLG_H__D4577C45_C8B6_4C81_B2D2_D4E7AE3E40C7__INCLUDED_)
    #define AFX_SCROLLBARDLG_H__D4577C45_C8B6_4C81_B2D2_D4E7AE3E40C7__INCLUDED_
    
    #if _MSC_VER > 1000
    #pragma once
    #endif // _MSC_VER > 1000
    
    static char* Country[] = { "Afghanistan", "Lesotho", "Argentina", "Italy",
    	"New Zealand", "Madagascar", "Sri Lanka", "Brazil", "Gambia", "Chili",
    	"Greece", "Thailand", "Cuba", "Ghana", "Canada", "Mexico", "Uganda",
    	"Australia", "Panama", "Qatar", "Senegal", "Turkey", "Uzbekistan",
    	"Algeria", "Bolivia", "Cameroon", "Finland", "United States" };
    /////////////////////////////////////////////////////////////////////////////
    // CScrollBarDlg dialog
    
    class CScrollBarDlg : public CDialog
    {
    // Construction
    public:
  10. Change the OnInitDialog() functions as follows:
     
    BOOL CScrollBarDlg::OnInitDialog()
    {
    	CDialog::OnInitDialog();
    
    	...		// Set small icon
    	
    	// TODO: Add extra initialization here
    	m_ScrollBar.SetScrollRange(0, 27);
    	return TRUE;  // return TRUE  unless you set the focus to a control
    }
  11. Change the OnVScroll() function as follows:
     
    void CScrollBarDlg::OnVScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar) 
    {
    	// TODO: Add your message handler code here and/or call default
    	UpdateData();
    	int CurPos = m_ScrollBar.GetScrollPos();
    
    	// Determine the new position of scroll box.
    	switch (nSBCode)
    	{
    	case SB_LEFT:      // Scroll to far left.
    		CurPos = 0;
    		break;
    
    	case SB_RIGHT:      // Scroll to far right.
    		CurPos = 27;
    		break;
    
    	case SB_ENDSCROLL:   // End scroll.
    		break;
    
    	case SB_LINELEFT:      // Scroll left.
    		if (CurPos > 0)
    			CurPos--;
    		break;
    
    	case SB_LINERIGHT:   // Scroll right.
    		if (CurPos < 27)
    			CurPos++;
    		break;
    
    	case SB_PAGELEFT:    // Scroll one page left.
    		{
    			// Get the page size. 
    			SCROLLINFO   info;
    			m_ScrollBar.GetScrollInfo(&info, SIF_ALL);
       
    			if (CurPos > 0)
    				CurPos = max(0, CurPos - (int) info.nPage);
    		}
    		break;
    
    	case SB_PAGERIGHT:      // Scroll one page right
    		{
    			// Get the page size. 
    			SCROLLINFO   info;
    			m_ScrollBar.GetScrollInfo(&info, SIF_ALL);
    
    			if (CurPos < 27)
    				CurPos = min(27, CurPos + (int) info.nPage);
    		}
    		break;
    
    	case SB_THUMBPOSITION: // Scroll to absolute position. nPos is the position
    		CurPos = nPos;      // of the scroll box at the end of the drag operation.
    		break;
    
    	case SB_THUMBTRACK:   // Drag scroll box to specified position. nPos is the
    		CurPos = nPos;     // position that the scroll box has been dragged to.
    		break;
    	}
    
    	// Set the new position of the thumb (scroll box).
    	m_ScrollBar.SetScrollPos(CurPos);
    
    	CString szPosition;
    
    	szPosition.Format("%d", CurPos);
    	SetDlgItemText(IDC_POSITION, szPosition);
    
    	m_Country.Format("%s", Country[CurPos]);
    	UpdateData(FALSE);
    	CDialog::OnVScroll(nSBCode, nPos, pScrollBar);
    }
  12. Execute your program and test the scroll bar. Notice that the content of the edit box changes as you scroll up or down.
 

Copyright © 2003-2005 FunctionX, Inc.