DCIT 318

PROGRAMMING II

Session 6A – Developing GUI Applications

Part I
Lecturer: Mr. Paul Ammah, CSD
Contact Information: [email protected]

Department of Computer Science

School of Physical and Mathematical Sciences
2023/2024
 Windows Forms app in Visual Studio with
C#
• Windows Forms is a UI framework for .NET that
creates rich desktop client apps for Windows.
• The Windows Forms development platform supports
a broad set of app development features, including
controls, graphics, data binding, and user input.
• Windows Forms features a drag-and-drop visual
designer in Visual Studio to easily create Windows
Forms apps.

Slide 2
 Windows Forms app in Visual Studio with
C#
• To create a Windows Form App, Open Visual Studio
and then click on Create a new project window,
select the Windows Forms App (.NET Framework)
template for C#.
• In the Configure your new project window, type in
the Project name and then, select Create.

Slide 3
Example Window Form Application

Slide 4
Toolbox

Slide 5
 Add a New Form
• Add a new form with Visual Studio.
1. In Visual Studio, find the Project Explorer pane. Right-click
on the project and choose Add > Form (Windows Forms).
2. In the Name box, type a name for your form, such as
MyNewForm. Visual Studio will provide a default and
unique name that you may use.

• Once the form has been added, Visual Studio opens

the form designer for the form.

Slide 6
Adding a New Form

Slide 7
Adding a New Form

Slide 8
 Resize a Form
• Approach 1 • Approach 2

Slide 9
 Partial Classes and Methods
• It is possible to split the definition of a class, a struct,
an interface or a method over two or more source
files.
• Each source file contains a section of the type or
method definition, and all parts are combined when
the application is compiled.

Slide 10
 Partial Classes
• There are several situations when splitting a class
definition is desirable:
• Spreading a class over separate files enables multiple
programmers to work on it at the same time.
• When working with automatically generated source, code
can be added to the class without having to recreate the
source file.
• Visual Studio uses this approach when it creates Windows
Forms, Web service wrapper code, and so on.
• When using source generators to generate additional
functionality in a class.

Slide 11
 Partial Classes
public partial class Employee
{
public void DoWork()
{
}
}

public partial class Employee

{
public void GoToLunch()
{
}
}
Slide 12
 Partial Classes
partial class Earth : Planet, IRotate { }
partial class Earth : IRevolve { }

• They are equivalent to the following declarations:

class Earth : Planet, IRotate, IRevolve { }

Slide 13
 Restrictions
• All partial-type definitions meant to be parts of the
same type must be modified with partial.
• The partial modifier can only appear immediately
before the keywords class, struct, or interface.
• All partial-type definitions meant to be parts of the
same type must be defined in the same assembly
and the same module
• The class name and generic-type parameters must
match on all partial-type definitions

Slide 14
 Partial Methods
• A partial class or struct may contain a partial method.
• One part of the class contains the signature of the
method.
• An implementation can be defined in the same part or
another part.
• If the implementation is not supplied, then the method
and all calls to the method are removed at compile time.
• Implementation may be required depending on method
signature.

Slide 15
 Partial Methods
// Definition in file1.cs
partial void OnNameChanged();

// Implementation in file2.cs
partial void OnNameChanged()
{
// method body
}

Slide 16
 Windows Forms: Controls
• Windows Forms controls are reusable components that
encapsulate user interface functionality.
• You can combine existing controls, extend existing controls, or
author your own custom controls.
• The position a control appears on a parent is determined by the
value of the Location property relative to the top-left of the
parent surface.
• The top-left position coordinate in the parent is (x0,y0).
– The size of the control is determined by the Size property and
represents the width and height of the control.
• Besides manual positioning and sizing, various container controls
are provided that help with automatic placement of controls.
Slide 17
 Automatic Placement and Size
• There are two properties on a control that help
automatic placement and size within a parent: Dock
and Anchor.

Slide 18
 Dock
• The Dock property sets which border of the control is
aligned to the corresponding side of the parent, and
how the control is resized within the parent.

Slide 19
 Anchor
• Anchoring a control allows you to tie the control to
one or more sides of the parent container.
• As the container changes in size, any child control will
maintain its distance to the anchored side.

Slide 20
Anchor

Slide 21
 Control Layout Options
• Control placement in Windows Forms is determined
not only by the control, but also by the parent of the
control.
• Fixed position and size: The position a control
appears on a parent is determined by the value of
the Location property relative to the top-left of the
parent surface.
• Margin and Padding: The Margin property defines
the space around the control, The Padding property
defines the space in the interior of a control
Slide 22
 Controls
• Button, CheckBox, ComboBox, RadioButton
• TextBox, RichTextBox, ListBox, MaskedTextBox, and
CheckedListBox controls
• ListView , TreeView control
etc

Slide 23
 Label Class
• Labels are one of the most frequently used C#
control.
• We can use the Label control to display text in a set
location on the page.
• In addition to displaying text, the Label control can
also display an image using the Image property, or a
combination of the ImageIndex and ImageList
properties.

Slide 24
 Label
Label label1 = new Label();
label1.Text = "This is my first Label";
label1.BorderStyle = BorderStyle.FixedSingle;
label1.TextAlign = ContentAlignment.MiddleCenter;

Slide 25
 Button Class
• Represents a Windows button control.
private void InitializeMyButton()
{
// Create and initialize a Button.
Button button1 = new Button();

// Set the button to return a value of OK when clicked.

button1.DialogResult = DialogResult.OK;

// Add the button to the form.

Controls.Add(button1);
}

Slide 26
Button

Slide 27
 CheckBox
• Use a CheckBox to give the user an option, such as true/false or yes/no.
– The CheckBox control can display an image or text or both.

public void InstantiateMyCheckBox()

{
// Create and initialize a CheckBox.
CheckBox checkBox1 = new CheckBox();

// Make the check box control appear as a toggle button.

checkBox1.Appearance = Appearance.Button;

// Turn off the update of the display on the click of the control.
checkBox1.AutoCheck = false;

// Add the check box control to the form.

Controls.Add(checkBox1);
}
Slide 28
CheckBox

Slide 29
 ComboBox Class
• A ComboBox displays a text box combined with a
ListBox, which enables the user to select items from
the list or enter a new value.
• You can use these properties to manage the currently
selected item in the list,
– the Text property to specify the string displayed in the
editing field,
– the SelectedIndex property to get or set the current item,
and
– the SelectedItem property to get or set a reference to the
object.
Slide 30
 ComboBox
ComboBox comboBox1 = new ComboBox();
comboBox1.Items.AddRange(
new object[] {
"Item 1", "Item 2", "Item 3", "Item
4", "Item 5”
}
);

Slide 31
ComboBox

Slide 32
 RadioButton Class
• Enables the user to select a single option from a group of
choices when paired with other RadioButton controls
• When the user selects one option button (also known as
a radio button) within a group, the others clear
automatically.
• All RadioButton controls in a given container, such as a
Form, constitute a group.
• To create multiple groups on one form, place each group
in its own container, such as a GroupBox or Panel
control.

Slide 33
 RadioButton
private GroupBox groupBox1 = new GroupBox();
private RadioButton radioButton2 = new RadioButton();
private RadioButton radioButton1 = new RadioButton();

groupBox1.Controls.Add(this.radioButton2);
groupBox1.Controls.Add(this.radioButton1);
groupBox1.Text = "Radio Buttons";
radioButton1.Text = "Choice 1";
radioButton1.CheckedChanged += new EventHandler(radioButton_CheckedChanged);
radioButton2.Text = "Choice 2";
radioButton1.CheckedChanged += new EventHandler(radioButton_CheckedChanged);

void radioButton_CheckedChanged(object sender, EventArgs e) {

RadioButton rb = sender as RadioButton;
if (rb == null) {
MessageBox.Show("Sender is not a RadioButton");
return;
} // Ensure that the RadioButton.Checked property // changed to true.
if (rb.Checked) {
// Keep track of the selected RadioButton by saving a reference // to it.
selectedrb = rb;
}
} Slide 34
RadioButton

Slide 35
 Panel Class
• Used to group collections of controls.
• A Panel is a control that contains other controls.
• You can use a Panel to group collections of controls
such as a group of RadioButton controls.
• As with other container controls such as the
GroupBox control, if the Panel control's Enabled
property is set to false, the controls contained within
the Panel will also be disabled.

Slide 36
 Panel
Panel dynamicPanel = newPanel();

dynamicPanel.Location = new System.Drawing.Point(26, 12);

dynamicPanel.Name = "Panel1";

dynamicPanel.Size = new System.Drawing.Size(228, 200);

dynamicPanel.TabIndex = 0;

Controls.Add(dynamicPanel);

dynamicPanel.Visible = false;
Slide 37
Panel

Slide 38
 TextBox Class
• With the TextBox control, the user can enter text in
an application
• Typically, a TextBox control is used to display, or
accept as input, a single line of text.
• You can use the Multiline and ScrollBars properties
to enable multiple lines of text to be displayed or
entered.

Slide 39
 TextBox
private TextBox textBox1;
textBox1 = new System.Windows.Forms.TextBox();
textBox1.AcceptsReturn = true;
textBox1.AcceptsTab = true;
textBox1.Dock = DockStyle.Fill;
textBox1.Multiline = true;
textBox1.ScrollBars = ScrollBars.Vertical;

Slide 40
TextBox

Slide 41
 ListBox Class
• The ListBox control enables you to display a list of
items to the user that the user can select by clicking.
• A ListBox control can provide single or multiple
selections using the SelectionMode property.
• The MultiColumn property to enable the display of
items in columns instead of a straight vertical list of
items.
– With this, the control can display more visible items and
the user no longer needs to scroll to an item.

Slide 42
 ListBox
// Create an instance of the
ListBox. ListBox listBox1 = new ListBox();

// Set the ListBox to display items in multiple columns.

listBox1.MultiColumn = true;

// Set the selection mode to multiple and extended. listBox1.SelectionMode =

SelectionMode.MultiExtended;

// Shutdown the painting of the ListBox as items are added.

listBox1.BeginUpdate();

// Loop through and add 50 items to the ListBox.

for (int x = 1; x <= 50; x++) {
listBox1.Items.Add("Item " + x.ToString());
}

// Allow the ListBox to repaint and display the new items.

listBox1.EndUpdate();

Slide 43
ListBox

Slide 44
 ListView Class
• Represents a Windows list view control, which
displays a collection of items that can be displayed
using one of four different views.

Slide 45
 ListView
// Create two items and three sets of subitems.
// Create a new ListView control. ListViewItem item1 = new ListViewItem("item1",0);
ListView listView1 = new ListView();
listView1.Bounds = new Rectangle( // Place a check mark next to the item.
new Point(10,10), new Size(300,200) item1.Checked = true; item1.SubItems.Add("1");
); item1.SubItems.Add("2");
item1.SubItems.Add("3");
// Set the view to show details.
listView1.View = View.Details; ListViewItem item2 = new ListViewItem("item2",1);
item2.SubItems.Add("4");
// Allow the user to edit item text. item2.SubItems.Add("5");
listView1.LabelEdit = true; item2.SubItems.Add("6");

// Allow the user to rearrange columns. // Create columns for the items and subitems.
listView1.AllowColumnReorder = true; // Width of -2 indicates auto-size.
listView1.Columns.Add("Item Column", -2,
// Display check boxes. HorizontalAlignment.Left);
listView1.CheckBoxes = true; listView1.Columns.Add("Column 2", -2,
HorizontalAlignment.Left);
// Select the item and subitems listView1.Columns.Add("Column 3", -2,
listView1.FullRowSelect = true; HorizontalAlignment.Left);

// Display grid lines. //Add the items to the ListView.

listView1.GridLines = true; listView1.Items.AddRange(new ListViewItem[]
{item1,item2,item3});
// Sort the items in ascending order.
Slide 46
listView1.Sorting = SortOrder.Ascending;
ListView

Slide 47