Share via


Visual Basic Concepts

Drawing the MyData Control

A data control needs a user interface to allow the user to move back and forth through the data. In this case, we'll duplicate the functionality and appearance of the familiar Data control using four CommandButtons and a Label control, with a PictureBox to act as a container.

Note   This topic is part of a series that walks you through creating sample data source components. It begins with the topic Creating Data Sources.

To add constituent controls to the MyData control

  1. In the Project Explorer window, double-click MyData to open its designer.

  2. In the Toolbox, double-click the PictureBox control to place a PictureBox control on the MyData designer. Move it near the upper left-hand corner of the designer.

  3. In the Properties window, set the following property values for the PictureBox control:

Property Value
BackColor &H80000005 (Window Background)
Width 4500
  1. With the PictureBox control selected, select the CommandButton control in the Toolbox and draw a CommandButton control on top of Picture1. Repeat the process to add a total of four CommandButton controls (but don't create a control array).

  2. In the Properties window, set the following property values for the CommandButton controls. Where multiple values are shown, values represent settings for Command1 through Command4; otherwise, the value applies to all four CommandButton controls:

Property Values
(Name) cmdFirst; cmdPrev; cmdNext; cmdLast
Caption (Empty)
Picture First.gif; Prev.gif; Next.gif; Last.gif
Style 1 - Graphical
Width 300
**Note**   The bitmaps for the Picture property can be found in the same directory as the AXData sample application.
  1. In the Toolbox, select the Label control draw a label on top Picture1. In the Properties window, set the following property values for the Label control:
Property Value
(Name) lblCaption
BackStyle 0 - Transparent
Caption MyData
  1. Rearrange the Shape and Label controls to look similar to the example shown below. Don't worry about precise placement because the code in the Resize event will take care of that. Select the MyData control and use the grab handles to resize it slightly larger than the area containing the controls.

  2. Double-click the MyData designer to bring the code window to the front, and add the following code to the UserControl_Resize event procedure:

    Private Sub UserControl_Resize()
       Picture1.Move 0, 0, Width, Height
       cmdFirst.Move 0, 0, cmdFirst.Width, Height - 60
       cmdPrev.Move cmdFirst.Left + cmdFirst.Width, 0, _
          cmdPrev.Width, Height - 60
       cmdLast.Move (Width - cmdLast.Width) - 60, 0, _
          cmdLast.Width, Height - 60
       cmdNext.Move cmdLast.Left - cmdNext.Width, 0, _
          cmdNext.Width, Height - 60
    
       lblCaption.Height = TextHeight("A")
       lblCaption.Move cmdPrev.Left + _
          cmdPrev.Width, ((Height - 60) _
          / 2) - (lblCaption.Height / 2), _
          cmdNext.Left - (cmdPrev.Left _
          + cmdPrev.Width)
    End Sub
    

    This code will execute when the MyData is initialized or whenever it is resized to rearrange the constituent controls and provide a consistent appearance.

  3. Add a pair of Property Let / Property Get procedures to expose the Caption property of lblCaption:

    Public Property Get Caption() As String
       Caption = lblCaption.Caption
    End Property
    
    Public Property Let Caption(ByVal NewCaption As String)
       lblCaption.Caption = NewCaption
       PropertyChanged "Caption"
    End Property
    
  4. In the Object box, select (General). In the Procedure box, select (Declarations) to position yourself at the top of the code module. Add the following code:

    Option Explicit
    
    ' Enumerations for the BOFAction Property.
    Public Enum BOFActionType
       adDoMoveFirst = 0
       adStayBOF = 1
    End Enum
    
    ' Enumerations for the EOFAction Property.
    Public Enum EOFActionType
       adDoMoveLast = 0
       adStayEOF = 1
       adDoAddNew = 2
    End Enum
    
    ' Declare object variables for ADO connection
    ' and Recordset objects.
    Private cn As ADODB.Connection
    Private WithEvents rs As ADODB.Recordset
    
    ' Default Property Values:
    Const m_def_RecordSource = ""
    Const m_def_BOFAction = BOFActionType.adDoMoveFirst
    Const m_def_EOFAction = EOFActionType.adDoMoveLast
    Const m_def_ConnectionString = ""
    
    'Property Variables:
    Private m_RecordSource As String
    Private m_BOFAction As BOFActionType
    Private m_EOFAction As EOFActionType
    Private m_ConnectionString As String
    
  5. In the Object box, select UserControl. In the Procedure box, select the InitProperties event. Add the following code to the UserControl_InitProperties event procedure:

    Private Sub UserControl_InitProperties()
       m_RecordSource = m_def_RecordSource
       m_BOFAction = m_def_BOFAction
       m_EOFAction = m_def_EOFAction
       lblCaption.Caption = Ambient.DisplayName
       m_ConnectionString = m_def_ConnectionString
       Set UserControl.Font = Ambient.Font
    End Sub
    
  6. Before we move on, now would be a good time to save your changes. Choose Save Project from the File menu to save your project.

For More Information   See "Drawing the ShapeLabel Control" and "Adding an Event to the ShapeLabel Control" in "Creating an ActiveX Control."

Step by Step

This topic is part of a series that walks you through creating sample ActiveX data sources.

To See
Go to the next step Adding the AXDataSource Project
Start from the beginning Creating Data Sources