User Control Components in VB.NET

Want a Toolbox component that does what YOU want it to do?

Updated for Framework 1.0
and
Visual Basic 2005 Express

Including Version 3
of the About Visual Basic Calculator

User Control is a cool technology! Just a few months after .NET 1.0 was released, About Visual Basic published an article showing how to create your own user controls in VB.NET. Here's a quote:

VB.NET makes programming user controls so easy that the everybody will soon be taking it for granted. "Isn't that the way it's always been?"

Easy? Yes! Obvious? No.

First, creating user controls has changed since VB.NET 2.0 and Visual Basic 2005 Express came out. Second, there are different procedures for creating these handy objects between those two products. But the good news is that even the free VB.NET, Visual Basic Express 2005, can create user controls without too much trouble.

To update the site, I've completely reworked the original user control article to add information about the changes in control creation VB.NET 2.0 and VBE 2005 and to add new code downloads.

In addition, the example application I've used for user controls, the About Visual Basic Calculator, has been completely reprogrammed too. (I learn better ways to do things as I write these articles.)

But before we get into all that, let's review just exactly what a user control is.

A user control is just like the Visual Basic supplied controls, such as TextBox or Button, but you can make your own control do whatever you like with your own code.

(You can also create web user controls -- they're not the same as a "Web custom controls" -- but this article only covers the creation of user controls for Windows.) Think of user controls as 'bundles' of standard controls with custom methods and properties. Whenever you have a group of controls that you're likely to use in more than one place, consider a user control.

In more detail, a user control is a VB.NET class. The class Inherits from the Framework UserControl class. The UserControl class gives your control the base functions it needs so it can be treated like the built-in controls. A user control also has a visual interface, much like a VB.NET form that you design in VB.NET.

To demonstrate a user control, we're going to create our own four function calculator control that you can drag and drop right onto a form in your project. If you have a financial application where it would be handy to have a custom calculator available, you can add your own code to this one and use it just like a Toolbox control in your projects. With your own calculator control, you could add keys that automatically input a company standard such as a required rate of return or add the corporate logo to the calculator.

See the illustration below to see what the About Visual Basic calculator looks like!

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

The first step in creating a user control is to program a standard Windows application that does what you need. Although there are some extra steps, it's still often easier to program your control first as a standard Windows application than as a user control since you can debug more easily.

Once you have your application working, you can copy the code to a user control class and build the user control as a DLL file. These basic steps are the same in all versions since the underlying technology is the same, but the exact procedure is a little different between VB.NET versions. Let's see how to do it in all versions.

You will have a small problem if you have the VB.NET 1.X Standard Edition. User controls have to be created as DLL's to be used in other projects and this version won't create DLL libraries "out of the box". It's a lot more trouble, but you can use techniques described in this article to learn how to get around this problem.

With the more advanced versions:

  • Create a new Windows Control Library. The illustration below shows the VB.NET 1.X dialog.

    --------
    Click Here to display the illustration
    Click the Back button on your browser to return
    --------

    • From the VB main menu, click Project, then Add User Control. This gives you a form design environment almost identical to the one you use for building standard Windows applications.

    --------
    Click Here to display the illustration
    Click the Back button on your browser to return
    --------

    • Add the components and code for your control and customize the properties you need. You can copy and paste from your debugged standard Windows app. In fact, the code for the CalcPad control (more on this in a few pages) was copied with no changes.
    • Build your solution to get the DLL file for your control. Remember to change the Configuration to Release before the Build for production use.
    • To move the control to the Toolbox, right-click on the Toolbox and select Add/Remove Items ...
    • Using the .NET Framework Components tab, Browse to the DLL for your component (probably in the bin folder of the Windows Control Library solution). Click Open when the DLL file is selected to move the control to the Toolbox, then click OK. The illustration below shows CalcPad in the VB.NET 1.1 Toolbox.

      --------
      Click Here to display the illustration
      Click the Back button on your browser to return
      --------

      To check out your work, you can close the Windows Control Library solution and open a standard Windows Application solution. Drag and Drop your new CalcPad control and Run the project. The illustration shows that it behaves just like the Windows calculator, but it's a control in your project.

      --------
      Click Here to display the illustration
      Click the Back button on your browser to return
      --------

      This isn't everything you need to do to move the control into production for other people, but that's another subject! The 1.1 version of CalcPad (and the other versions too) can be downloaded at the end of the article.

      The procedure for building a user control in VB.NET 2005 is almost identical to 1.X. The biggest difference is that instead of right-clicking on the Toolbox and selecting Add/Remove Items, the control is added by selecting Choose Toolbox Items from the Tools menu. The rest of the process is the same. Here's the same component (actually, converted directly from VB.NET 1.1 using the Visual Studio conversion wizard) running in a form in VB.NET 2005.

      --------
      Click Here to display the illustration
      Click the Back button on your browser to return
      --------

      Again, moving this control into production can be an involved process. Usually, that means installing it in the GAC, or Global Assembly Cache. You can read about the GAC in the About Visual Basic article, GACUTIL - Sharing your work in the Global Assembly Cache - A Framework Tool.

      CalcPad in VB.NET 2005 Express Edition (VBE)

      The code, properties, and design of a user control in VBE is the same again. But there's a twist that you have to know to create one.

      Here's the twist. In VBE, create a Class Library project first and then add a User Control. You can then delete the initial class that was added automatically (usually named Class1.vb) and put all of your code and components into the user control class.

      I won't show the same example in VBE because it looks (and behaves) exactly the same. In fact, I added the VB.NET 2005 DLL to my VBE Toolbox and it works great.

      So the free software, VBE, that you can get from Microsoft really does work well!

      Next, we consider version 3!!! of CalcPad.

      When I started writing this article, I decided that my CalcPad example was still just a bit lame. So I completely revised it again for this article. If you saw it before, you'll hardly recognize it as the same program.

      The problem with writing a calculator program is making sure that the right thing happens when the keys are pressed. What happens, for example, if the equal key is pressed several times in succession?

      How do you program a chain calculation? (2 times 3 times 4) What if an operation key (multiply or add, for example) is pressed more than once?

      Version 1 used a lot of internal flags to try to control the processing. I should have known better! It never did work right (Thanks to all the readers who let me know about that!) and it was waaaay complicated.

      Version 2 was my first 'bright idea'. Instead of using flags, I used a VB.NET Queue object to maintain control over the operators and the numbers. Then the program can simply (?) Enqueue or Dequeue operators and numbers. It worked a lot better and the logic was much more straightforward ... and shorter. (Always a good sign that you're on the right track.) For the curious, here's a link to the source code for my second version.

      But when I started writing this article, I ran into a few more cases where it just didn't do exactly the right thing in testing.

      So as I worked on finding and fixing the bugs, I made the decision to try 'bright idea' number two: program it as a sort of "Finite State Machine". I realized that the calculator was always in one of four "states" and that the program could be based around that.

      Before ...

      1. the first number is entered
      1. the operation key is pressed
      2. the second number is entered
      3. the equal key is pressed

      I introduced a new variable (named, naturally, State) and based the entire rest of the program on the value of that variable (it's zero based in the program code).

      As nearly as I can tell (In all of a half hour's testing. You wouldn't believe how long it takes to create one of these articles and I have a deadline!) my program behaves exactly like the Windows calculator this time. If you find that it doesn't, let me know. The source for the actual calculator is the same in all of the downloadable examples.

      And speaking of downloadable examples, to download a VB.NET 1.X and VB.NET 2005 CalcPad control project, Click Here!