Saturday, December 1, 2012

Create searchBox using UserControl

In Windows 8, there is no Start Menu. It is a good idea to start creating our own Windows 8 Start Menu. That menu is custom and programmed in Visual Basic with the Express Edition or with the Professional Edition.
In the previous post, we were able to create a form and place it over the taskbar. Now let’s take a look on something interesting in the Windows Start Menu. Please take a look at the next image.

[ In the Windows 7 Start menu]
Windows 7 Start menu Search TextBox

There is a textbox use to help you find a program or a file in your computer. Personally, I never liked the windows search tools because it never gives me the file I wanted. Now this is our time to create our custom search textbox.

Unfortunately, we can’t just put a textbox. It is too simple. Text search box comes with a little button with a magnet inside it. That little button is part of the design of the window Start Button and even if you don’t think is useful; we still have to put it.

Otherwise, the Start Menu will not look like the windows Start Menu, right?
There are 2 ways we could do it and I will show you: the usercontrol and inherits function. There are no controls like that in Visual Basic Express 2010 or Visual Studio 2010. You have to build the control.

For those of you who are too lazy to do a usercontrol or a new textbox type is OK. Just skip the reading. Make a simple textbox with a button next to it (or over it). It will work but it won’t give the same feeling.

Create a UserControl in Visual Basic

To create a usercontrol from Visual Basic Express 2010 or Visual Studio 2010, you need to right click on the project name -> Add… -> New item…

add a UserControl in Visual Basic

From the Add New Item window, make sure to select User Control and press Add to create a basic usercontrol. I decided to use the default name UserControl1.

add a UserControl in Visual Basic

After you pressed Add, you should see your program like this:


Inside your design view, keep in mind that it work the same way than a regular form design view. Drag and drop all the control you like. In my example, I will drag and drop a TextBox1 and a Button1. I will also resize my UserControl1 to make it small and change the color of the background.

Use the tool in Visual basic Express or Visual Studio to help you center the controls in your form. Under the menu strip: Format -> Center Form -> Horizontally or Vertically

Visual Basic center in form

Insert a UserControl in your form

You absolutely need to build or generate your project or solution to be able to insert your usercontrol in your form, otherwise, you will never be able to drag and drop it form your Visual Basic Form designer.

Visual Studio Build Solution

Finally, drag and drop your UserControl1 from your Visual Basic Express 2010 toolbox to your form. You could now use it like any other controls.

Initialize your button1 from your UserControl:

    Private Sub Form1_Load(sender As System.Object, e As System.EventArgsHandles MyBase.Load


        'attention, is not UserControl1 but UserControl11
        With UserControl11
            .Button1.Text = "Search"
            .TextBox1.Font = _
                New System.Drawing.Font("Microsoft Sans Serif", _
                                                     8.25!, _
                               System.Drawing.FontStyle.Italic, _
                                     System.Drawing.GraphicsUnit.Point, _
                                                     CType(0, Byte))
            .TextBox1.ForeColor = System.Drawing.SystemColors.GrayText
            .TextBox1.Text = "Search programs and Files"
        End With

    End Sub

Finally, if you run the program, your form with the usercontrol will look like this:

Windows 8 Search Box with UserControl

No comments:

Post a Comment