How to Build User Interface Design With Visual Studio Toolbox

Learn how create a Graphical User Interface with Visual Studio Toolbox.

If you click on the design button at the bottom of the window, you can view the webpage in the designer. Visual Studio 2005 provides the familiar drag and drop concept for building user interfaces. You can use the toolbox on the left hand side to drag components or controls from the toolbox on to your webpage. Now, I am just going to click on the pen symbol here to pen on the toolbox on to my environment desktop so that it does not disappear in a flash. If I close some of the items here, you can see there are various different types of control available to us. We are going to have to look at this in more detail in the next lesson. So, let me just close those back up again. For now, we will use some of the standard controls here. So for example, labels, textboxes, hand buttons. Let us drag some controls on to the webpage, start for the label and drag it on to the webpage. I will put it just there then we will add a textbox and I will put it just there then we will add a button. So, let us just put that there and finally, let us go and move a label and I am going to put that there. If you are familiar with creating Windows Applications, you might expect to be able to drag and drop the user interface components anywhere you like on the page. But, you cannot do this with asp.net by default. So for example, if I try to move the button to lower in the page account, it does not let me do it. It organizes the controls in a flow layout from left to right and from top to bottom. The reason for this is to avoid browser incompatibilities when it comes to absolute positioning for controls. The standard work around if you do want to control the user interface layout is to put your controls into html tables and this is what we are going to do later on. For now, we will leave it as it is. I will just set some of the properties for our controls. When you select the control, you can use the Properties Window to set properties on that control. So, let us select the label. To view the properties for control, you right click the control and select properties and the Properties Window appears in the bottom left hand corner. You can view the properties alphabetically or by category. In my display currently, they are displayed alphabetically. If I want to view them by category, I can click on this icon here and it will then display the properties according to that category. So, choose whichever you prefer. Personally speaking, I prefer to view and pop this alphabetically because I can never remember which category to go in so I will just click on the alphabetical viewer. The first property we need to set is the ID property. This is the programmatic variable name for the ID control. So, let us set the ID to a meaningful name such as FullNameLabel. I am also going to set the text property so let me scroll down a little bit lower. The text property is what the label actually displays on the screen. So let us change that to Full Name and a colon at the end and I will press Enter. And, as you can see in the designer, it has changed the label to Full Name. Now, let us set some properties on the textbox. So, let us select the textbox. Come back down to the properties window down here. The only property I am going to set for the textbox is the ID and I am going to set it to FullName TextBox. There we go. Next stop, let us change the properties for the button, so we will set the ID for the button to be Submit Button, press Enter and let us also set the text property button to “Click Me!” and as you can see, that is what gets displayed in the button. Finally, we have this slash label here. This label is going to display information, dynamically generate it by the website. So, let us the name of the ID to be Result label and what we will also do is change some of the graphical user interface aspects of a label. Let us give it a different color and different font. So, we will set the background color, the back color property. You can choose from one of the colors in the palette or if you prefer, you can click on the web tab and we will go for a background color of