Tabstrip Scenario: Create a Tabbed Dialog Box

See Also

The TabStrip control is used to create dialog boxes which contain a number of tabs. Each tab usually has some relationship to a larger theme, and is therefore related to other tabs in the same dialog box. In this scenario, we create a tabbed dialog box which sets the fonts, and indents of a RichTextBox.

The following objects are used in the code below:

To create a Tabbed Dialog Box

  1. Create two forms, one named "frmRTF" to contain the RichTextbox, and a second named "frmTab" to contain the TabStrip control.

  2. At design time, create two Tab objects on the TabStrip control.

  3. Create a Frame control array named "fraTab" on frmTab.

  4. Draw the ComboBox on fraTab(0) and two OptionButton controls on fraTab(1).

  5. Use the Move method in the Load event to position the Frame controls.

  6. In the TabStrip control's Click event, use the SelectedItem property to determine the Index of the clicked Tab.

  7. Use the Index with the ZOrder method to bring the right Frame to the front.

Create two Forms, One Named "frmRTF" to Contain the RichTextbox, and a Second Named "frmTab" to Contain the TabStrip Control

This scenario requires two forms: the first is named "frmRTF," and contains the RichTextBox control, the second, named "frmTab", contains the TabStrip control.

To create two Form objects

  1. On the File menu, click New Project to display the New Project dialog box.

  2. Double-click the Standard EXE Project icon, and a new form named Form1 will be created for you.

  3. If the Properties window is not showing, press f4 to display it.

  4. Click the Name box and type "frmRTF."

  5. Draw a RichTextBox control on the form.

    Note   You must have the RichTextBox (RichTx32.ocx) loaded into the Toolbox. See "Loading ActiveX Controls" for more information.

  6. On the Properties page window, click the Name box and type "rtfData"

  7. On the Project Explorer window, click Add Form to display the Add Form dialog box.

  8. Double-click the Form icon to insert another form into the project.

  9. On the Properties window, click the name box and type "frmTab."

  10. Draw a TabStrip control on frmTab, and name it "tabRTF."

You must also have some code that shows the second form. A quick way to do this would be to place a Show method in the DblClick event of the first Form object (frmRTF), as shown below:

Private Sub Form_DblClick()
   frmTab.Show
End Sub

At Design time, Create Two Tab Objects on the TabStrip Control

You can create Tab objects at design time and at run time. In this scenario, you should create the two tabs at design time. Right-click on the TabStrip control and click Properties to display the Property Pages dialog box. Then click the Tabs tab and click Insert Tab twice. Be sure to give the tabs appropriate captions — "Fonts," and "Indents."

Create a Control Array Named "fraTab" on frmTab

A TabStrip control functions by managing Tab objects. Each Tab object is associated with a container control that appears in the tab's client area. It's most efficient to use a control array to create the container controls. In this scenario, draw a Frame control on the same form as the TabStrip control, and name it "fraTab."

To create a control array

  1. Draw a Frame control on frmTab.

  2. Click the Name box on the Properties window and type "fraTab."

  3. Click the Frame control and copy it to the clipboard by either pressing ctrl+c or clicking Copy from the Edit menu.

  4. Paste the same control back on the form by pressing ctrl+v. A dialog box will ask you if you want to create a control array. Click Yes.

Draw the ComboBox on fraTab(0) and Two OptionButton controls on fraTab(1)

On the control named fraTab(0), draw a ComboBox control, and name it "cmbFonts." To populate the ComboBox with all available fonts on your system, use the following code:

Private Sub Form_Load()
   Dim i   ' Declare variable.
   ' Determine number of fonts.
   For i = 0 To Printer.FontCount - 1
      ' Put each font into list box.
      cmbFonts.AddItem Printer.Fonts(I) 
   Next i
   cmbFonts.ListIndex = 0
End Sub

To set the SelFontName property of the RichTextBox control, use the following code:

Private Sub cmbFonts_Click()
   frmRtf.rtfData.SelFontName = cmbFonts.Text
End Sub

Draw two OptionButton controls on the second Frame control named fraTab(0). Name the first OptionButton control "optNormal," and change its Caption property to "Normal." Name the second control "optBullet," and set its Caption property to "Bullet." The code for these controls sets the SelBullet property to True or False. The code for each is shown below:

Private Sub optBullet_Click()
   ' The Form object's ScaleMode is set to Twips.
   frmRTF.rtfData.BulletIndent = 500
   frmRTF.rtfData.SelBullet = True
End Sub

Private Sub optNormal_Click()
   frmRTF.rtfData.SelBullet = False 
End Sub

Use the Move Method in the Load Event to Position the Frame Controls

To position the Frame controls over the client area, use the Move method in the Form object's Load event, as shown below:

Private Sub Form_Load()
   ' The name of the TabStrip is "tabRTF."
   ' The Frame control is named "fraTab."
   For i = 0 To    fraTab.Count - 1
   With fraTab(i)
      .Move tabRTF.ClientLeft, _
      tabRTF.ClientTop, _
      tabRTF.ClientWidth, _
      tabRTF.ClientHeight
   End With
   Next I
   
   ' Bring the first fraTab control to the front.
   fraTab(0).ZOrder 0
End Sub

In the TabStrip Control's Click Event, Use the SelectedItem Property to Determine the Index of the Clicked Tab

To determine which Tab object, use the SelectedItem property. This property returns a reference to the clicked tab. However, the Tabs collection is a 1-based collection (the collection index begins with 1), and the fraTab array is a 0-based collection. To make sure the two are synchronized, subtract 1 from the Index, as shown below.

Private Sub tabRTF_Click()
fraTab(tabRTF.SelectedItem.Index - 1).ZOrder 0
End Sub

Tip   At design time, you can set the Index property of the Frame control array to become a 1-based array. Thus the code above would read:

fraTab(tabRTF.SelectedItem.Index).ZOrder 0

The Complete Code

The complete code is shown below:

Private Sub Form_Load()
   Dim i As Integer' Declare variable.
   ' Determine number of fonts.
   For i = 0 To Printer.FontCount - 1
      ' Put each font into list box.
      cmbFonts.AddItem Printer.Fonts(i) 
   Next i

   cmbFonts.ListIndex = 0
   
   ' The name of the TabStrip is "tabRTF."
   ' The Frame control is named "fraTab."
   For i = 0 To fraTab.Count - 1
   With fraTab(i)
      .Move tabRTF.ClientLeft, _
      tabRTF.ClientTop, _
      tabRTF.ClientWidth, _
      tabRTF.ClientHeight
   End With
   Next i

   ' Bring the first fraTab control to the front.
   fraTab(0).ZOrder 0
End Sub

Private Sub cmbFonts_Click()
   frmRTF.rtfData.SelFontName = cmbFonts.Text
End Sub

Private Sub optBullet_Click()
   frmRTF.rtfData.BulletIndent = 500
   frmRTF.rtfData.SelBullet = True
End Sub

Private Sub optNormal_Click()
   frmRTF.rtfData.SelBullet = False
   
End Sub

Private Sub tabRTF_Click()
   fraTab(tabRTF.SelectedItem.Index - 1).ZOrder 0
End Sub

This following code goes into the form named "frmRTF."

Private Sub Form_DblClick()
   frmTab.Show
End Sub