CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

Onscreen keyboards are quite common. Usually, the best place to find an implementation of an onscreen keyboard can be found in a restaurant’s point of sale application. These days, though, using an onscreen keyboard application could be found in any industry. Today, I will show you how to make a very basic onscreen keyboard application.

Onscreen Keyboard Application

The characteristics of an onscreen keyboard application are mainly the fact that the end product does not have a method for keyboard input. Reasons for this could be due to security, or simply ease of access. An onscreen keyboard, or an OSK, is an application that provides an onscreen keyboard that can be used with a mouse or touch for touchscreens.

Our Project

Today, you will create a very basic onscreen keyboard.

Design

Open Visual Basic and create a new Windows Forms application. You may name the application anything you like. Once the project has been created, design your form to resemble Figure 1:

Figure 1: Our design

It doesn’t look like much, yet. When designing your form, be careful to leave enough space for the buttons of the keyboard that we will create dynamically.

Code

Add the following code to your Form_Load event:

Private Sub Form1_Load(ByVal sender As Object, _
   ByVal e As System.EventArgs) Handles Me.Load

   Dim BtnCap As Button

   Dim Lft As Integer = 10
   Dim Top As Integer = 60

   For i As Integer = Asc("A") To Asc("Z")

   BtnCap = New Button

   With BtnCap

      .Name = "BtnC_" & Chr(i)
      .Text = "&" & Chr(i)

      .Size = New Size(25, 25)
      .Location = New Point(Lft, Top)

      .Tag = Chr(i)

      Lft = Lft + 20

      If Chr(i) = "M" Then

         Top = Top + 30
         Lft = 10

      End If

      .Visible = True

   End With

   Me.Controls.Add(BtnCap)

   AddHandler BtnCap.Click, _
      AddressOf BtnCap_click

   Next

End Sub

First, I create a new button object named BtnCap. This button or buttons will be placed on the form and will hold all the capitalized letters of the alphabet. Next, I created two objects to hold the first button’s location (in pixels) and later on I will manipulate the left and top objects to put the buttons next to each other. I then made use of a with structure to set the dynamic button’s Name, Text, Size, Location, and Tag properties inside the For Loop.

When the character M is reached, the characters must continue under the previous 13 buttons. Lastly, I set the Visible property to true, add the dynamic button to the form and create an event handler for when the particular button is clicked. Add the Click event for the buttons now:

Private Sub BtnCap_click(ByVal sender As System.Object, _
   ByVal e As System.EventArgs)

   TextBox1.Text = TextBox1.Text & _
      DirectCast(sender, Button).Tag

End Sub

When any of the buttons is pressed, TextBox1 will display the associated button’s Tag property that was set up inside the Form load event.

When run, your form will resemble Figure 2 and you will be able to click the letters and see the character inside the top textbox.

Figure 2: Big letters

Modify your Form Load event to include the small letters as well:

Private Sub Form1_Load(ByVal sender As Object, _
   ByVal e As System.EventArgs) Handles Me.Load

   Dim BtnCap As Button
   Dim BtnNor As Button

   Dim Lft As Integer = 10
   Dim Top As Integer = 60

   For i As Integer = Asc("A") To Asc("Z")

      BtnCap = New Button

      With BtnCap

         .Name = "BtnC_" & Chr(i)
         .Text = "&" & Chr(i)

         .Size = New Size(25, 25)
         .Location = New Point(Lft, Top)

         .Tag = Chr(i)

         Lft = Lft + 20

         If Chr(i) = "M" Then

            Top = Top + 30
            Lft = 10

         End If

         .Visible = True

      End With

      Me.Controls.Add(BtnCap)

      AddHandler BtnCap.Click, AddressOf BtnCap_click

   Next

   Dim NLft As Integer = 10
   Dim NTop As Integer = Top + 30

   For j As Integer = Asc("a") To Asc("z")

      BtnNor = New Button

      With BtnNor

         .Name = "BtnN_" & Chr(j)
         .Text = "&" & Chr(j)

         .Size = New Size(25, 25)
         .Location = New Point(NLft, NTop)

         .Tag = Chr(j

         NLft = NLft + 20

         If Chr(j) = "m" Then

            NTop = NTop + 30
            NLft = 10

         End If

         .Visible = True

      End With

      Me.Controls.Add(BtnNor)

   AddHandler BtnNor.Click, _
      AddressOf BtnNor_click

   Next

End Sub

The code is basically the same, except that now we are testing and using small letters, as shown in Figure 3:

Figure 3: Adding small letters

Numbers

Working with numbers is a tad easier than letters. You do not need to use any character manipulation techniques to convert the number to a character. You can simply use a loop from 0 to 9 and use almost the same code as above to get the numbers to appear. Here is a small example:

   Dim BtnNum As Button

   Dim Lft As Integer = 10
   Dim Top As Integer = 60

   For i As Integer = 0 To 9

      BtnNum = New Button

      With BtnNum

         .Name = "BtnC_" & i
         .Text = "&" & i

         .Size = New Size(25, 25)
         .Location = New Point(Lft, Top)

         .Tag = i

         Lft = Lft + 20

         .Visible = True

      End With

   Me.Controls.Add(BtnNum)

   AddHandler BtnNum.Click, _
      AddressOf BtnCap_click

   Next

When run, it will resemble Figure 4:

Figure 4: Numbers

Conclusion

I hope you have enjoyed today’s little article as much as I have enjoyed showing it to you. Until next time, cheers!