Before you start following the tutorial, you need to start Visual Basic and load the SizerOne ActiveX control library. For information on how to load ActiveX controls, see the Visual Basic documentation.
Step 1: Create a new C1Tab control
Create a new C1Tab control on your form just like you would create any other control: Click the tool for the C1Tab control on Visual Basic's Toolbox, then move the pointer onto the form. The pointer will become a cross hair. Place the cross hair near the top left corner of the form. Hold the left mouse button, drag the cross hair to a point near the bottom right corner of the form, and then release the button.
Step 2: Create the tabs
To create the tabs, you need to set the C1Tab's Caption property. Select the control you just created by clicking on it, then press F4 to bring up the property window. Highlight the Caption property and type the following:
| Example Title |
Copy Code
|
|---|---|
Visual &Basic|Visual &C++|&ActiveX Controls |
|
You have just created three tabs, complete with underlined accelerator keys. The text for each individual tab is delimited by pipe characters ("|"). Each tab has its own accelerator key, defined by the ampersand ("&").
The form now looks like this:
Alternatively, you could invoke the C1Tab's property pages and set each tab's caption and picture.
Step 3: Create a page for each tab
Click the tool for the Elastic control on Visual Basic's Toolbox, then move the pointer onto the Tab control, where it says "Place Container Control Here". Hold the left mouse button, drag the cross hair to a point near the bottom of the Tab control, and then release the button.
The Tab will stretch the Elastic control automatically, to fill the entire tab area.
If this were a real application, now would be the time to design the first page. To speed up our tutorial, though, just place a single command button in the middle of the page.
The form now looks like this:
To create the next page, activate the second tab by clicking on it with the mouse. If you prefer to use the keyboard, you can also activate the second tab by pressing F4 to bring up the property window, then changing the CurrTab property to 1.
The second tab will be activated, and since there is no second page yet, you will see the "Place Container Control Here" message again. Repeat the steps outlined above to create a new Elastic on the second page. Place a new command button on it.
Repeat the above steps once again to create the third page.
Note that you should create the pages in the proper order--first the page for tab 0, then the page for tab 1, and finally the page for tab 3. This is because whenever you see the "Place Container Control Here" message, the next container control created is assigned to the first tab that does not yet have a page, not to the current tab.
But do not worry. If the pages get out of synch with the tabs, that is very easy to fix, as you will see in a minute.
Step 4: Customize the appearance of the tabs
The C1Tab control offers extensive control over the appearance of the tabs. The easiest way to customize the tabs is to use the Template property to select a predefined style and then adjust it by setting individual properties.
Select the Tab control by clicking on it, then press F4 to bring up the property window (click on the tabs themselves, otherwise you will probably select the page instead of the Tab control).
Highlight the Template property and set it to 4 - ttpBerkeley. This will automatically set the Position, Style, Font, and all color properties.
The form now looks like this:
The skeleton of the Tab control is ready. If you want to test the control, run the application as it is and click on the tabs. The control will automatically switch pages whenever the current tab changes. You can also switch tabs using the accelerator keys or the arrow keys. Stop the application when you are done testing it.
Step 5: Design the Pages
The last step is to design each page by placing on it the controls that your application requires. Of course, this step depends entirely on the nature of your application. Let us place a few controls on the first page just to illustrate the general procedure.
Switch to the first tab using the mouse or the Properties Window. Now you are ready to start working on the contents of the first page.
Start by setting the Elastic's Appearance property to 0 - apFlat. Now place three text boxes on the right-hand side of the page. Align them to the top, center, and bottom of the page, leaving room for the command button. Move the command button if you have to, and change its Caption property to "&Ok".
The form now looks like this:
Add some labels to identify the text boxes if you like. When you are done with the first page, select the second tab as you did before, with the mouse or using the Properties Window. This will bring up the second page, and you can design it just like you did the first.
When you are done with all pages, select the tab that you would like to appear when your application starts, then save your project. This will ensure that the current tab will begin your application.
Congratulations! You have just finished the C1Tab tutorial.