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.
- 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.
- Add two buttons to implement the sliding next and previous feature respectively.
- At the dialog's header file, find the following source code,
and change it like the below code.
- Add the following code to include the control's header file.
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
CTest4Dlg respectively. After that, I added them as member variables on the dialog like the below code.
Also, including header files like the below code is required.
Then, initializing the slider control and dialogs at the
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 '
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.
That's all! Enjoy it!
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!
May 25, 2012. Initial version.