Creating and Using custom controlsin VC++

Introduction

Hi there! This is my fourth article for TheCode Project. Migrating towards the VC++,I have firstly concerned with the custom controls that can be created with thehelp of VC++, since thatis a very helpful feature when you want to modify the contents of any controlor you want to create your own. So, I have decided to write this article so thenew developers or the beginners who want to develop any controls will get somehelp from my small knowledge.

Now, that’s all for the introduction now, I ammoving towards the original point of view: that is, how and why to create anycustom control. As I have interest in developing applications in Win32 API because of its small size and standalone executables, I never ever had worked on the VC++ but, it is too much powerful languageand the power-features in it have attracted me towards it. One of them is thecustom control. Too much of articles on the CodeProject have used the customcontrols. But when I have read them firstly, I haven’t understood how to createand get the messages and then process on that messages in the simple Windowsapplications. The custom controls give the developer a convenient way to createthe control and visualize that as the regular control.

(As I am a beginner with VC++, please tell meif there are any mistakes in this article).

Where is it?

Now, the question is that, where is the customcontrol? So, answer is below. The picture below shows the custom control, itlies in the control bar.

The picture shows the position of the customcontrol. You are able to select it and draw directly on your form resource.

The main problem arises after you have putthat control on your form that if you build and execute the program the view isnot available since you haven't selected any class for your control, so thatpart is discussed in a later section.

Creating a Class

Now, the figure above shows the custom controlas drawn on the form view. Now, you have to right click on that and selectClassWizard form the popup menu.

Selecting a class

After you have clicked the Class wizard, thedialog shown here appears on the screen. From it, select Add Class and then New.

Now, once you have clicked the New button, the dialog to select the baseclass for our custom control will appear as below. Here, you have multiplechoices to select any base class. That means you can customize the basiccontrol like, static control or the edit control, by adding the new features,or you are able to create a fully new control. I have decided to create a fullynew control like a pad, and so, I have selected a basic CWnd class as a base class.

And finally, you have created a class for yourcontrol. Now, the serious part begins....

As the class has been created by using the CWnd as a base, we willhave to register this class since this is a custom class. So, we will have towrite the function RegisterWndClass() to do that. It may becoded as below...

 Collapse | Copy Code

BOOL MyCustomControl::RegisterWndClass()

{

    WNDCLASS windowclass;

    HINSTANCE hInst = AfxGetInstanceHandle();

    //Check weather the class is registerd already

    if (!(::GetClassInfo(hInst, MYWNDCLASS, &windowclass)))

    {

        //If not then we have to register the new class

        windowclass.style = CS_DBLCLKS;// | CS_HREDRAW | CS_VREDRAW;

        windowclass.lpfnWndProc = ::DefWindowProc;

        windowclass.cbClsExtra = windowclass.cbWndExtra = 0;

        windowclass.hInstance = hInst;

        windowclass.hIcon = NULL;

        windowclass.hCursor = AfxGetApp()->LoadStandardCursor(IDC_ARROW);

        windowclass.hbrBackground = ::GetSysColorBrush(COLOR_WINDOW);

        windowclass.lpszMenuName = NULL;

        windowclass.lpszClassName = MYWNDCLASS;

        if (!AfxRegisterClass(&windowclass))

        {

            AfxThrowResourceException();

            return FALSE;

        }

    }

    return TRUE;

}

In this way, we have registered the new windowclass. Now, you will have to add that function in your default classconstructor as follows:

 Collapse | Copy Code

MyCustomControl::MyCustomControl()

{

    //Register My window class

    RegisterWndClass();

}

I think anyone will think what is MYWNDCLASS. Theanswer is that it is the defined class name for our custom class. It is definedat the top of the MyCustomControl.h file as follows:

 Collapse | Copy Code

#define MYWNDCLASS "MyDrawPad"

Now, we have our own class called MyDrawPad.

Attaching Class to theCustom Control:

With all things going right, we areapproaching towards completing the creation of the custom control. The lastthing remaining is to set the custom control as our created window class. Forthat, right click on the custom control in the resource view and then selectthe properties of the custom control. The dialog box will appear as shownbelow...

Then, set the class name as MyDrawPad that we have createdearlier. Here you can select the window style by changing the hexadecimal valuein the style edit box.

I have experimented with some of the values,you can also try them.

Doing the DataExchange

Now, all the things are set up. But the datamust be exchanged between the window and our application. So, add a variablefor our custom control to your dialog class as follows:

 Collapse | Copy Code

// Implementation

protected:

HICON m_hIcon;

MyCustomControl m_drawpad;//This is our custom control

After that, you have to add the following codein the DoDataExchage() function to interactwith the custom control.

 Collapse | Copy Code

void CCustomControlDlg::DoDataExchange(CDataExchange* pDX)

{

    CDialog::DoDataExchange(pDX);

    //{{AFX_DATA_MAP(CCustomControlDlg)

    // NOTE: the ClassWizard will add DDX and DDV calls here

    DDX_Control(pDX,IDC_CUSTOM1,m_drawpad);

    //}}AFX_DATA_MAP

}

Now, areyou ready for the action??? Then,press Ctrl+F5 to compile and execute the program.(Wish you all the best... I think there is no error!!!)

Do not forget to write #include"MyCustomControl.h" in theDialog's Header file, else it will generate too many errors. (I Think youwill not blame me HHAA HHAA HHAA).

Adding and processing themessages

After succeeding in the critical part above,you should get the Dialog box containing the white rectangle on it. That is ourcustom control (Belive Me!).That's only a small window. Now, we will have to add some Windows messages tointeract with that control. Read carefully...

To add Windows messages to the window, rightclick on the class MyCustomControl and select Add Windows Message Handler to add the messages like, mouse move,click etc...

In this way, after a long work (is it?), you have created yourown custom control. Now relax, and start writing your own. And please rate myarticle (I like it). For example, I have written a simple DrawPad in the included source code.

Now, we will go through ashort summary of this article:

To create the custom control, we will have todo the following things:

• Create a simple MFC Application containing Dialog resource.
• Select the custom control form the control bar.
• Draw the custom control on the Dialog resource.
• Right click the custom control and select the Class Wizard.
• From Add class popup, add new custom class selecting the appropriate base class.
• Add the code and register the Custom Window class.
• Add the member variable for a base class (custom class) in the dialog.
• Set the custom control's class to the registered window class name.
• Add the DoDataExchange code.
• Now, press Ctrl+F5 to compile and execute the application.
• Add/Edit the Windows message handlers by right clicking the Custom control's class in the class view.

If you really like it, then mail me at [e-mail], and mail me your suggestionsand spelling Missssstakes in this article. Also any bugs in the source code (asI am the BugHunter{ I think so, Do you?}).