Customizing Wizard Steps

By adding controls to the steps in your wizard, and with the help of two common Windows dialog boxes, you can finish creating common elements of the look and style of wizards in Word and PowerPoint. In the following steps, you add an image to the start and finish steps of the wizard dialog box.

A text box that allows you to enter a path to a file or folder is a common element of a wizard dialog box and many other dialog boxes in Office. Usually adjacent to the text box is a button with the caption "Browse," which allows the user to browse for a file or folder rather than having to enter the path in the text box. The following steps describe the addition of the text box and the Browse button. In the last section of this chapter, you'll hook up the Browse button to common Windows dialog boxes that allow the user to browse for a file or folder.

1. On the frmWizard UserForm, click the first tab in the mpgSteps MultiPage control to activate the first page.

Make sure that the text "pgStart Page" appears in the drop-down list at the top of the Properties window.

2. In the Properties window, click the Picture property and then click the ellipsis button in the right column. In the Load Picture dialog box, change to the Chapter 3 practice folder and select the file Start.bmp. Click Open.


Ellipsis

The background of the first page of the MultiPage control now displays a bitmap similar in look and style to that of the Fax Wizard in Word and the AutoContent Wizard in PowerPoint.

3. Set the PictureSizeMode property value to 1 - fmPictureSizeModeStretch.
4. Click the selection border of the MultiPage control. The text "mpgSteps MultiPage" appears in the drop-down list at the top of the Properties window.
5. Scroll down the Properties window and change the Style property from 0 - fmTabStyleTabs to 2 - fmTabStyleNone.



The pages haven't disappeared, just the tabs. Switching between the pages of the MultiPage control isn't as simple as clicking the tab of the specific page. To navigate the pages of the MultiPage control, click anywhere within the MultiPage control to activate the current page and use the drop-down list at the top of the Properties window to activate the specific page. You should work without the tabs in the MultiPage control so that you can precisely place controls within the pages.

6. Resize the mpgSteps MultiPage control so that it fills the space between the imgLeftPane and imgBottomStripe controls and the right side of the UserForm.
7. Click the Image control in the Toolbox and then click in the upper-left area of the first page of the mpgSteps control. Add a Label control just below the Image control and set the properties as follows:


Image Control

Control	Property	Value
Image1	Name	imgTitleBack
Image1	BackColor	&H00000000& (or black from the Palette tab)
Label1	Name	lblTitle
Label1	Caption	Energy Wizard
Label1	BackStyle	0 - fmBackStyleTransparent
Label1	Font	Set the Font Style to Bold and the Font Size to 20.
Label1	ForeColor	&H00FFFFFF& (or white in the Palette tab)

8. Move the lblTitle control onto the imgTitleBack control.
9. Add a Label control under and slightly to the right of the lblTitle control, set its Name to lblStartDescription, set its BackStyle to 0 - fmBackStyleTransparent, and enter its caption as This Wizard helps you generate an Office document from the data in the Energy database. Move and size the controls using the following illustration as a guide:



The page that first appears when you first load the wizard is now complete.

1. Click within the MultiPage control and select pgStep1 Page from the drop-down list in the Properties window. This activates the second page in the mpgSteps MultiPage control.
2. Click the Label control in the Toolbox and click in the upper area of the second page of the mpgSteps control. Add a TextBox control below the Label control and a CommandButton control below the TextBox control.
3. Set the properties of the controls added to the second page. If you followed the steps throughout the chapter, the default names for the controls added will be the same as those listed below:

Control	Property	Value
Label1	Name	lblSource
Label1	Caption	Energy Database:
Label1	Accelerator	E
TextBox1	Name	txtDataSource
CommandButton1	Name	cmdBrowse
CommandButton1	Caption	Browse…
CommandButton1	Accelerator	B

The accelerator keys for controls on the pages in the MultiPage control should never be P, N, or F because these values are reserved for the navigation buttons Previous, Next, and Finish, respectively, at the bottom of the wizard UserForm.

4. Add a Label control below the Browse button. Add a TextBox control below the Label control and a CommandButton control below the TextBox control. Set the properties of the controls added as follows:

Control	Property	Value
Label1	Name	lblTemplate
Label1	Caption	Energy Template:
Label1	Accelerator	n
TextBox1	Name	txtTemplate
CommandButton1	Name	cmdBrowseTemplate
CommandButton1	Caption	Browse…
CommandButton1	Accelerator	r

5. Resize and move the controls on the second page so that the UserForm appears similar to the following illustration:



6. Click within the MultiPage control and select pgStep2 Page from the drop-down list in the Properties window. This activates the third page in the mpgSteps MultiPage control.
7. Click the Label control in the Toolbox and click at the top of the second page of the mpgSteps control. Add a TextBox control below the Label control and a CommandButton control below the TextBox control. Set the properties of the controls as listed below:

Control	Property	Value
Label1	Name	lblDestination
Label1	Caption	Destination folder:
Label1	Accelerator	D
TextBox1	Name	txtDestination
CommandButton1	Name	cmdBrowseFolder
CommandButton1	Caption	Browse…
CommandButton1	Accelerator	B

8. Change the Caption property of lblStep1 and lblStep2 on the subway map to Source and Destination, respectively. Adjust the width of both label controls so that the caption text fits, leaving some extra space so that it'll still fit when the text is made bold. Move and size the controls using the following illustration as a guide:

1. Click within the MultiPage control and select pgFinish Page from the drop-down list in the Properties window. The last page in the mpgSteps MultiPage control is activated.
2. In the Properties window, click the Picture property and then click the ellipsis button in the right column. In the Load Picture dialog box, change to the Chapter 3 practice folder and select the file Finish.bmp. Click Open.


Ellipsis

3. Set the PictureSizeMode property value to 1 - fmPictureSizeModeStretch.
4. Click the Image control in the Toolbox and click in the upper-left of the first page of the mpgSteps control. Add a Label control just below the Image control and set the properties as shown below.

Control	Property	Value
Image1	Name	imgFinishTitleBack
Image1	BackColor	&H00000000& (or black from the Palette tab)
Label1	Name	lblFinishTitle
Label1	Caption	Energy Wizard
Label1	BackStyle	0 - fmBackStyleTransparent
Label1	Font	Set the Font Style to Bold and the Font Size to 16.
Label1	ForeColor	&H00FFFFFF& (or white in the Palette tab)

5. Add a Label control under the lblFinishTitle control and slightly to the right, set its Name to lblFinishDescription, its BackStyle to 0 - fmBackStyleTransparent, and its caption to You are now ready to generate the Office document. Click Finish.
6. Move the lblFinishTitle control onto the imgFinishTitleBack control and resize the controls so that the wizard UserForm appears as follows:



7. Click the Save button to save the work you've done so far.


Save

You've now completed the last page that appears, as well as each step in the wizard. In the next section, you'll add code that will allow you to interact with the controls you've added to your wizard.