Click here to Skip to main content
Click here to Skip to main content

Skin based slider control

By , 17 Jun 2002
Rate this:
Please Sign up or sign in to vote.
<!-- Download Links --> <!-- Article image -->

Sample Image - skinslider.gif

<!-- Add the rest of your HTML here -->

Introduction

Here is a solution for developers looking for a skin based slider control. It is different from the article Transparent Slider Control by Nic Wilson in the way that it allows you to skin the background and tick of the slider control and also allows you to have a customized cursor over the slider control.
The main class for slider control is CZipSliderCtl that uses another bitmap class CZipBitmap for drawing normal and transparent images on the control. It is very easy to use and looks good (if you have good-looking images), so go for it. Follow the following instructions to use it  in your application.

How to use it?

Its fairly simple to use the CZipSliderClt class. Just add the files ZipSliderCtl.h, ZipSliderCtl.cpp, ZipBitmap.h, ZipBitmap.cpp into your project, add the slider control to your dialog box and change the member variable of the control. Modify the following code

CSliderCtl	m_sliderCtl;

to look like this:

CZipSliderCtl	m_sliderCtl;

You will need add the following code at the top of you application's dlg header file.

#include "ZipSliderCtl.h"

Congratulations you have successfully created the object of the slider control and now it is time to skin the control. Add the following code at the bottom of OnInitDialog function

	m_sliderCtl.SetSkin(IDB_SEEKBAR_BACK,IDB_SEEKBAR_TICK,IDC_CURSOR_SEEK);
	m_sliderCtl.SetRange(0,15000);

So you have skinned your control and it is ready to use. Compile and run to see how it looks. All the best.. enjoy!!!

Behine the scenes

The CZipSliderCtl class is based on the fairly simple concept of subclassing. I have derived this class from CSliderCtl and have overridden the following functions

	//{{AFX_MSG(CZipSliderCtl)
	afx_msg void OnMouseMove(UINT nFlags, CPoint point);
	afx_msg void OnPaint();
	afx_msg void OnLButtonUp(UINT nFlags, CPoint point);
	afx_msg void OnLButtonDown(UINT nFlags, CPoint point);
	afx_msg void OnKeyUp(UINT nChar, UINT nRepCnt, UINT nFlags);
	afx_msg void OnKeyDown(UINT nChar, UINT nRepCnt, UINT nFlags);
	afx_msg BOOL OnSetCursor(CWnd* pWnd, UINT nHitTest, UINT message);
	//}}AFX_MSG

I have used the class CZipBitmap to draw the normal and transparent images on the dialog box. If any transparent image is drawn using this class, it makes all the portions of let-top pixel color transparent. The magic of skinning the control is always contained in the OnPaint function. So look at the following magical lines of code

{
	CPaintDC dc(this); // device context for painting

	int iMax,iMin,iTickWidth=10,iMarginWidth=10;
	GetRange(iMin,iMax);
	RECT rcBack,rcTick;
	GetClientRect(&rcBack);
	rcTick = rcBack;
	TRACE("%d\n",GetPos());
	rcTick.left = ((rcBack.right-iMarginWidth)*(GetPos()))/((iMax - iMin)+iMarginWidth/2);
	rcTick.right = rcTick.left + iTickWidth;

	m_bmpBack->Draw(dc,0,0);
	m_bmTrans->DrawTrans(dc,rcTick.left, -2);
}

so its all done. I hope my efforts will be appreciated

Revision History

17 Jun 2002 - Initial Revision
17 Jun 2002 - Reformatted some text.

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

Ashok Jaiswal
Web Developer
Hong Kong Hong Kong
innovating, managing and developing next generation media products and services

Comments and Discussions

 
QuestionCan we Load Images from Outside PinmemberManni Singh19-Apr-06 8:45 
QuestionWhat you are thinking about the skin based slider control is too too simple ! PinmemberChinan Programmer15-May-05 1:18 
GeneralSlider ctrl PinmemberRachel224-Nov-03 17:48 
GeneralMemory Leak... PinmemberMykel24-Jun-02 4:59 
GeneralRe: Memory Leak... PinmemberAshok Jaiswal5-Aug-02 22:03 
GeneralRe: Memory Leak... PinmemberKnut Beese23-Jun-03 6:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web04 | 2.8.140415.2 | Last Updated 18 Jun 2002
Article Copyright 2002 by Ashok Jaiswal
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid