Click here to Skip to main content
12,957,071 members (59,303 online)
Click here to Skip to main content
Add your own
alternative version


64 bookmarked
Posted 26 Oct 2000

Toolbars with Spinners & Sliders

, 26 Oct 2000
Rate this:
Please Sign up or sign in to vote.
How to create toolbars with spinners and/or sliders
<!-- Download Links -->
  • Download source files - 48 Kb <!-- Article image -->

    Sample Image - spnsld.gif

    <!-- Main HTML starts here -->


    This article and the demo app is to teach how to create toolbars with spinners and/or sliders on them. However, you can use the classes for each one of them as they are with very little midifications as per your own requirements in your application.

    The idea and implementation is fairly easy when you come to do it yourself from scratch, however, but please note that you don't miss the main or the most important piece of code. They are the following 2 lines of code that come in the message handler function OnCreate(...) of any one of the classes, as illustrated below:

    // Load the dummy buttons toolbar. VERY IMPORTANT!!
    if (!LoadToolBar (IDR_SPINNER_BAR))
        return -1;

    The above lines make sure that the dummy toolbar is loaded after it was created in the CMainFrame class' OnCreate(...) function.

    Bibiti, Babiti, Booo :o) Or let's explain in few easy steps how things are done here:

    Because the Slider Toolbar is just for demonstration and does not do much while the Spinner Toolbar does a very lot, I will first start on the class CSpinToolBar:

    1. In the resource editor of VC++, Create a dummy toolbar with 16 dummy buttons.
    2. In the CMainFrame class, create the toolbar. In my case I have added a member function and then called it within the create of mainframe which is like this:
      BOOL CMainFrame::CreateSpinnerBar()
      	// Creation
      	if (!m_wndSpinBar.CreateEx(this, TBSTYLE_FLAT , WS_CHILD | 
      				         WS_VISIBLE | CBRS_BOTTOM
      		return FALSE;
      	m_wndSpinBar.LoadToolBar (IDR_SPINNER_BAR);
      	        _T("RGB Spinners: From 0 to 255  _&_ Slider 0 to 255"));
      	m_wndSpinBar.EnableDocking (CBRS_ALIGN_TOP | CBRS_ALIGN_BOTTOM);
          return TRUE;
    3. Derive a class from the mighty CToolBar and name it any thing you like. I called it CSpinToolBar to be simple.
    4. Add WM_CREATE, WM_HSCROLL (for the Slider) & WM_VSCROLL (for the Spinners) to the above derived class and fill the last two ones with codes as shown under:
      void CSpinToolBar::OnHScroll(UINT nSBCode, UINT nPos, 
                                                        CScrollBar* pScrollBar) 
          // This line maps the slider control to the scroll bar parameter
          CSliderCtrl* m_wndSlider = (CSliderCtrl*) pScrollBar;
          // Here we can load our own designed cursor while sliding. 
          // NICEEE, Ha :-)
          HCURSOR hCursor = AfxGetApp()->LoadCursor(IDC_CURSOR_SLIDER); 
          CToolBar::OnHScroll(nSBCode, nPos, pScrollBar);
      void CSpinToolBar::OnVScroll(UINT nSBCode, UINT nPos, 
                                                       CScrollBar* pScrollBar) 
          // This lines map the each spinner control to the 
          // scroll bar parameter	
          CSpinButtonCtrl* m_wndSpin_r = (CSpinButtonCtrl*) pScrollBar;
          CSpinButtonCtrl* m_wndSpin_g = (CSpinButtonCtrl*) pScrollBar;
          CSpinButtonCtrl* m_wndSpin_b = (CSpinButtonCtrl*) pScrollBar;
          // Here we can load our own designed cursor while spinning around. 
          // NICEEE, Ha :-)
          HCURSOR hCursor = AfxGetApp()->LoadCursor(IDC_CURSOR_SPINNER); 
          CToolBar::OnVScroll(nSBCode, nPos, pScrollBar);

      And In the WM_CREATE handler function - OnCreate(...), create whatever controls you want to add to the toolbar. In may case, I have 3 sets of Spinner & Edit buddy controls that would control the RGB values of the displayed text string on the view. The code is long to be pasted here, so please just have a look at them from within the project files and the example below.

      Example: This is how we obtain the button index to modify it as per our need.

      // CRect object for the rectangle body of each control, their 
      // physical existence. 
      CRect rect;
      // This one sets the desired button by index to what you like it 
      // to become. The function SetButtonInfo (int nIndex, UINT nID, 
      // UINT nStyle, int iImage) prototype.
      SetButtonInfo (0, ID_EDIT_R, TBBS_SEPARATOR , cxChar * 8);
      // This one actually gets the rectangle area of the button in question
      GetItemRect (0, &rect);
      // Here we set the rect area of the obtained button from above code
      rect.bottom = + (cyChar + 6);
    5. Add a member function called SetPositions() to it as well. This is where we will put the SetRange(...), SetBuddy(...) & the SetPos(...) functions of the spinners to intialize them. Then call this function at the end of the OnCreate(...) but before the return 0 line of code, like this:
      // Set the edit box default numbers
      return 0;
    6. This is the last but never the least step in finilizing the spinner toolbar functionality and its effectiveness on the document's data. Add ON_EN_CHANGE message maps and handlres to the edit controls to catch their updation by the spinners of the spinner toolbar. This is the best place to put any data modifying code into and I have done it in the view class to keep things simple. You can add them anywhere else as your application requires. Because they map to the ID of the editors, they will be processed for sure. I have done it like this:
      ON_EN_CHANGE(ID_EDIT_R, OnUpdateRed)
      ON_EN_CHANGE(ID_EDIT_G, OnUpdateGreen)
      ON_EN_CHANGE(ID_EDIT_B, OnUpdateBlue)

      Example: This is how we do it. A sample of the blue color edit control update handler.

      void CSpinnerTBView::OnUpdateBlue() 
        // Get a pointer to our Main Frame
        CMainFrame* pFrame = (CMainFrame*) AfxGetApp()->m_pMainWnd;
        // Document pointer
        CSpinnerTBDoc* pDoc = GetDocument();
        // Set the spin toolbar's member variable m_nBlue value 
        // to the spinner's value
        pFrame->m_wndSpinBar.m_nBlue = 
        // Set the document's member variable m_nBlue 
        // value to the toolbar value
        pDoc->m_nBlue = pFrame->m_wndSpinBar.m_nBlue;
        // Set the text COLORREF value
        pDoc->m_clrTextClr = RGB(pDoc->m_nRed, pDoc->m_nGreen, pDoc->m_nBlue);
        // force Update to the view and set the modifying flag to true
    7. And, And, Hmm, OOops, That's IT!, nice job.

    And oh yes, as I mentioned earlier that the slider toolbar does not do much, so I won't say anything about it here, but if you need further help on it, please do not hesitate to e-mail me your question. I's be glad to assist.


    Please download and in case you are interested in the WM_USER messages, take a look inside the stdafx.h file and you will find the lines:

    // Custom user messages
    #define WM_USER_UPDATE_COLOR		WM_USER+0x100

    which are used for updating the staus bar panels with the latest user interactions with any of the toolbars. Just as an extra visual feed back to the user.They are mapped in the mainframe class.

    Questions are most welcome. Post them here or my e-mail as you desire.

    Finally, HAVE FUN. I do that while programming!

    Masoud Samimi
    <A href=""

  • License

    This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

    A list of licenses authors might use can be found here


    About the Author

    Masoud Samimi
    Technical Lead Samimi Information Technology
    United Arab Emirates United Arab Emirates
    My company provides services in the fields of:

    LAN/WAN Networking
    Data Management and Security
    Data Recovery
    ERP/CRM Solutions
    IT Infrastructure Solutions
    Software/Hardware Sales/Service

    You may also be interested in...

    Comments and Discussions

    Generalgood~ Pin
    qingqingxiawucha9-Feb-06 21:05
    memberqingqingxiawucha9-Feb-06 21:05 
    Generalgood! Pin
    Anonymous8-Nov-03 17:03
    sussAnonymous8-Nov-03 17:03 
    GeneralTooltips on Button Pin
    Uma Mahes28-Oct-03 20:21
    memberUma Mahes28-Oct-03 20:21 
    GeneralPretty Good!! Pin
    WREY9-Aug-03 8:47
    memberWREY9-Aug-03 8:47 
    QuestionHow to insert a CStatic control into CToolBar Pin
    Golden Lee7-Jul-03 15:09
    memberGolden Lee7-Jul-03 15:09 
    GeneralVery good. thanks a lot. Pin
    zuoch12-May-03 16:05
    memberzuoch12-May-03 16:05 
    GeneralAdding a button to the Slider Toolbar Pin
    Sujat13-Mar-02 4:15
    memberSujat13-Mar-02 4:15 
    GeneralRe: Adding a button to the Slider Toolbar Pin
    Anonymous9-May-02 5:36
    memberAnonymous9-May-02 5:36 

    General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

    Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

    Permalink | Advertise | Privacy | Terms of Use | Mobile
    Web01 | 2.8.170525.1 | Last Updated 27 Oct 2000
    Article Copyright 2000 by Masoud Samimi
    Everything else Copyright © CodeProject, 1999-2017
    Layout: fixed | fluid