14.6 GroupBoxes and Panels

GroupBoxes and Panels arrange controls on a GUI. GroupBoxes and Panels are typically used to group several controls of similar functionality or several controls that are related in a GUI. All of the controls in a GroupBox or Panel move together when the GroupBox or Panel is moved. Furthermore, a GroupBoxes and Panels also can be used to show or hide a set of controls at once. When you modify a container’s Visible property, it toggles the visibility of all the controls within it.

The primary difference between these two controls is that GroupBoxes can display a caption (i.e., text) and do not include scrollbars, whereas Panels can include scrollbars and do not include a caption. GroupBoxes have thin borders by default; Panels can be set so that they also have borders by changing their BorderStyle property. Figures 14.21–14.22 list the common properties of GroupBoxes and Panels, respectively.

Look-and-Feel Observation 14.2

Panels and GroupBoxes can contain other Panels and GroupBoxes for more complex layouts.

Fig. 14.21 GroupBox properties.

GroupBox properties Description
Controls The set of controls that the GroupBox contains.
Text Specifies the caption text displayed at the top of the GroupBox.

Fig. 14.22 Panel properties.

Panel properties Description
AutoScroll Indicates whether scrollbars appear when the Panel is too small to display all of its controls. The default value is false.
BorderStyle Sets the border of the Panel. The default value is None; other options are Fixed3D and FixedSingle.
Controls The set of controls that the Panel contains.

Look-and-Feel Observation 14.3

You can organize a GUI by anchoring and docking controls inside a GroupBox or Panel. The GroupBox or Panel then can be anchored or docked inside a Form. This divides controls into functional “groups” that can be arranged easily.

To create a GroupBox, drag its icon from the Toolbox onto a Form. Then, drag new controls from the Toolbox into the GroupBox. These controls are added to the GroupBox’s Controls property and become part of the GroupBox. The GroupBox’s Text property specifies the caption at the top of the GroupBox.

To create a Panel, drag its icon from the Toolbox onto the Form. You can then add controls directly to the Panel by dragging them from the Toolbox onto the Panel. To enable the scrollbars, set the Panel’s AutoScroll property to true. If the Panel is resized and cannot display all of its controls, scrollbars appear (Fig. 14.23). The scrollbars can be used to view all the controls in the Panel—at design time and at execution time. In Fig. 14.23, we set the Panel’s BorderStyle property to FixedSingle so that you can see the Panel in the Form.

Fig. 14.23 Creating a Panel with scrollbars.

The program in Fig. 14.24 uses a GroupBox and a Panel to arrange Buttons. When these Buttons are clicked, their event handlers change the text on a Label.

Fig. 14.24 Using GroupBoxes and Panels to arrange Buttons.

Alternate View 

  1    // Fig. 14.24: GroupBoxPanelExampleForm.cs
  2    // Using GroupBoxes and Panels to arrange Buttons.
  3    using System;
  4    using System.Windows.Forms;
  5
  6    namespace GroupBoxPanelExample
  7    {
  8       // Form that displays a GroupBox and a Panel
  9       public partial class GroupBoxPanelExampleForm : Form
 10       {
 11           // default constructor
 12           public GroupBoxPanelExampleForm()
 13           {
 14              InitializeComponent();
 15           }
 16
 17           // event handler for Hi Button
 18           private void hiButton_Click(object sender, EventArgs e)
 19           {
 20              messageLabel.Text = "Hi pressed"; // change text in Label
 21           }
 22
 23           // event handler for Bye Button
 24           private void byeButton_Click(object sender, EventArgs e)
 25           {
 26              messageLabel.Text = "Bye pressed"; // change text in Label
 27           }
 28
 29           // event handler for Far Left Button
 30           private void leftButton_Click(object sender, EventArgs e)
 31           {
 32              messageLabel.Text = "Far Left pressed"; // change text in Label
 33           }
 34
 35           // event handler for Far Right Button
 36           private void rightButton_Click(object sender, EventArgs e)
 37           {
 38              messageLabel.Text = "Far Right pressed"; // change text in Label
 39           }
 40       }
 41    }

The mainGroupBox has two Buttons—hiButton (which displays the text Hi) and bye-Button (which displays the text Bye). The Panel (named mainPanel) also has two Buttons, leftButton (which displays the text Far Left) and rightButton (which displays the text Far Right). The mainPanel has its AutoScroll property set to true, allowing scrollbars to appear when the contents of the Panel require more space than the Panel’s visible area. The Label (named messageLabel) is initially blank. To add controls to mainGroupBox or main-Panel, Visual Studio calls method Add of each container’s Controls property. This code is placed in the partial class located in the file GroupBoxPanelExampleForm.Designer.cs.

The event handlers for the four Buttons are located in lines 18–39. Lines 20, 26, 32 and 38 change the text of messageLabel to indicate which Button the user pressed.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset