Click here to Skip to main content
11,926,429 members (59,721 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked

Knob-Slider Control

, 8 Oct 2003
Rate this:
Please Sign up or sign in to vote.
A custom user control that implements a knob slider.


The purpose of this article is to show how a user control could be implemented. Also, its sample is useful for programmers who would like to use a rotating knob slider control, for which the example is provided.


For any developer who wants to understand this sample and /or to implement a new one, it is required to know how to derive a new MFC control class from a standard one.

Using the code

The code could be used by inserting the KbutsliderCtrl class in your own project, and also by adding a new slider control in the resources. The class can be used directly by creating instances of it, or creating a new class derived from this one. The derivation is useful when the programmer wants to capture the OnLButtonUp and OnLButtonDown events.

Functions SetKnobNum and SetKnobPosi are used to set the number and position of each knob which is gliding on the circular channel. These functions also will update the control's window with the new parameters which are protected against overflow errors by using the % (modulo) operator. Of course in order to get the current position of each knob, function GetKnobPosi was implemented.

The KbutsliderCtrl class has some private functions which are used for some mathematical and graphical operations, as follows:

  • Function GetCurentAngle calculates the angle composed by the vertical axis, the central point, and the specified point (normally mouse's coordinates).
  • Function DetectNearestKnob scans the knobs in order to identify the knob with the nearest angle value with the specified value. In most of the cases, the last two functions are used together.
  • The function CalculateKnobPosi is used to calculate the position of a knob which has to stay on the channel and to describe a specified angle.
  • The functions DrawCircle, DrawBitmap, and DrawText are used to show parts of the graphical control.
  • The function DrawLine is used to substitute the function SetPixelV, which is optional.

The OnPaint routine is presented:

void KbutsliderCtrl::OnPaint() {
  int j;
  CPaintDC dc(this); // device context for painting
  CMemDC memDC(&dc); // derived memory context
  CMemDC *pDC = &memDC; // pointer to it
  int nRadius = m_nRadius;
  CRect rc;
  pDC->FillSolidRect(rc, ::GetSysColor(COLOR_BTNFACE));  
  DrawCircle(pDC, m_ptCenter, nRadius--, ::GetSysColor(COLOR_3DDKSHADOW),
  DrawCircle(pDC, m_ptCenter, nRadius, ::GetSysColor(COLOR_3DSHADOW),
  DrawCircle(pDC, m_ptCenter, nRadius--, ::GetSysColor(COLOR_3DHIGHLIGHT),
  DrawCircle(pDC, m_ptCenter, nRadius--, ::GetSysColor(COLOR_3DLIGHT),
  for ( j=0; j<m_nKnobNum; j++ ) {
    const CPoint ptKnobCenter = CalculateKnobPosi(m_nKnobPosi[j]);
    int nKnobRadius = m_nKnobRadius;  
    const CRect rcKnob(ptKnobCenter.x - nKnobRadius,
      ptKnobCenter.y - nKnobRadius, ptKnobCenter.x + nKnobRadius,
      ptKnobCenter.y + nKnobRadius);
    CRgn rgnKnob;
    CBrush brKnob(::GetSysColor(COLOR_BTNFACE));
    pDC->FillRgn(&rgnKnob, &brKnob);
    if(m_bDragging) {
      DrawCircle(pDC, ptKnobCenter, --nKnobRadius,
      DrawCircle(pDC, ptKnobCenter, --nKnobRadius,
    } else {
      DrawCircle(pDC, ptKnobCenter, --nKnobRadius,
      DrawCircle(pDC, ptKnobCenter, --nKnobRadius,
    if(GetFocus() == this) {
      DrawCircle(pDC, ptKnobCenter, nKnobRadius-2, RGB(0, 0, 0), TRUE);
      if ( j == m_nKnobCrt ) {
        DrawCircle(pDC, ptKnobCenter, nKnobRadius-4, RGB(0, 0, 0),

Points of interest

The thing which I learned from this project is the fact that some internal state variables were necessary to be used together with window events in order to define the desired behavior of the control.


This is the first version of this kind of mixed control developed, which looks like a knob slider.


I would like to appreciate the help of code from Kyle Rule which I used for flicker free drawing context object. Also thanks to other developers who shared on this site, interesting source codes.


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

Germany Germany
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralOne Correction Pin
Rick York9-Oct-03 7:36
memberRick York9-Oct-03 7:36 
GeneralHas some good points. Pin
WREY5-Oct-03 10:21
memberWREY5-Oct-03 10:21 
GeneralRe: Has some good points. Pin
Stewenson6-Oct-03 22:02
memberStewenson6-Oct-03 22:02 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151126.1 | Last Updated 9 Oct 2003
Article Copyright 2003 by Stewenson
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid