Search UserControl w/ Watermark Effect (VB .NET)

On this tutorial we are going to write codes for a "search" feature on a Windows Forms using VB .NET, Let's begin!...

I. The User Control

1.) On Visual Studio click on  to create a 'New Project'. The dialog below will appear, choose Installed Templates > Visual Basic then pick Class Library . Fill up the Name field as <YourName>Controls (e.g. JeremiahControls) then hit OK.

2.) Rename the Class1.vb to WaterMarkEffect.vb located on the given Project.

3.) Right click the Project, then choose Add Reference... The dialog below will appear look for 'System.Windows.Forms' then Hit OK.

4.) Type the code below for WaterMarkEffect.vb

Imports System.Windows.Forms
Imports System.Drawing

Public Class WaterMarkEffect

    Public ReadOnly Property SearchLabel() As String
        Get
            Return "Type text here."
        End Get
    End Property

    Friend WithEvents _textBox As TextBox
    Private Property TextBox() As TextBox
        Get
            Return _textBox
        End Get
        Set(ByVal value As TextBox)
            _textBox = value
        End Set
    End Property

    Public Sub WaterMark(textBox As TextBox)
        Me.TextBox = textBox
        Me.TextBox.ForeColor = Color.Gray
        Me.TextBox.Font = New Font("Microsoft Sans Serif", 8.25, Drawing.FontStyle.Italic)
        Me.TextBox.Text = SearchLabel
    End Sub

    Private Sub TextBox_Enter(sender As System.Object, e As System.EventArgs) Handles _textBox.Enter
        With Me.TextBox
            If .Text.Length > 0 And .Text = SearchLabel Then
                .Text = String.Empty
            End If
            .ForeColor = Color.Black
            .Font = New Font("Microsoft Sans Serif", 8.25, Drawing.FontStyle.Regular)
        End With
    End Sub

    Private Sub TextBox_Leave(sender As System.Object, e As System.EventArgs) Handles _textBox.Leave
        With Me.TextBox
            If .Text.Length = 0 Then
                .ForeColor = Color.Gray
                .Font = New Font("Microsoft Sans Serif", 8.25, Drawing.FontStyle.Italic)
                .Text = SearchLabel
            End If
        End With
    End Sub

End Class

5.) Some lines of codes will be on mark with 'error squiggles', just hover your mouse on the object property (e.g. ForeColor) then use the 'Error Correction Options'.

6.) Right click the Project, then choose Add > New Item...  The dialog below will appear look for 'User Contol', Fill up the Name field as SearchFrame then Hit OK.

7.) Design the UI just like below, name the TextBox as SearchBox and Button as SearchButton.

9.) Type the code below for SearchFrame.vb

Public Class SearchFrame

    Public Event SearchButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
    Private wt As New WaterMarkEffect()

    Private Sub SearchFrame_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        wt.WaterMark(SearchBox)
    End Sub

    Private Sub SearchBox_KeyPress(sender As System.Object, e As System.Windows.Forms.KeyPressEventArgs) Handles SearchBox.KeyPress
        If (e.KeyChar = vbCr And SearchBox.Text.Length > 0) Then
            SearchButton.PerformClick()
        End If
    End Sub

    Private Sub SearchButton_Clicked(ByVal sender As Object, ByVal e As EventArgs) Handles SearchButton.Click
        If Me.SearchBox.Text.Length <> 0 And Me.SearchBox.Text <> wt.SearchLabel Then
            RaiseEvent SearchButtonClicked(sender, e)
        End If
    End Sub

    Public ReadOnly Property SearchFrameText() As String
        Get
            Return Me.SearchBox.Text
        End Get        
    End Property

End Class

*** SearchFrameText - Text property of the SearchFrame's TextBox.

*** SearchButtonClicked - Click event of the SearchFrame's Button.

9.) On your Visual Studio choose Release from the Solution Configuration ComboBox, then do Build the project (This will create a <YourName>Controls.dll file on the '\bin\Release' directory of the project).

II. The Main Application

1.) On Visual Studio click on  to create a 'New Project'. The dialog below will appear, choose Installed Templates > Visual Basic then pick Windows Forms, then hit OK.

2.) Right click on the Toolbox Pane, then choose Add Tab, specify a tab name (e.g. Custom User Controls).

3.) Right click anywhere inside your custom tab, then pick Choose Items...

4.) A dialog below will appear, click on 'Browse..' to locate the <YourName>Controls.dll.

5.) If you found the user control, hit the Open, then OK to finish.

6.) 'SearchFrame' should be now on the Toolbox Pane.

7.) For demo purposes, drag a ListBox and the SearchFrame to the form.

8.) Attach a 'SearchButtonClicked' for the control named SearchFrame1.

9.) Type the code below...

Public Class Form1

    Private Sub SearchFrame1_SearchButtonClicked(sender As System.Object, e As System.EventArgs) Handles SearchFrame1.SearchButtonClicked
        If SearchFrame1.SearchFrameText = "Jesus" Then
            ListBox1.Items.Clear()
            ListBox1.Items.Add("God")
            ListBox1.Items.Add("Bless")
            ListBox1.Items.Add("Us")
        End If
    End Sub

End Class

10.) Output should look like below.

To see video demo click here.