A Slider Control for C++

• Download demo - 599.2 KB
• Download source - 2.1 KB

Introduction

Although there are lots of attractive controls in web programming fields (e.g. jQuery UI), it seems that C++, especially in MFC, does not have enough decent UI controls.

A month ago, I implemented a website by using jQuery UI with easySlider (http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider). Thanks to the library(easySlider), I successfully developed my website. Thus, I have decided to implement a similar control and wrote an article to share with you.

In this article, a new slider control for MFC is presented with its source code and usage. Though implementing this control does not require any difficult tricks, it will definitely save your time and make your application more attractive in handy manner.

How to Use the Control

To use the control in your application, you can follow the below instructions.

1. Place a static control in your dialog and assign a control variable to the control.
   Note that you must change the ID of the static control in order to assign a variable. (If you do not change its ID, you are not able to assign a variable on it.)
   Note that, in this example, I personally used 'm_stHolder' as a variable for the control.
   
2. Add two buttons to implement the sliding next and previous feature respectively.
   
3. At the dialog's header file, find the following source code,
   C++

   CStatic 	m_stHolder;

   and change it like the below code.

   C++

   CSlideHolder	m_stHolder;

4. Add the following code to include the control's header file.
   C++

   #include "SlideHolder.h"

Now most of required initializations are done. It is time to add your custom dialogs. As a inner dialog, a dialog should has a child style, no border as well as title bar. In the example, I created four dialogs and they are CTest1Dlg, CTest2Dlg, CTest3Dlg and CTest4Dlg respectively. After that, I added them as member variables on the dialog like the below code.

CTest1Dlg m_dlgTest1;
CTest2Dlg m_dlgTest2;
CTest3Dlg m_dlgTest3;
CTest4Dlg m_dlgTest4;

Also, including header files like the below code is required.

#include "Test1Dlg.h"
#include "Test2Dlg.h"
#include "Test3Dlg.h"
#include "Test4Dlg.h"

Then, initializing the slider control and dialogs at the OnInitDialog function.

m_dlgTest1.Create(IDD_DIALOG1, &m_stHolder);
m_dlgTest2.Create(IDD_DIALOG2, &m_stHolder);
m_dlgTest3.Create(IDD_DIALOG3, &m_stHolder);
m_dlgTest4.Create(IDD_DIALOG4, &m_stHolder);
	
m_stHolder.AddPage( &m_dlgTest1 );
m_stHolder.AddPage( &m_dlgTest2 );
m_stHolder.AddPage( &m_dlgTest3 );
m_stHolder.AddPage( &m_dlgTest4 );
m_stHolder.SetCurrentPage( 0 );

As shown the above code, initializing is really simple. You only need to call 'AddPage' and 'SetCurrentPage' functions.

Lastly, to show a next or previous dialog, you can call the 'MoveNext' or 'MovePrev' function like the below code. Note that I assigned the Button1 as a previous button and Button2 as a next button.

void CSliderDlg::OnButton1() 
{
	m_stHolder.MovePrev();
}

void CSliderDlg::OnButton2() 
{
	m_stHolder.MoveNext();
}

That's all! Enjoy it!

Implementation

This section presents the detailed implementation of the control. If you are not interested in the detail, it is good to skip it.

Basically, the control inherits the CStatic class. Thus, it is a custom static control.
It has a list to save all added dialogs(pages) and automatically shows a next or previous dialog(page).

Upon a showing next or previous page request, it setups a timer to move dialogs until they are at the right place. For example, if the current page is second page and a previous page button is pressed, then the second page will move to the left until it becomes invisible and the third page will move to the (0, 0) position of the static control. And in case of the next page button, the control will do the same thing with the opposite direction for the first and second dialogs.

Most logics are in OnTimer function of the CStaticHolder class. If you need to inspect more, please see that function. Thanks!

History

May 25, 2012. Initial version.