IT22-OOP (Object Oriented Programming)
College of Computer Studies
I. INTRODUCTION
N/A
II. OBJECTIVES
a) Explain the Basics of Groupbox and Tab
Module 12 Controls in C#
b) Provide examples of Groupbox and Tab
Controls applied in a Windows C#
Basic Controls and Application.
c) The student should be creating their own
Objects (Groupbox and Visual C# code that uses Groupbox and Tab
Controls after reading the module.
Tab Controls)
IV. LESSON PROPER
A. GROUP BOX
In Windows form, GroupBox is a container which contains multiple controls on it and the controls are
related to each other. Or in other words, GroupBox is a frame display around a group of controls with a
suitable optional title. Or a GroupBox is used to categorize the related controls in a group. The GroupBox
class is used to represent the windows group box and also provide different types of properties,
methods, and events. It is defined under System.Windows.Forms namespace. The main use of a group
box is to hold a logical group of RadioButton controls.
In C# you can create a GroupBox in the windows form by using two different ways:
1. Design-Time: It is the easiest way to create a GroupBox as shown in the following steps:
Step 1: Create a windows form as shown in the below image:
Visual Studio -> File -> New -> Project -> WindowsFormApp
Page 1 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
Step 2: Next, drag and drop the GroupBox from the toolbox on the form.
Page 2 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
Step 3: After drag and drop you will go to the properties of the GroupBox to modify GroupBox
according to your requirement.
Output:
Page 3 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
2. Run-Time: It is a little bit trickier than the above method. In this method, you can create a GroupBox
programmatically with the help of syntax provided by the GroupBox class. The following steps show how
to set the create GroupBox dynamically:
Step 1: Create a GroupBox using the GroupBox() constructor is provided by the GroupBox class.
// Creating a GroupBox
GroupBox box = new GroupBox();
Step 2: After creating GroupBox, set the property of the GroupBox provided by the GroupBox
class.
// Setting the location of the GroupBox
box.Location = new Point(179, 145);
// Setting the size of the GroupBox
box.Size = new Size(329, 94);
// Setting text the GroupBox
box.Text = "Select Gender";
// Setting the name of the GroupBox
box.Name = "MyGroupbox";
Step 3: And last add this GroupBox control to the form and also add other controls on the
GroupBox using the following statements:
// Adding groupbox in the form
this.Controls.Add(box);
and
Page 4 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
// Adding this control to the GroupBox
box.Controls.Add(b2);
Example:
using System;
using System.Drawing;
using System.Windows.Forms;
namespace GroupBoxDemo
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// Creating and setting
// properties of the GroupBox
GroupBox box = new GroupBox();
box.Location = new Point(179, 145);
box.Size = new Size(329, 94);
box.Text = "Select Gender";
box.Name = "MyGroupbox";
// Adding groupbox in the form
this.Controls.Add(box);
// Creating and setting
// properties of the CheckBox
CheckBox b1 = new CheckBox();
b1.Location = new Point(40, 42);
b1.Size = new Size(49, 20);
b1.Text = "Male";
// Adding this control
// to the GroupBox
box.Controls.Add(b1);
// Creating and setting
// properties of the CheckBox
CheckBox b2 = new CheckBox();
b2.Location = new Point(183, 39);
b2.Size = new Size(69, 20);
b2.Text = "Female";
// Adding this control
// to the GroupBox
box.Controls.Add(b2);
}
}
Page 5 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
Output:
Constructor
Constructo Description
r
GroupBox() This Constructors is used to initializes a new instance of the GroupBox class.
Properties
Property Description
AutoSize This property is used to get or set a value that indicates whether the control resizes
based on its contents.
AutoSizeMode This property indicates how the GroupBox behaves when its AutoSize property is
enabled.
BackColor This property is used to get or set the background color for the control.
BorderStyle This property indicates the border style for the control.
DisplayRectangle This property is used to get a rectangle that represents the dimensions of the
GroupBox.
Font This property is used to get or set the font of the text displayed by the control.
ForeColor This property is used to get or set the foreground color of the control.
Page 6 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
Height This property is used to get or set the height of the control.
Location This property is used to get or set the coordinates of the upper-left corner of the
GroupBox control relative to the upper-left corner of its form.
Name This property is used to get or set the name of the control.
TabStop This property is used to get or set a value that shows whether the user can press the
TAB key to provide the focus to the GroupBox.
Size This property is used to get or set the height and width of the control.
Visible This property is used to get or set a value indicating whether the control and all its
child controls are displayed.
Width This property is used to get or set the width of the control.
Source: C# | GroupBox Class - GeeksforGeeks
Page 7 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
B. TAB CONTROL
Windows TabControl is a useful control that allows you display multiple dialogs tabs on a single form by
switching between the tabs. A tab acts as another Form that can host other controls. Figure 1 shows an
example of TabControl in Visual Studio .NET, which allows you to switch among multiple files using the
tabs.
Creating a TabControl
We can create a TabControl control using a Forms designer at design-time or using the TabControl class
in code at run-time or dynamically.
Design-time
To create a TabControl control at design-time, you simply drag and drop a TabControl control from
Toolbox onto a Form in Visual Studio. After you drag and drop a TabControl on a Form, the TabControl1
is added to the Form and looks like the following:
Page 8 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
A TabControl is just a container and has no value without tab pages. As you can see from the above
image, by default two Tab Pages are added to the TabControl. We can add and remove tab pages by
clicking on the Tasks handle and selecting Add and Remove Tab links:
Add Tab link adds next tab page and Remove Tab removes the current tab page from a Tab Control. We
will discuss tab pages in more detail later in this tutorial.
Run-time
TabControl class represents a tab control. The following code snippet creates a TabControl and sets its
Name, BackColor, ForeColor, Font, Width, and Height properties.
TabControl dynamicTabControl = new TabControl();
dynamicTabControl.Name = "DynamicTabControl";
dynamicTabControl.BackColor = Color.White;
dynamicTabControl.ForeColor = Color.Black;
dynamicTabControl.Font = new Font("Georgia", 16);
dynamicTabControl.Width = 300;
dynamicTabControl.Height = 200;
Once the TabControl control is ready with its properties, we need to add it to a Form by calling
Form.Controls.Add method. The following code snippet adds a TabControl control to the current Form.
Controls.Add(dynamicTabControl);
Page 9 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
As mentioned earlier, a TabControl is nothing without tab pages.
TabPage class represents a tab page control in Windows Forms. The following code snippet creates two
TabPage controls, sets their properties, and calls TabControl.TabPages.Add() method to add tab pages to
TabControl.
// Add TabPage1
TabPage tabPage1 = new TabPage();
tabPage1.Name = "tabPage2";
tabPage1.Text = "Author";
tabPage1.BackColor = Color.Green;
tabPage1.ForeColor = Color.White;
tabPage1.Font = new Font("Verdana", 12);
tabPage1.Width = 100;
tabPage1.Height = 100;
dynamicTabControl.TabPages.Add(tabPage1);
// Add TabPage2
TabPage tabPage2 = new TabPage();
tabPage2.Name = "tabPage2";
tabPage2.Text = "Books";
tabPage2.BackColor = Color.Orange;
tabPage2.ForeColor = Color.White;
tabPage2.Font = new Font("Verdana", 12);
tabPage2.Width = 100;
tabPage2.Height = 100;
dynamicTabControl.TabPages.Add(tabPage2);
Output:
Page 10 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
TabControl Properties
After you place a TabControl control on a Form, the next step is to set properties.
The easiest way to set properties is from the Properties Window. You can open Properties window by
pressing F4 or right-click on a control and select the Properties menu item. The Properties window looks
like the following:
Name
Name property represents a unique name of a TabControl control. It is used to access the control in the
code. The following code snippet sets and gets the name and text of a TabControl control.
dynamicTabControl.Name = "DynamicTabControl";
Positioning a TabControl
The Dock property is used to set the position of a TabControl. It is of type DockStyle that can have values
Top, Bottom, Left, Right, and Fill. The following code snippet sets Location, Width, and Height properties
of a TabControl control.
dynamicTabControl.Dock = DockStyle.Left;
Page 11 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
Background and Foreground
BackColor and ForeColor properties are used to set background and foreground color of a TabControl
respectively. If you click on these properties in Properties window, the Color Dialog pops up.
Alternatively, you can set background and foreground colors at run-time. The following code snippet
sets BackColor and ForeColor properties.
dynamicTabControl.BackColor = Color.White;
dynamicTabControl.ForeColor = Color.Black;
Alignment and Appearance
Alignment property gets or sets the area of the control where the tabs are aligned. A TabAlignment
enumeration is used to set Alignment property and have Top, Bottom, Left, or Right values.
Appearance property gets or sets the visual appearance of the control's tabs. A TabAppearance
enumeration is used to set the Appearance property and has Normal, Buttons, or FlatButtons values.
dynamicTabControl.Alignment = TabAlignment.Left;
dynamicTabControl.Appearance = TabAppearance.FlatButtons;
Page 12 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
Tab Pages
TabPages property, a type of TabPageColleciton object is the gateway to access and add tab pages to a
TabControl. Like any other collection, TabPageCollection has all collection functionality including add,
remove, and find.
We can add and access tab pages of TabControl at design-time from Properties Window by clicking on
TabPages Collection:
Page 13 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
When you click on the Collections, the Tab Pages Collection Editor window will pop up where you can
add and remove tab pages and you can also set these tab pages properties and events. I add four tab
pages:
Source: C# TabControl (c-sharpcorner.com)
Watch video references for practical examples!
Page 14 of 15
IT22-OOP (Object Oriented Programming)
College of Computer Studies
V. PRACTICE EXERCISES/ACTIVITIES
N/A
VI. ADDITIONAL RESOURCES
GroupBox and Panels - 04L GroupBoxes and Panels - YouTube
Tab Control: Windows Form Tabcontrol with TabPages Add, Remove Example - YouTube
VII. ASSESSMENT
N/A
VIII. REFERENCES
Fundamentals of Computer Programming with C# - (The Bulgarian C# Programming Book), Svetlin
Nakov, et al.
https://www.geeksforgeeks.org/
https://www.c-sharpcorner.com/
https://www.w3schools.com/cs/
https://www.tutorialspoint.com/csharp/
https://www.guru99.com/
https://www.programiz.com/
https://www.pluralsight.com/
Page 15 of 15
