CSCI 3328 Object Oriented CSCI 3328 Object Oriented Programming in C# Programming in C#

Chapter 10: Graphical User Chapter 10: Graphical User Interfaces with Windows FormsInterfaces with Windows Forms

1

Xiang Lian

The University of Texas – Pan American

Edinburg, TX 78539

lianx@utpa.edu

Objectives

• In this chapter, you will– Learn how to process events that are generated by user

interface controls and event handling– Know how to create and use Button, Label,

RadioButton, CheckBox, TextBox, Panel and NumbericUpDown controls

– Know how to add ToolTips to GUI controls– Discover how to process mouse and keyboard events– Become familiar with more controls, such as Menus,

tabbed windows, and multiple document interface (MDI), ListView, TreeView, LinkLabel, ListBox, ComboBox, DateTimePicker

2

Windows Forms

• Dialog• MDI (window multiple document Interface)

Window• Controls and components are placed on the

form• Toolbox allows you to choose controls and

components• A form is a container that holds the controls

and components3

Controls

4

Event Handling

• Events drive the program to perform a task– Click– Change– Time

• Event handler is what you write

5

Example of Event-Driven GUI

• Click event of Button

private void clickButton_Click(object sender, EventArgs e)

{

MessageBox.Show("Button was clicked");

}

6

Visual Studio Generated Code

• Can give great insight into what is going on• See what is in the Designer.cs

– It will have all controls and components you placed there

7

Integrated Development Environment

• Events

Properties window

events

8

Creating Event Handlers

• Double click on a control and write code– Known as default event

• You can use the properties window to create event handlers

• Click on the events (looks like the lightning) in the properties window

9

Control Properties and Layout

• Controls derive from class Control• Common control properties

– BackColor– BackgroundImage– Enabled– Focused– Font– ForeColor– TabIndex– Text– Visible

• Common methods– Hide– Select– Show

10

Anchor Property

• Anchoring causes controls to remain at a fixed distance from the sides of the container, even when the container is resized– Darkened bar indicate the container’s sides to which the

control is anchored

11

Dock Property and Other Properties

12

• Dock

• Other properties– Location– Size– MaximumSize– MinimumSize

Labels, TextBoxes and Buttons

• A Label displays text that the user cannot directly modify

• A TextBox is an area in which either text can be displayed by a program or user can type text via keyboard– A password TextBox

• Set UseSystemPasswordChar to true

• A Button is a control that the user clicks to trigger a specific action or to select an option in a program

13

Common Properties/Events of Labels, TextBoxes and Buttons

• Label– Font, Text, TextAlign

• TextBox– AcceptReturn

• If true in a multiline TextBox, pressing Enter in the TextBox creates a new line

– Multiline, ReadOnly, ScrollBars, Text, UseSystemPasswordChar

– Event: TextChanged• Button

– Text, FlatStyle– Event: Click

14

GroupBoxes and Panels

• GroupBoxes and Panels arrange controls on a GUI• All controls in a GroupBox or Panel move together

when the GroupBox or Panel is moved• Properties of GroupBoxes

– Controls– Text

• Properties of Panels– AutoScroll (when resizing panels)– BorderStyle– Controls

15

CheckBoxes and RadioButtons

• CheckBoxes– Appearance, Checked, CheckState, Text

– ThreeState• Checked, unchecked, and indeterminate (grey color; can be set

programmatically)

– Event: CheckedChanged, CheckStateChanged

• RadioButtons– Checked, Text

– Event: CheckedChanged

16

Example of CheckBoxes and RadioButtons

private void boldCheckBox_CheckedChanged(object sender, EventArgs e)

{

outputLabel.Font = new Font(outputLabel.Font, outputLabel.Font.Style ^FontStyle.Bold);

}

-------------------------------------------------------------------------------------

private MessageBoxButtons buttonType;

private void buttonType_CheckedChanged(object sender, EventArgs e)

{

if (sender == okRadioButton)

buttonType = MessageBoxButtons.OK;

}

17

name of a radio button

PictureBox

• Properties– Image

– SizeMode

• Events– Click

• Example of setting image resources– imagePictureBox.Image=(Image)

(Properties.Resources.ResourceManager.GetObject("image1");

18

ToolTips

• Drag ToolTip to the form– Then each control has a new property "ToolTip on toolTip1"

• Properties– AutoPopDelay

• The amount of time that the tool tip appears while the mouse is over a control– InitialDelay

• The amount of time that a mouse must hover over a control before a tool tip appears

– ReshowDelay: • The amount of time between which two different tool tips appear

• Load Method of the form– tooltip1.SetToolTip(this.button1, "tips here");

• Event– Draw

19

NumericUpDown Control

• Properties– DecimalPlaces

– Increment

– Maximum

– Minmum

– UpDownAlign

– Value

• Event– ValueChanged

20

Mouse Handlingprivate void PainterForm_MouseDown(object sender, MouseEventArgs e){ shouldPaint = true;} private void PainterForm_MouseUp(object sender, MouseEventArgs e){ shouldPaint = false;} private void PainterForm_MouseMove(object sender, MouseEventArgs e){ if (shouldPaint) {

Graphics graphics = CreateGraphics();graphics.FillEllipse(new SolidBrush(Color.BlueViolet), e.X, e.Y, 4, 4);graphics.Dispose(); //dispose of resources

}}

21

Location of the mouse

Mouse Handling (cont'd)

• Event EventArgs– MouseEnter– MouseLeave

• Event MouseEventArgs– MouseDown– MouseHover– MouseMove– MouseUp

• Properties of class MouseEventArgs– Button (Left, Right, Middle or none button of the mouse)– Clicks (number of clicking times)– X– Y

22

Keyboard Events• Event KeyEventArgs

– KeyDown– KeyUp

• Event KeyPressEventArgs– KeyPress

• Properties of class KeyPressEventArgs– KeyChar– Handled (whether the event was handled)

• Properties of class KeyEventArgs– Alt (whether Alt key was pressed)– Control (whether Ctrl key was pressed)– Shift (whether Shift key was pressed)– Handled (whether the event was handled)

23

Menus

• Main menu bar– Type menu name

– Place & character before a letter to underline it• E.g., &File

• Effect: File (you can press Alt+F keys to select file menu)

– Select shortcut keys for menu items

– You can remove a menu item by

selecting it with mouse and pressing

Delete key

24

Menus (cont'd)

• Options of menu items– Right click a menu item

– ToolStripMenuItem

– ComboBox

– Separator

– TextBox

25

Menus (cont'd)

• MenuStrip Properties– HasChildren

– RightToLeft

• ToolStripMenuItem Properties– Checked

– CheckOnClick

– Index

– MenuItems

• ToolStripMenuItem Event– Click

26

Example of Menus

• Checked Property– blackToolStripMenuItem.Checked = true;

• Eventprivate void blackToolStripMenuItem_Click(object sender, EventArgs e)

{

displayLabel.ForeColor = Color.Black;

blackToolStripMenuItem.Checked = true;

}

27

MonthCalendar Control

• Properties– FirstDayOfWeek– MaxDate– MaxSelectionCount

• Maxixmum number of dates that can be selected at once– MinDate– MonthlyBoldedDates

• An array of dates that will be displayed in bold in the calendar– SelectionEnd– SelectionRange– SelectionStart

• Event– DateChanged

28

DateTimePicker Control

• Properties– CalendarForeColor– CalendarMonthBackground– CustomFormat– Date– Format– MaxDate– MinDate– ShowCheckBox– ShowUpDown– TimeOfDay– Value

• Event– ValueChanged

29

Example of DateTimePicker

private void dateTimePickerDropOff_ValueChanged(object sender, EventArgs e)

{

DateTime dropOffDate = dateTimePickerDropOff.Value;

if (dropOffDate.DayOfWeek == DayOfWeek.Friday ||

dropOffDate.DayOfWeek == DayOfWeek.Saturday ||

dropOffDate.DayOfWeek == DayOfWeek.Sunday)

outputLabel.Text = dropOffDate.Add(3).ToLongDateString();

else

outputLabel.Text = dropOffDate.Add(2).ToLongDateString();

}

30

LinkLabel Control

• Properties– LinkVisited

• If true, the link appears as though it has been visited

– LinkColor– Text– VisitedLinkColor

• Event– LinkClicked

• System.Diagnostics.Process.Start(@"C:\");• System.Diagnostics.Process.Start("http://faculty.utpa.edu/lianx");• System.Diagnostics.Process.Start("notepad");

31

ListBox Control• Properties of ListBox

– SelectionMode– MultiColumn– SelectedIndex

• If no items are selected, SelectedIndex = 1– SelectedIndices

• For multiple selected items– SelectedItem– SelectedItems– Sorted

• Indicate whether items are sorted alphabetically

• Methods of ListBox– ClearSelected– GetSelected(index)

• Return true, if the corresponding item is selected

• Event of List Box– SelectedIndexChanged

32

Example of ListBox Control

• myListBox.Items.Add(myListItem);

• CheckedListBox Control– Inherit from ListBox

33

ComboBox Control

• Properties– DropDownStyle

– Items

– MaxDropDownItems

– SelectedIndex

– SelectedItem

– Sorted

• Event– SelectedIndexChanged

34

Other Controls

• TreeView Control– "Nodes" property

• Add root, or add child

– AfterSelect event• When selected node changes

35

Other Controls (cont'd)• TabControl Control

– Contains TabPage objects which are similar to Panels and GroupBoxes– myTabPage.Controls.Add(myControl);– myTabPage.Controls.Add(myTabPage);

• Properties– ImageList– ItemSize

• Tab size– Multiline– SelectedIndex– SelectedTab– TabCount– TabPages

• Add more tabs

• Event– SelectedIndexChanged

36

37