Introduction to Controls Containers
Overview of Parent Controls
An application's object is programmatically referred to as a parent when it can host, hold, or carry other objects. For this reason, such a window is also referred to as a container. Although the first object that comes in mind is the form, this is not the only window that can act as parent. This means that, in your application programming adventure, you will get acquainted with various types of containers and they are meant to play different roles. In some cases, two or more containers can be used to implement the same functionality. In some other cases, your choice will be narrowed based on your goal.
The most common and the most widely used container is the form. In an application, a form can be configured to display like a regular dialog box, to become a Single Document Interface (SDI) or to participate in a Multiple Document Interface (MDI) application.
As mentioned already, there are two categories of controls: parents and children:
A child window can be a parent of another control. For example, the Standard toolbar of Visual Studio 2005 is the parent of the buttons on it. If you close or hide the toolbar, its children disappear. At the same time, the toolbar is a child of the application's form. If you close the application, the toolbar disappears, along with its own children. In this example, the toolbar is a child of the form but is a parent to its buttons.
The type of container you want to use dictates how you acquire that container and add it to your application. Parent controls are somewhat divided in two broad categories: primary parents and intermediate parents. Once you have spent time with them, you will decide which one and when to use a particular control.
The primary type of control parenting you will use is a form. This is used as the platform for other controls, including other containers. Therefore, when you start your application, you first decide on the type of application. If you create a Windows Forms application, it gets automatically equipped with a form on which you can add child controls. When the application executes, it can present its contents to the user:
The second category of parents you will encounter qualify as intermediate. Theses containers cannot be the base of an application as does the form. These parents must be positioned on another parent first, then they can host their own children. An example of such a parent is the property page also called tab control. This control must be hosted by a form or dialog box. Here is an example of a property sheet (dialog box) that hosts three property pages (tab controls) and each property page hosts its own child controls:
Another type of intermediary container is the toolbar that is usually used to host various buttons.
A dialog box is a form defined with particular properties. Like a form, a dialog box is referred to as a container. Like a form, a dialog box is mostly used to host child controls, insuring the role of dialog between the user and the machine. Here is an example of a dialog box:
A dialog box has the following characteristics:
To create a dialog box, you start with a form, which you can get by creating a Windows Application or deriving a class from Form. Here is an example:
Imports System.Drawing Imports System.Windows.Forms Module Exercise Public Class Starter Inherits Form Dim components As System.ComponentModel.Container Public Sub New() InitializeComponent() End Sub Public Sub InitializeComponent() Text = "Domain Configuration" Width = 320 Height = 150 Location = New Point(140, 100) StartPosition = FormStartPosition.CenterScreen End Sub End Class Function Main() As Integer Dim frmStart As Starter = New Starter Application.Run(frmStart) Return 0 End Function End Module
This would produce:
There are a few actions you should perform on a form to transform it into a dialog box; but normally, these are only suggestions, not rules. Based on the Microsoft Windows design and standards, to create a dialog box, you should set a formís FormBorderStyle property to FixedDialog. Setting this property changes the borders of the form to the standard borders of a dialog box (the border of a dialog box is thinner than that of a regular form). You can set this characteristic in the Properties window or programmatically. Here is an example:
Public Sub InitializeComponent() Text = "Domain Configuration" Width = 320 Height = 150 Location = New Point(140, 100) StartPosition = FormStartPosition.CenterScreen FormBorderStyle = Windows.Forms.FormBorderStyle.FixedDialog End Sub
Besides taking care of the border, you should also set both the MinimizeBox and the MaximizeBox properties to False. This causes the window to display only the system Close button. You can set these characteristics in the Properties window or programmatically. Here is an example:
Public Sub InitializeComponent() Text = "Domain Configuration" Width = 320 Height = 150 Location = New Point(140, 100) StartPosition = FormStartPosition.CenterScreen FormBorderStyle = Windows.Forms.FormBorderStyle.FixedDialog MinimizeBox = False MaximizeBox = False End Sub
This would produce:
You should provide a way for the user to close the dialog box. A dialog box should have at least one button labeled OK. This button allows the user to acknowledge the message of the dialog box and close it by clicking the button. If the user press Enter, the dialog box should also be closed as if the OK button was clicked.
Often the user will be presented with various options on a dialog box and may be asked to make a decision on the available controls. Most of the time, if you are creating such a dialog box, besides the OK button, it should also have a Cancel button. The OK button should be the default so that if the user presses Enter, the dialog box would be closed as if the user had clicked OK. Clicking OK or pressing Enter would indicate that, if the user had made changes on the controls of the dialog box, those changes would be acknowledged and kept when the dialog box is closed and usually the changed values of the control would be transferred to another dialog box or form. Keep in mind that you are responsible for implementing this functionality.
To fulfill this functionality of the OK button, after adding it to a dialog box (or form), open the AcceptButton combo box in the Properties window for the form and select the name of the button.
The Cancel button is used to allow the user to dismiss whatever changes would have been made on the controls of the dialog box. The dialog box should also be configured so that if the user presses Esc, the dialog box would be closed as if the user had clicked Cancel.
To fulfill this functionality of the Cancel button, after adding it to a dialog box (or form), open the CancelButton combo box in the Properties window for the form and select the name of the button.
Besides the OK and the Cancel buttons, a dialog box can be created with additional buttons such as Finish or Help, etc. It depends on its role and the decision is made by the application developer.
Besides the system Close button, if you are planning to provide help on a dialog box, you can equip it with a Help button. To support this, the Form class is equipped with a Boolean property named HelpButton. The default value of this property is false. In the Properties window, you can set it to True. If you are programmatically creating the dialog box, you can access this property and set its value to true. Here is an example:
Public Sub InitializeComponent() Text = "Domain Configuration" Width = 320 Height = 150 Location = New Point(140, 100) StartPosition = FormStartPosition.CenterScreen FormBorderStyle = Windows.Forms.FormBorderStyle.FixedDialog MinimizeBox = False MaximizeBox = False HelpButton = True End Sub
This would produce:
When the user clicks the help button, the mouse cursor becomes equipped with a question mark. Here is an example:
You can then write code so that, when the user clicks a control on the dialog box, some guiding help is provided as a tool tip.
There are two types of dialog boxes: modal and modeless.
A Modal dialog box is one that the user must first close in order to have access to any other framed window or dialog box of the same application. One of the scenarios in which you use a dialog box is to create an application that is centered around one. In this case, if either there is no other form or dialog box in your application or all the other forms or dialog boxes depend on this central dialog box, it must be created as modal. Such an application is referred to as dialog-based.
Some applications require various dialog boxes to complete their functionality. When in case, you may need to call one dialog box from another and display it as modal. Here is an example:
After creating a dialog used as an addition to an existing form or an existing dialog box, to call it as modal, use the ShowDialog() method.
A dialog box is referred to as modeless if the user does not have to close it in order to continue using the application that owns the dialog box. A modeless dialog box has the following characteristics
Here is an example:
Since the modeless dialog box does not display its button on the task bar, the user should know that the dialog box is opened. To make the presence of a modeless dialog box obvious to the user, it typically displays on top of its host application until the user closes it.
A modeless dialog box is created from a form but it should look like a regular dialog box or a tool window. Therefore, to create a modeless dialog box, set the FormBorderStyle property to an appropriate value such as FixedSingle, FixedToolWindow, Sizable or SizableToolWindow. Also, set its ShowInTaskbar property to False.
After creating the dialog box, to display it as modeless, call the Show() method. The fundamental difference between the ShowDialog() and the Show() methods is that the former displays a modal dialog box, which makes sure that the called dialog box cannot go in the background of the main application. By contrast, the Show() method only calls the dialog box every time it is requested. For this reason, it is up to you to make sure that the modeless dialog box always remains on top of the application. This is easily taken care of by setting the Boolean TopMost property of the form to True.
There are two main ways a normal modeless dialog box can be dismissed:
When you create a Windows Forms Application, the starting form is made available to you. If one form is not enough for your application, you can add as many as necessary. To add (or to create) a (new) form, you have various options:
In the Add New Item dialog box and in the Templates section, click Window Form (.NET), provide a name in the Name edit box then click Open.
If your application is using various forms and you want to display a particular one at design time:
If you visually add two (or more) forms to your application, you may need to link them, allow one to call the other. To do this, in the top section of the file, type #include followed by the name of the header file in which the form was defined. In the section where you want to access the form, declare a handle to the class of the form and use the new operator to allocate memory for it. To display the other form, you can call its Show() method.
A group is a window that draws a bordered line all around. This makes it draw a limiting placeholder for other controls. To indicate what it is used for, a group box may display a title, also referred to as its caption. Here is an example of a group box on a form:
To support group box, the .NET Framework provides the GroupBox class. At design time, to add a group box to your application, from the Containers section of the Toolbox, click GroupBox and click the form (or another container). To programmatically create a group box, you can create a handle to GroupBox, allocate memory for it using the new operator, and add it to the Controls collection of its container. Here is an example:
Imports System.Drawing Imports System.Windows.Forms Module Exercise Public Class Starter Inherits Form Private GrpHolder As GroupBox Dim components As System.ComponentModel.Container Public Sub New() InitializeComponent() End Sub Public Sub InitializeComponent() GrpHolder = New GroupBox() GrpHolder.Left = 22 GrpHolder.Top = 18 GrpHolder.Width = 120 GrpHolder.Height = 58 Controls.Add(GrpHolder) End Sub End Class Function Main() As Integer Dim frmStart As Starter = New Starter Application.Run(frmStart) Return 0 End Function End Module
This would produce:
As you can see from the above picture, a group may or may not display a caption. If you need to display a caption on it, at design time, in the Properties window, click Text and type a string. To do this programmatically, assign a string to the Text property of the group box control. Here is an example:
Public Sub InitializeComponent() GrpHolder = New GroupBox() GrpHolder.Left = 22 GrpHolder.Top = 18 GrpHolder.Width = 120 GrpHolder.Height = 58 Controls.Add(GrpHolder) GrpHolder.Text = "Cup Holder" End Sub
This would produce:
Besides serving a delimiter of an area on a form, a group box can also serve as a container. That is, a group box can carry or hold other containers. As such, you can create a control and add it to its collection of controls. When you add a control to a group box, whether at design or run time, the location you specify is relative to the group box and not to the form. Because the group box will act as the parent, it is its client area that is considered for the location of its child(ren) control(s).
Here is an example of adding a control as a child of a group box:
Public Sub InitializeComponent() GrpHolder = New GroupBox() GrpHolder.Left = 22 GrpHolder.Top = 18 GrpHolder.Width = 120 GrpHolder.Height = 58 Controls.Add(GrpHolder) GrpHolder.Text = "Cup Holder" Dim btnDone As Button = New Button() btnDone.Left = 22 btnDone.Top = 24 GrpHolder.Controls.Add(btnDone) Controls.Add(GrpHolder) End Sub
This would produce:
Since a group box can serve as a control container, at design time (and at run time), you can add the desired controls to it. Here is an example:
Notice that it is possible to have a control whose size causes some of its section to be hidden. To accommodate the control(s) positioned in a group box, you can make the container resize itself so as to reveal the hidden part(s) of its controls. To support this, the GroupBox class is equipped with the Boolean AutoSize property. The default value of the GroupBox.AutoSize property is false. If you set it to true, the group box would resize itself and all of its controls should appear:
If you are done programming in Win32, you would know that the Microsoft Windows operating system classifies the group box as a static controls. One of characteristics of static controls is that they cannot receive focus. In other words, you cannot actually click a group box and it cannot indicate that it has received focus. At the same time, in the .NET Framework, the GroupBox class is equipped with the TabStop and the TabIndex properties, which suggests that, by pressing Tab while using a form that has a group box, the group box should receive focus at one time. Still, because the group box is a static control, it cannot receive focus. What actually happens is that, whenever a group box is supposed to receive, it transfers the focus to its first or only control.
As mentioned already, a group box can be equipped with a caption, which is created by assigning a string to its Text property. A mnemonic is a character (or a letter) that the user can use to access a group box. To create a mnemonic, precede one character (or one letter) of its caption with &. Here is an example:
Using the mnemonic, the user can press Alt and the underlined character to give focus to a control inside the group box.
The panel is a rectangular object that can provide various valuable services for application design. A panel allows you to design good-looking forms by adjusting colors and other properties. A panel can also be used as control delimiter for objects that behave as a group. An example would be a set of radio buttons.
As a member of the family of control containers, a panel can be used to hold or carry controls placed on it. When a panel moves, it does so with the controls placed on it. When a panel is visible, the controls placed on it can be visible too, unless they have their own visibility removed. When a panel is hidden, its child controls are hidden too, regardless of their own visibility status. This property also applies to the panel's availability.
Panels are not transparent. Therefore, their color can be changed to control their background display. A panel is a complete control with properties, methods, and events.
To add a panel to a container, you can click the Panel button from the Toolbox and click the desired location on the container. Unlike the form, during design, a panel must primarily be positioned on another container which would be a form or another panel.
To programmatically create a panel, declare a handle to Panel, allocate memory for it using the new operator, and add it to its parent. Here is an example:
Imports System.Drawing Imports System.Windows.Forms Module Exercise Public Class Starter Inherits Form Private pnlContainer As Panel Dim components As System.ComponentModel.Container Public Sub New() InitializeComponent() End Sub Public Sub InitializeComponent() Text = "Domain Configuration" Width = 320 Height = 210 Location = New Point(140, 100) StartPosition = FormStartPosition.CenterScreen pnlContainer = New Panel() pnlContainer.Location = Point(20, 20) pnlContainer.Size = New Size(100, 60) Controls.Add(pnlContainer) End Sub End Class Function Main() As Integer Dim frmStart As Starter = New Starter Application.Run(frmStart) Return 0 End Function End Module
By default, a panel object is drawn without borders. If you want to add borders to it, use the BorderStyle property. It provides three values that you can set in the Properties window: None, FixedSingle, and Fixed3D and their effects are as follows:
To programmatically specify the border style, assign the desired value to the Panel.BorderStyle property. Here is an example:
Public Sub InitializeComponent() Text = "Domain Configuration" Width = 320 Height = 210 Location = New Point(140, 100) StartPosition = FormStartPosition.CenterScreen pnlContainer = New Panel() pnlContainer.Location = New Point(20, 20) pnlContainer.Size = New Size(100, 60) pnlContainer.BorderStyle = BorderStyle.Fixed3D Controls.Add(pnlContainer) End Sub
A panel can be used as a button, in which case the user would click it to initiate an action.
A property that is highly used on panels (and forms) is the Color. If you change the BackColor property, the new color would cover the face of the panel.
A splitter is an object that divides a container in two vertical or two horizontal sections. It makes it possible for one section to be enlarged, narrowed, heightened, or shrunk while the other section is narrowed, enlarged, shrunk, or heightened. Based on this behavior, one section gets more room while the other gets smaller. You are probably familiar with this description if you have used Windows Explorer. In most cases, a splitter is made obvious by displaying a bar that divides the sections.
Before using a splitter, the user can position the mouse of its bar. The cursor would change into a horizontal or a vertical double-arrow, depending on the orientation of the splitter. Here is an example:
To use the splitter, the user can click its bar and drag it left, right, up, or down, depending on the orientation of the splitter and what the user is trying to accomplish. After getting the desired position, the user can release the mouse.
To support splitters, the .NET Framework provides the split container. It is represented in the library by the SplitContainer class and in the Toolbox by the SplitContainer object. To add a split container to your application, from the Containers section of the Toolbox, click the SplitContainer object and click a form of your application. Once you do this, an object called a split container fills the form, divides itself in two, and gets equipped with two objects named Panel1 and Panel2. In reality, a split container is an object made of two panels separated by a bar. In each panel, you can then add the controls as you see fit. A control added to one of the panels would become a child of that panel.
A split container itself resembles a panel control. As described above, after you have added it, it automatically set its Dock property to Fill. This means that, after adding a split container, you would have difficulties adding an object to the form but outside the split container. Therefore, if you intend to have objects that do not belong to the split container, you must perform some prerequisite actions. Typically, you would first add a panel (or another container) to a form. For example, to have a group of control in the top section of the form, you can first add a panel to it and set its Dock property to Top:
Then, when you add a split container, it can use only the remaining area of the form:
In the same way, before adding a split container, you should prepare the form for objects you want to place on the form but that would not belong to the split container.
Just you can have a split container made of two parts, you can have more than two resizable sections. To do this, after adding a split container, add another split container to one of the panels of an existing split container.
After adding a split container to a form, it may become difficult to select it from the form. To select, use the combo box above the Properties window. If you click an area of the split container, the corresponding panel becomes selected and you can change its characteristics using the Properties window but you can neither move nor delete a panel from the split container.
As mentioned already, a split container is made of two panels separated by a bar. Each panel is equipped with the necessary characteristics that facilitate its role as its own container, including the background color, the background image, the ability to show the scroll bars, etc.
As mentioned already, after adding a split container to a form, it sets its Dock property to Fill. This is the default behavior. If you do not want the container to fill the available area of the form, you can change the value of its Dock property.
Like a visual control, you can make a split container more appealing by painting its background with a picture. To support this, the SplitContainer class is equipped with a a property named BackgroundImage. This property expects a picture file or its location. The background image would appear on the splitter. When you set or change the background picture of the split container, it fires an BackgroundImageChanged event. This event is of type EventArgs.
Because each panel has the ability to show a picture and to hold their controls, their backgrounds take priority over the background of the split container.
In our description, we saw that a split container was made of a dividing bar. This bar appears with a 4 pixel width. If you want, you can make it larger than. This characteristic is controlled by the SplitterWidth property. Its default value is 4 pixel. To change the with, assign the desired integer value to the SplitContainer.SplitterWidth property.
By default, when you add a new split container to a form, it divides itself with vertical bar. This makes it possible to change the width of panels. Alternatively, if you want the control to be divided horitally, you must change the orientation of the bar. To support this, the SplitContainer class is equipped with a property named Orientation. Default value of the SplitContainer.Orientation property is Vertical. To divide the container horizontally, set this property to Horizontal.
As mentioned in our description, to use a splitter, the user can position the mouse on the bar and drag in the desired direction. This is allowed by default and is controlled by the IsSplitterFixed Boolean property whose default value is False. While the user is moving the splitter, the split container fires a SplitterMoving event. This is event is handled by the SplitterCancelEventArgs class. This class holds the x and y coordinates of the split container as well the x and y coordinates of the mouse. After the user has moved the splitter, the split container fires a SplitterMoved event. This is event is handled by the SplitterEventArgs class that gives the x and y coordinates of the splitter.
To prevent the user from dragging the bar, you can set the SplitContainer.IsSplitterFixed property to True. If you do this, when the user positions the mouse on the bar, the cursor would keep its pointing arrow shape.
If the IsSplitterFixed property is set to False, which is the default, the user can drag the bar to resize the panels. By default, when the user drags the bar, it moves by one pixel. You can make it move faster than that. This characteristic is controlled by the SplitterIncrement property whose default value is 1 (pixel). To make the bar move by more than one pixel, assign the desired value to the SplitterIncrement property.
After adding a split container and if the Dock property of the control is to a value other than None, when the user resizes the form, the border of the split container follows the movement of the mouse and the bar also moves by a certain rate to resize the opposite panel:
If you want, you can fix one panel so that, when the form is resized, that panel would keep its size by the bar not moving. To support this, the SplitContainer class is equipped with a property named FixedPanel. You can select one of the panels as the value of this property.
|Previous||Copyright © 2008-2009, yevol.com||Next|