Visual C++ UseSkin Sample

    You can find the sample code in "samples\vc\useskin" directory. It's written in Visual C++ 5.0. We also tested the code to make sure it works in Visual C++ 6.0.

    Here are the detailed steps to create the UseSkin Magic Applications:

 

Use VC AppWizard to create project

    In Visual C++ select menu "File", "New". Choose "Projects" tab and select "MFC AppWizard (exe)".  Type in the project name "UseSkin" and click "OK". In the next tab select "Dialog Based". Then Click "Finish".         

 

Create Skins

    Follow the instructions here to create skins. The skins created should be put in a separate directory under the project. In the UseSkin sample we put it under "skins" directory

 

Insert MagicShape, MagicButton ActiveX into project

    In Visual C++ select menu "Project",  "Add to Project", "Components and Controls". "Components and controls gallery" dialog box will come up. Double click "Registered ActiveX Controls" folder. In the folder first select "JCSoft MagicButton Control 1.0" then click "Insert" button. Click "OK" in the next two dialog boxes. Then select "JCSoft MagicShape Control 1.0" and follow the same steps. Now you have inserted two ActiveX into your project

 

Modify the dialog box in design time

    Click the resource tab in the Visual C++ project and open the main dialog box which is "IDD_USESKIN_DIALOG". Resize the dialog box so that it will help you layout your controls. As a rule of thumb: the width and height of the dialog box(in dialog box unit) should be half of the background image size(in pixel). For example if you background image size is (400X200) then your dialog box size should be (200X100).

    You will see two ActiveX controls in the control palette. Drag MagicShape ActiveX control to the dialog box. You can place it anywhere because it's invisible during Runtime. You also don't need to set the property for the MagicShape control during design time(it's only used in Visual basic). You should only put one MagicShape control in the dialog box. Now drap drop MagicButton ActiveX control to the dialog box. Right click and choose "properties". Choose "Control" tab in the property and  specify the image path for the button. You will see the control resize to fit the image size. The buttons will still be rectangle during design time. But if you click "Ctrl T" to do a quick test you will see non rectangle buttons as you designed. You can add as many MagicButton controls as you like. 

 

Add Runtime code

    First use ClassWizard to create member variable for MagicShape controls. Use "Ctrl W" to launch MFC ClassWizard. Use "Member Variable" tab to add variable for each control. Now go to the OnInitDialog() function to set the skin for each control. For UseSkin sample you will find following code in the OnInitDialog() in useskinDlg.cpp: 

	m_magicshape.SetImageSkin("Skins\\background.bmp");
	m_bt_leftball.SetImagePath("Skins\\circblue.bmp");
	m_bt_rightball.SetImagePath("Skins\\circblue.bmp");
	m_bt_square.SetImagePath("Skins\\square.bmp");
	m_bt_cancel.SetImagePath("Skins\\cancel.bmp");

 

Event Processing

    MagicButtons will send "Clicked" event. You process the event just like you process stardard window button events. Use "Ctrl W" to launch MFC ClassWizard. Use "Message Maps" tab to add handling function for the "Clicked" event.

 

Morphing

    Morphing is achieved by changing the skin for the MagicShape ActiveX. You use SetImageSkin to change the skin:

	m_magicshape.SetImageSkin("Skins\\background.bmp");

    In the UseSkin sample, if you click on the left ball the skin will change to Ellipse. If you click on the square button the skin will change to rounded rectangle shape.