user interface, Toolbox, Common Controls, Properties, Pictures,and Containers

Comments | Share

I am refreshing myself how to prgramming in VB again :-)

The user interface is a very important part of any program: This is how people use your program it needs to look good and do its job well.

Most important for beginner is how to use the Toolbox and how to make controls like buttons and checkboxes fit on the form better.

Toolbox is where you will find all of things to add to your user interface like buttons and labels. If you don't see it (it's usually on the left) you can make it appear by clicking the View | Toolbox menu command. The Toolbox shows all of the different controls that you can use divided into different groups like Common Controls and Containers. You can collapse or expand groups by using the plus/minus icons to the left of the group names. Scroll through the list to see the different groups and the controls that are in each group.

One helpful feature is that you can hold your mouse pointer over a control and it will pop up a help message that talks about it a bit. Here you can see that a ComboBox "displays an editable text box with a drop-down list of permitted values." Try this with some controls that don't sound familiar. There are some controls that you might never use, but explore what's there and you might find something new that makes things easier for you.

If you play around with different controls, you may notice that some of them don't appear on the form like buttons and checkboxes do. Items in the Data or Components section are a special kind of control called a component. Don't worry about the difference at this point though. Just know that components don't show up on a form the same way.

When you are working with the Form Designer (the editor window where you can drag controls to your form) it's helpful to have the Toolbox always ready on the side, but when you are working with code it might be handy to make it hide. You can do this by clicking the "pushpin" in the title bar. When it's pointing down, the Toolbox just stays there.

If you click the pushpin, it will change to point to the left. This is called Auto Hide mode. In this mode, the Toolbox disappears after you use it. It doesn't really disappear though. It just shrinks down to the side and becomes a small tab.

If you click on the tab it will appear again until you use it. This makes it easy to use it when you need it, but it keeps it out of the way the rest of the time. If you look at the Solution Explorer, the Properties pane, or other parts of Visual Studio Express, you'll see more pushpins. They all work the same way.

Now that you're an expert with the Toolbox, it's time to start dragging controls to the Form Designer. When you click and drag a control onto the form you'll see lines appear on the edges. These are called snaplines and they make it easy to line up your control with the edges of the form and with other controls. Professional designers always try to keep a certain amount of space around the edges of controls. You can guess at this space, or let snaplines help make it easier.

Here you can see that one Button control is already on the form. If you try to add another it makes it easy to make sure that you have good spacing to the edges and that you are lined up with the first button. If you don't want to line things up, you don't have to, but you'll "feel" the snaplines "pulling" on the new control so if you are trying to line things up it's easy to do.

Another thing that you can do is center your controls exactly. Just like with the snaplines, you can just do it yourself, but if you click the center buttons, Visual Studio Express makes sure that it's exactly centered. These buttons are in the Layout toolbar and should show up automatically. Near the menus, look for the toolbar with these buttons:

The first two buttons shown here are for centering. The first one will center your control horizontally. In other words, if you have an OK button at the bottom of a form and you want it right in the middle (half-way between the left and right sides) select your button, then click the Center Horizontally button. The second button is called Center Vertically and will put the control in the middle of the top and bottom of the form. These are pretty simple things but can really help to make things look good.

Another way that you can make controls look good is to line them up. Remember that snaplines make it easy to line things up, but if you have several controls already on the form and you want them all to line up with each other snaplines won't help much anymore. In the same toolbar that you found the centering buttons, you will find buttons to line up your controls with each other. First, select the controls that you want to line up. If you are having trouble selecting more than one control at once, you can either drag-select them (hold down your left-button and draw a square around them) or hold down the control (CTRL) key as you click each one. Once the controls are selected, click the button to either line them up on the left, right, top, or bottom. The other buttons help to line them up in the middle, but those probably aren't as useful.

The last thing that's good to learn about is making your controls move around or resize themselves automatically when the form is resized. You do this by something called anchoring. Anchoring a control is like connecting a rubber band from its edge to an edge of the form. If you connect the bottom edge and the right edge of a control to the right edge and bottom edge of the form, it will always stay in the corner even if the form is resized. This looks very professional! You can also make a control get bigger or smaller when the form is resized. If you anchor opposite sides of the control (like the top and bottom or the left and right), then when the form is resized it will stretch the control in that direction. This can be really useful if you want a ListBox to show more items or a PictureBox to show more of a picture. To change anchoring, select a control, then look in the Properties pane for the Anchor property.

It looks a lot different from other properties, but it's easy to use. If you pretend that the controls that you selected is the gray box in the middle, and then pretend that the white boxes are the rubber bands. Just click the rubber band that you want to add and it changes color. You can resize the form right away to see if it worked the way you expected. If not, click Undo or just try again!

I will take some practice again and again; it had been two years since I left my Web Developer professional work. The more time I have stay away from it, I have forgotten how to developed program with Window/desktop, because it really little difference from Web development!  Hoped this will help me start from again.  Although, I am more for SQL Server Administrator with Reporting Services, SSIS; etc.

However, my hubby told me why I am trying again? I have always not healthy and too nervous on many jobs.