Toolbar Scenario 2: Set the Text Alignment of a RichTextBox Control Using Grouped Buttons

See Also

This scenario builds upon the previous scenario, where a Toolbar control is used to open a file loaded into a RichTextBox control. In this scenario, you will add three buttons to the Toolbar control with icons for left-aligned, center-aligned, and right-aligned.

The three buttons are all a part the ButtonGroup (tbrButtonGroup) style which allows only one of the three to be pressed at any time.

Important   To specify which buttons are part of a button group, you must "enclose" the group with two other buttons which have the Separator (tbrSeparator) style. For example, if there are three buttons in a group, and they are the fourth through the sixth buttons, then the third and seventh buttons must have the Separator style to enclose the group.

When the user clicks in the RichTextBox control, the SelChange event occurs. In that event, the code checks the SelAlignment property which returns the alignment of the current selection. That value is used to depress the appropriate button in the Toolbar control.

For More Information   See "Style Property (Button Object)" for more information about the ButtonGroup style.

The following objects are used in this scenario:

To create a toolbar that sets text alignment

(The following operations are described at a high-level. For more specific information, see "Using the Toolbar Control.")

  1. At design time, insert the appropriate images into an ImageList control associated with the Toolbar control.

  2. Create the Button objects using the Property Pages dialog box.
  3. In the ButtonClick event, use the Select Case statement to determine which button was pressed, and set the alignment appropriate to the button.
  4. In the RichTextBox control's SelChange event, use the Select Case statement to reflect alignment.

Insert the Appropriate Images into an ImageList Control Associated with the Toolbar Control

As in the previous Toolbar Control Scenario, you must first insert the appropriate images for the button group into an ImageList control.

To add to the ImageList control at design time

  1. Right-click on the ImageList control and click Properties.

  2. In the Property Pages dialog box, click the Images tab.

  3. Click Insert Picture to display the Select Picture dialog box which allows you to find the images you need. This scenario uses images found in the Tools\Bitmaps\Tlbr_W95 directory. The images used are named: Lft.bmp, Cnt.bmp, and Rt.bmp.

  4. For each image you insert, type an appropriate key for the image in the Key box. In this scenario, the images and their keys are as follows:
    Image Key
    Lft.bmp "left"
    Cnt.bmp "center"
    Rt.bmp "right"

  5. Associate the ImageList with the Toolbar control by right-clicking the Toolbar control and clicking Properties, then selecting the ImageList control from the drop-down box ImageList.

Create the Button Objects Using the Property Pages Dialog Box

You can create Button objects at design time by using the Toolbar control's Property Pages dialog box. For specific information on how to do this, see "Toolbar Control Scenario 1: Provide an RTF Text Editor an OpenFile Button."

To create a group of three buttons, you must actually create five buttons, three of which are enclosed by two Button objects with the Separator style. The Style, Key, ToolTipText, and Image properties for the five buttons should be set as shown in the table below:

Button Style Key ToolTipText Image
1 tbrSeparator [none] [none] [none]
2 tbrButtonGroup left Align Left 1
3 tbrButtonGroup center Center 2
4 tbrButtonGroup right Align Right 3
5 tbrSeparator [none] [none] [none]

Use the Select Case Statement to Determine Which Button was Pressed, and Set the Alignment Appropriate to the Button

The ButtonClick event occurs when the user clicks on any Button object (except buttons with the Separator or Placeholder styles). Use the Select Case statement with the Key property to determine which button was clicked, and set the alignment of the RichTextBox using the SelAlignment property of the RichTextBox control. After setting the alignment, return the focus to the control by using a SetFocus method, as shown in the code below:

Private Sub tlbRTF_ButtonClick(ByVal Button _
As Button)
   ' Use the Select Case statement with the Key 
   ' property to determine which button was clicked.
   Select Case Button.Key
   Case "left"
      rtfData.SelAlignment = rtfLeft
      rtfData.SetFocus ' Return focus to RichTextBox.
   Case "center"
      rtfData.SelAlignment = rtfCenter
      rtfData.SetFocus
   Case "right"
      rtfData.SelAlignment = rtfRight
      rtfData.SetFocus
   Case Else
      ' Handle other cases here.
   End Select
End Sub

Use the Select Case Statement to Reflect Alignment

When the user clicks on a line in the RichTextBox control, the Toolbar buttons will reflect the alignment of the line. This can be accomplished using the RichTextBox control's SelChange event, as shown in the code below.

Private Sub rtfData_SelChange()
   ' When the insertion point changes, set the Toolbar
   ' buttons to reflect the attributes of the line 
   ' where the cursor is located.
   Select Case rtfData.SelAlignment
   Case rtfLeft ' 0
      tlbRTF.Buttons("left").Value = tbrPressed
   Case rtfRight ' 1
      tlbRTF.Buttons("right").Value = tbrPressed
   case Else ' Null—no buttons are shown pressed.
      tlbRTF.Buttons("left").Value = tbrUnpressed
      tlbRTF.Buttons("center").Value = tbrUnpressed
      tlbRTF.Buttons("right").Value = tbrUnpressed
   End Select
End Sub

Running the Code

You can now run the project. Use the Open File button (created in "Toolbar Scenario 1: Provide an RTF Text Editor with an OpenFile Button") to open a file. You can also click the three grouped buttons to change the alignment of the text.