Graphical Applications Fundamentals
Fundamentals of Control Addition
The Client Area
On a form, the client area is the body of the form without the title bar, its borders and other sections we have not mentioned yet such as the menu, scroll bars, etc:
Besides the form, every control also has a client area. The role of the client area is to specify the bounding section where the control can be accessed by other controls positioned on it. Based on this, a control can be visible only within the client area of its parent. Not all controls can be parent.
Application programming primarily consists of adding objects to your project. Some of these objects are what the users of your application use to interact with the computer. As the application developer, one of your jobs will consist of selecting the necessary objects, adding them to your application, and then configuring their behavior. There are various ways you can get a control into your application. If you are using Notepad or a text editor to add the objects, you can write code. If you are using Microsoft Visual Basic, you can visually select an object and add it.
To create your applications, there are two settings you will be using. If a control is displaying on the screen and you are designing it, this is referred to as design time. This means that you have the ability to manipulate the control. You can visually set the controlís appearance, its location, its size, and other necessary or available characteristics. The design view is usually the most used and the easiest because you can glance at a control, have a realistic display of it and configure its properties. The visual design is the technique that allows you to visually add a control and manipulate its display. This is the most common, the most regularly used, and the easiest technique.
The other technique you will be using to control a window is with code, writing the program. This is done by typing commands or instructions using the keyboard. This is considered, or referred to, as run time. This is the only way you can control an objectís behavior while the user is interacting with the computer and your program.
A Windows control is a graphical object that allows the user to interact with the computer. The controls are as varied as the needs and goals are. Because there are so many controls for various purposes, their insertion to an application and their configuration are left to the computer programmer. The Toolbox is the accessory that provides most of the controls used in an application:
By default, the Toolbox is positioned on the left side of the IDE. To change that position, you can drag its title bar away and dock it to another side of the IDE. The Toolbox also uses a default width to show the items on it. If the width is too narrow or too wide, you can change it. To do this, position the mouse to its right border and drag left or right.
When Microsoft Visual Studio is set up, it installs in the Toolbox the most regularly used controls. If you are working in an environment that creates only a particular group of applications and there are controls you hardly use, if you want, you can remove them from the list. To remove a control, right-click it and click Delete.
Besides the objects in the Common Controls section, other controls are left out but are still available. Some of the left out controls were created with the .NET Framework but are not installed by default because they are judged hardly used. To add one or more of these left out controls, right-click anywhere in the Toolbox and click Choose Items... In the Choose Toolbox Items dialog box, click the .NET Framework Components tab, then click the check box of the desired control before clicking OK:
In addition to custom .NET controls, some other objects called ActiveX controls were used in previous versions of Visual Basic or Visual Studio and are available. To take care of compatibility issues, most previous ActiveX controls were reconfigured and adapted to be used in a .NET application. To add some of these left out controls, right-click anywhere in the Toolbox and click Choose Items... In the Choose Toolbox Items dialog box, click the COM Components tab, select the desired control before clicking OK
When you start a Windows Application, it provides various controls on the Toolbox so you can choose which ones are appropriate for your particular application. Controls can be set by categories based on their function or role. A container is a control whose main purpose is to host other controls. To design it, you pick up objects from the Toolbox and drop them where desired. The Toolbox organizes its items in categories and each category is represented by a button:
If the available list of categories is not enough, you can add a new section of your choice. By default, Visual Studio hides some categories because they are judged hardly used. To display these additional sections, you can right-click anywhere in the Toolbox and click Show All:
If you still want an additional tab not included in the list, you can add one (or more). To do that, right-click anywhere in the Toolbox and click Add Tab. You would be prompted to provide a name. After typing the new name, press Enter.
To use an object of a particular category, you can first click its button. After selecting a category, it displays its items. In each category, a particular button called Pointer is selected by default. This simply indicates that no item in the group is currently selected.
By default, the items in each category are organized as horizontal wide buttons:
Alternatively, you can list the items of a category as buttons of a list view. To do that, you can right-click anywhere in the category and click List View to remove its check box:
When Microsoft Visual Studio is installed, it adds the buttons in a somewhat random order. In the beginning, this can make it difficult to find a particular control when you need it. If you find it more convenient, you can arrange the list of controls in any order of your choice. You have two main options. To change the position of an item in the list, right-click it and click either Move Up or Move Down. Alternatively, you can arrange the items in alphabetic order. To do that, right-click anywhere in the Windows Forms section and click Sort Items Alphabetically:
Once you have rearranged items alphabetically, the Toolbox forgets the previous arrangement and you cannot restore it. Alternatively, you can right-click the button of a control and click either Move Up or Move Down.
To add a control to your application, you can select it from the Toolbox and click the desired area on the form. Once added, the control is positioned where your mouse landed. In the same way, you can add other controls as you judge them necessary for your application. Here is an example of a few controls added to a form:
Alternatively, to add a control, you can also double-click it from the Toolbox and it would be added to the top-left section of the form.
If you want to add a certain control many times, before selecting it on the Toolbox, press and hold Ctrl. Then click it in the Toolbox. This permanently selects the control. Every time you click the form, the control would be added. Once you have added the desired number of this control, on the Toolbox, click the Pointer button to dismiss the control.
We mentioned earlier how you could add a control many times. An alternative is to copy a control. To do this, on the form:
You can use these two techniques to copy a group of controls.
When designing an application, you will manipulate the windows controls on a form. After adding a control to a form, before performing any operation on that control, you must first select it. You can also manipulate many controls at the same time. To do that, you will have to select all those controls.
To select one control on the form, you can simply click it. A control that is selected indicates this by displaying 8 small squares, also called handles, around it. Between these handles, the control is surrounded by dotted rectangles. In the following picture, the selected rectangle displays 8 small squares around its shape:
After selecting a control, you can manipulate it or change its characteristics, also called properties.
To select more than one control on the form, click the first. Press and hold either Shift or Ctrl. Then click each of the desired controls on the form. If you click a control that should not be selected, click it again. After selecting the group of controls, release either Shift or Ctrl that you were holding.
When a group of controls is selected, the last selected control displays 8 square handles around but its handles are white while the others are black. Another technique you can use to select various controls consists of clicking on an unoccupied area on the form, holding the mouse down, drawing a fake rectangle, and releasing the mouse:
Every control touched by the fake rectangle or included in it would be selected:
If there is a control on your form but you don't need it, you can remove it from the application. To delete a control, first select it and then click or press Delete. You can also right-click a control and click Cut. To remove a group of controls, first select them, then click or press Delete or right-click the selection and click Cut.
When adding a control to a form, it assumes a position based on where the mouse landed when you clicked the form. Most of the time, that position will not be convenient. Moving a control consists of specifying its position by changing its previous left and top values. You can do this either graphically or programmatically.
To move a control graphically:
You can also move various controls at the same time. To do this, first select the controls:
After adding a control to a form, you can move the control to change its position, as we will learn in the next few sections. In the next lesson, we will learn how you can change the size of a control. The availability of these two operations is controlled by a Boolean property named Locked. The default value of this property is False. Therefore, to prevent the control from being moved or resized, access its Properties window and set the Locked property to True.
Microsoft Visual Studio 2005 provides various tools to assist you with aligning your controls on a form. You can first add a control to a form and position the control the way you want. Here is an example:
Once you have a control on your form, you can add another control as we saw in the previous lesson. To position the other control, you can use the previous one as a reference. To assist you with this, when moving the new control to position it, a guiding vertical line would show you the alignment to follow with regards to an existing control. Here is an example:
Using this approach, once the control is aligned fine, you can release the mouse. As another technique, after positioning one or a few controls, to align a control with reference to another, press and hold Ctrl. Then press the left, the up, the right, or the down arrow key. When you press one of these keys, the control would move to align itself with the next control in that direction. Once the alignment is to your liking, release Ctrl.
There are various other techniques you can use to align the controls. We will review them.
If you have a certain control on the form and want to position it exactly at equal distance between the left and the right borders of the form, select the control, then click the Center Horizontally button on the Layout toolbar :
Horizontal alignment affects controls whose distance from the left border of the parent must be the same. To perform this type of alignment, the Layout toolbar provides the necessary buttons. The same actions can be performed using menu items of the Format group on the main menu. The options are as follows:
As seen above, the horizontal-oriented buttons allow moving controls left or right. Another option you have consists of moving controls up or down for better alignment. Once again you must first select the controls. Then on the Layout toolbar or the Format group of the main menu, use the following options:
Another valuable option you have consists of controlling the alignment of objects with regards to the extreme borders of controls of the selected group.
You can also position one or more controls in the middle of the form. To do that, select the control, then click the Center Vertically button on the Layout toolbar :
Suppose you have a group of horizontally aligned controls as follows:
Obviously the buttons on this form are not enjoying the most professional alignment. For one thing, the distance between the Continue and the Submit buttons is longer than the distance between the Submit and the Deny buttons. The Layout toolbar and the Format group of the main menu allow you to specify a better horizontal alignment of controls with regards to each other. The options available are:
Result: The Forms Designer will calculate the horizontal distances that separate each combination of two controls and find their average. This average is applied to the horizontal distance of each combination of two controls:
Result: The Forms Designer will move each control horizontally, except the base control (the control that has white squares) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:
Result: The Forms Designer will move each control horizontally, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:
Result: The Forms Designer will move all controls (horizontally), except for the left control, to the left so that the left border of a control touches the right border of the next control:
Suppose you have a group of horizontally positioned controls as follows:
The buttons on this form are not professionally aligned with regards to each other. Once again, the Layout toolbar and the Format group of the main menu allow you to specify a better vertical alignment of controls relative to each other. The options available are:
Result: The Forms Designer will calculate the total vertical distances that separate each combination of two controls and find their average. This average is applied to the vertical distance of each combination of two controls:
Result: The Forms Designer will move each control vertically, except the base control (the control that has darker handles) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:
Result: The Forms Designer will move each control, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:
Result: The Forms Designer will move all controls vertically, except for the top control, to the top so that the top border of a control touches the bottom border of the next control towards the top:
To further assist you with application design, the .NET Framework provides the flow layout panel that you can use instead of manually positioning your controls horizontally or vertically. When used horizontally, the flow layout panel takes care of aligning controls so that all of them would have the same distance from the top border of their container. Of course, this has to do only with the controls that belong to the same group (the same container).
The flow layout panel is represented in the .NET Framework by the FlowLayoutPanel class and in the Toolbox by the FlowLayoutPanel object. Therefore, to use it, click it from the Toolbox and add it to your form. The flow layout panel appears as a dotted rectangular object:
After placing it on a form, you can add controls to it. To do this, you would click a control from the Toolbox and click inside the flow layout panel. When you add the first control, it gets positioned in the top left side of the container and you cannot move it to a different position (if this were done it would deceive the purpose of the flow layout panel):
When you add a second control to the flow layout panel, it is positioned on the right side of the previously added control with the same horizontal alignment. You can continue adding other controls. If you want the controls to be aligned vertically, resize the flow layout panel accordingly:
Instead of aligning controls horizontally, you may want to position them vertically. To do this, you can narrow the flow layout panel but heighten it:
In the same way, if the flow layout panel is narrow and the controls are positioned vertically, if you enlarge it, its control would be positioned horizontally. As you can see, the flow layout panel provides a convenient way of aligning controls.
We mentioned that when you add the first control to a flow layout panel, the control is positioned in the top-left section of the container and the subsequently added controls would be positioned on the right side of, or below, the previous control. This is the default behavior and it is referred to as left-to-right. You can change this aspect. Depending on your design intentions, you may want the controls to be positioned from right to left. This characteristic is controlled by the FlowDirection property, which is an enumeration. The default value of this property is LeftToRight. If you set it to RightToLeft, the first control would be added to the top-right section of the container, the other controls would be incrementally positioned to the left of the previous one(s).
As mentioned above, after adding a flow layout panel to a form, if you add a control to it, the control is positioned in the top-left section. If you add a second control, it is positioned on the right side of the previous control. This would be the same with the other subsequent controls. If you add a control but there is no room on the right side, the control would be positioned on the next row. If you resize the flow layout panel, the controls would be aligned vertically. This is the default behavior and it is referred to as wrapping. This means that the flow layout panel has the ability to wrap the controls inside its client area. This characteristics is partly controlled by a Boolean property named WrappingContents. Its default value is set to True. This property is controlled in connection with the FlowDirection.
During your application design, if you have a group of controls that you want to align either horizontally or vertically, you can use the flow layout panel. You can use different rows and columns of flow layout panels to align the controls. If you do this, you would then have to align the flow layout panels also to make sure their controls are aligned. In reality, the flow layout panel is a valuable accessory for control design but it may not effectively align different types of controls. To assist with another type of problem, you can use the table layout panel.
The table layout panel is represented in the .NET Framework by the TableLayoutPanel class and in the Toolbox by the TableLayoutPanel control. To use it at design time, from the Toolbox, click the TableLayoutPanel button and click the form. When it has been added, it presents a dotted table made of four cells:
To use the table layout panel as a design object, you can click a control from the Toolbox and click a cell in the table. The control would be added to that cell. To add another control to the application, you can click it from the Toolbox and click another cell:
You cannot add a control to a cell if that cell contains a control already. If you want to add more controls than the cells in the table layout panel, you can add new cells. To do this, first select the table layout panel from the form:
Besides the ability to align the controls, the table layout panel provides various aesthetic characteristics, such as the background color of the table, various styles for the dividing lines of the cells, etc.
All graphical controls, including the form, can be resized using guiding mouse cursors or the keyboard. To resize a control, first select it. Except for the form, whenever a control is selected, there are eight handles around it. To resize the control, position your mouse on one of the handles. The mouse pointer will change, indicating in what direction you can move to resize the control.
To narrow a control:
To heighten a control:
To shrink a control:
Imagine you have added three controls to your form and, after spending some time designing them, they appear as follows:
The dimensions of the controls are not set professionally. As seen above, you can resize by dragging their borders but this might take a while if you want them to have the same width, the same height, or both the same height and width. The dimensions of a control or a group of controls are carried by a Size value.
At design time, to change the dimensions of a control, first click it. Then, in the Properties window, change the values of its Size property.
To change the dimensions of a group of controls, first select them. Then, in the Properties window, change the values of the Size field. The new value would be applied to all selected controls. Alternatively, the Form Designer provides tools to automatically do this for you.
To synchronize the widths of a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:
Result: All controls, except for the base control (the control that has the dark handles), will be resized horizontally so they have the same width as the base control:
To set the same height to a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:
Result: All controls, except for the base control (the control that has the dark handles), will be resized vertically so they have the same height as the base control:
To set the same width and the same height to a group of controls, first select them. Then, on the Layout toolbar or on the Format group of the main menu, select:
Result: The Form Designer will calculate the sum of the heights of all controls and find their average height (AvgHeight). It will also calculate the sum of the widths of all controls and find their average width (AvgWidth). These averages will be applied to the height and the width respectively of each control:
|Previous||Copyright © 2008-2009, yevol.com||Next|