GUI HandfdgdOut

7/26/2019 GUI HandfdgdOut

1/36

13.1 Introduction

Graphical User Interface (GUI) Gives a program distinctive look and feel

Built from GUI controls (Fig. 13.2) Objects that can display information on the screen or enable users to interact with anapplication

ImplementsIComponent interface

GUI (HU 2015/16) 1


2/36

Cont.

Common GUI events:

mouse move

mouse click

mouse double-click

key press

button click

change in focus

window activation

GUI (HU 2015/16) 2


3/36

13.2 Windows Forms

Windows Forms Used to create GUIs for programs

Graphical element that appears on your computers desktop Active window is the front most window

A Form is a container for controls and components

In visual programming, Visual Studio generates much of the GUI-related code

GUI (HU 2015/16) 3


4/36

Form PropertiesProperty Description

Location Point of to left corner

Size Size of form in pixels

Text Text displayed or caption

AutoScaleDimensions DPI resolution of display it was built for. Will be scaled to look correct

on other displays.

BackColor Background color

ForeColor Foreground or drawing color

ClientSize Size of drawing area without borders or scrollbars

Controls A collection of controls owned by the form

WindowState Whether maximized, minimized or normal

DefaultSize Size when initially created

MinimumSize Minimum size window can be resized to

MaximumSize Maximum size window can be resized toGUI (HU 2015/16) 4


5/36

Form EventsEvent Description

Load Just before form is loaded the first time

Closing Just before the form is closed

Closed When the form is actually closed

Shown Occurs when a form is first displayed

ResizeBegin Resize operation has begun

ResizeEnd Resize operation has ended

GUI (HU 2015/16) 5


6/36

Form MethodsMethod Description

Activate Activates the window and gives it focus

Close Closes the form

Show Makes the form visible

BringToFront Moves to top of stacking order

Hide Makes the form invisible

Focus Gives the form focus

GUI (HU 2015/16) 6


7/36

CheckBoxes

Labeled boxes which can be checked or uncheckedChecked get/set Boolean to determine if box is checked

CheckedChanged delegate called when the box ischecked or unchecked

GUI (HU 2015/16) 7


8/36

GroupBox

Displays a border around a group of controls Can have optional label controlled by Text property

Controls can be added by Placing them within the group box in the designer

Adding to the Controls list programmatically

GUI (HU 2015/16) 8


9/36

Panels

A panel is like a group box but does not have a text label

It contains a group of controls just like group box BorderStyle get/set border style as

BorderStyle.Fixed3D

BorderStyle.FixedSingle

BorderStyle.None

GUI (HU 2015/16) 9


10/36

Radio Buttons

Radio buttons are similar to checkboxes, but

Appear slightly different Allow buttons to be grouped so that only one can be checked at a time

A group is formed when the radio buttons are in the samecontainer usually a group box or panel

GUI (HU 2015/16) 10


11/36

Radio Buttons

Checked get/set Boolean indicating if the button is checked

CheckedChanged delegate invoked when the button is

checked or unchecked

GUI (HU 2015/16) 11


12/36

TextBox

This is a single line or multi-line text editor Multiline get/set Boolean to make multiline

AcceptsReturn in a multiline box, if true then pressingReturn will create a new line. If false then the buttonreferenced by the AcceptButton property of the form,will be clicked.

PasswordChar if this is set to a char, then the boxbecomes a password box

GUI (HU 2015/16) 12


13/36

TextBox

ReadOnly if true, the control is grayed out and will notaccept user input

ScrollBars determines which scrollbars will be used:ScrollBars.None, Vertical, Horizontal, Both

TextAlign get/set HorizontalAlignment.Left, Center, orRight

TextChanged event raised when the text is changed

GUI (HU 2015/16) 13


14/36

File Dialog

The file dialog allows you to navigate through directories and loador save files

This is an abstract class and you useOpenFileDialogSaveFileDialog

You should create the dialog once and reuse it so that it willremember the last directory the user had navigated to

GUI (HU 2015/16) 14


15/36

File Dialog

InitialDirectory string representing the directory to start in

Filter a string indicating the different types of files to be

displayed A set of pairs of display name and pattern separated by vertical bars

Windows Bitmap|*.bmp|JPEG|*.jpg|GIF|*.gif

FilterIndex the filter to use as an origin 1 index

GUI (HU 2015/16) 15


16/36

File Dialog

FileName the name of the file selected

ShowDialog a method to show the dialog and block until cancel orOK is clicked

if (openDialog.ShowDialog() == DialogResult.OK) {

Image img = Image.FromFile(openDialog.FileName);

pictureBox1.Image = img;

}

GUI (HU 2015/16) 16


17/36

Image Class

An abstract class that can store an image

Several concrete classes are used for image types such as

BMP, GIF, or JPGFromFile(string fname) loads any supported imageformat from a file

FromStream(stream) loads an image from a streamHeight image heightWidth image width

GUI (HU 2015/16) 17


18/36

PictureBox Class

This displays an imageImage assigned an Image object to display

SizeMode determines what to do if the image does not fit into thewindow

Normal

StretchImage

AutoSize

CenterImage

Zoom

GUI (HU 2015/16) 18


19/36

ToolTips

These are the small pop-up boxes which explain the purpose of acontrol

To use Create a new tooltip in the designer

Drop the tooltip onto the form

The tooltip will appear on a tray below the form

GUI (HU 2015/16) 19


20/36

ToolTips

GUI (HU 2015/16) 20


21/36

ToolTips

After the tooltip appears in the tray, a new tooltip property appearsfor every component

This can be assigned different text for each component That text will be displayed when the mouse hovers over that

component

GUI (HU 2015/16) 21


22/36

NumericUpDown

This allows the selection of an integer from a limited range

Also called a spinnerMinimum smallest selectable value

Maximum largest selectable value

Increment size of increment per click

Value the selected value

ValueChanged event raised when the value changes

GUI (HU 2015/16) 22


23/36

MonthCalendar

A control which displays a calendar for the selection

of a range of datesMinDate the first selectable date

MaxDate the last selectable date

SelectionStart DateTime of start of selection

SelectionEnd DateTime of end of selection

DateChanged event raised when date is changed

GUI (HU 2015/16) 23


24/36

DateTimePicker

Similar to a month calendar but Calendar pulls down and selection displayed

More configurable

Selects a single value, not a range

Properties/methodsFormat Long, Short, Time, CustomValue DateTime value selectedValueChanged event which fires when date or time changes

GUI (HU 2015/16) 24


25/36

System.DateTime Structure

A structure representing a date and time

Constructors

DateTime(int d, int m, int y)DateTime(int d, int m, int y, int h, int m, int s)

PropertiesNow returns a DateTime object set to the current local time

GUI (HU 2015/16) 25


26/36

DateTime

Day day from 1-31

Month month from 1-12

Year tear from 1-9999Hour from 0-23

Minute minute from 0 -59

Second second from 0 -59

Millisecond millisecond from 0-999

GUI (HU 2015/16) 26


27/36

DateTime

DayOfWeek get enumeration of Sunday, Monday,

DayOfYear day of year from 1 366

MethodsDateTime AddYears(double value)DateTime AddMonths(double value)

DateTime AddDays(double value)

DateTime AddHours(double value)

DateTime AddSeconds(double value)

DateTime AddMilliseconds(double value)

GUI (HU 2015/16) 27


28/36

DateTime

TimeSpan Subtract(DateTime)

int CompareTo(DateTime)

static DateTime Parse(string)

ToLongDateString()

ToShortDateString()

ToLongTimeString()

ToShortTimeString()

GUI (HU 2015/16) 28


29/36

ListBox

The ListBox presents a list of items which can beselected

A scrollbar is displayed if neededMultiColumn displays list as multiple columnsSelectedIndex index of selected item

SelectedIndices collection of selected indices

SelectedItem the selected item

GUI (HU 2015/16) 29


30/36

ListBox

SelectedItems collection of selected items

SelectionMode how items can be selectedNone no selection

One single selection

MultiSimple each click selects additional item

MultiExtended uses shift and control keys

Sorted if true the items will be sorted alphabetically

GUI (HU 2015/16) 30


31/36

ListBox

Items a collection of items in the list box

ClearSelected method to clear selection

GetSelected returns true if the parameter passed is selectedSelectedIndexChanged event when selection changes

GUI (HU 2015/16) 31


32/36

Populating a ListBox

Any object can be placed into a ListBox

The display is generated by ToString()

for(int i = 0; i < 50; i++) {

listBox1.Items.Add(

"Item " + i.ToString());

}

GUI (HU 2015/16) 32


33/36

ComboBox

A combo box is like a list but lets you displays a selected value.

The list pulls down when a selection is being made.

Options allow the selected text to be editable or to require it to beselected from the drop-down list

GUI (HU 2015/16) 33


34/36

ComboBox

DropDownStyleSimple text is editable & list always visible

DropDown default indicating text is editable & user must click to see list

DropDownList value is not editable & user must click to see list

Items the collection of items in the list

GUI (HU 2015/16) 34


35/36

ComboBox

MaxDropDownItems max number of items in pulldown beforescrollbar used

SelectedIndex index of selectionSelectedItem selected item

Sorted whether entries are sorted

SelectedIndexChanged event raised when selection changes

GUI (HU 2015/16) 35


36/36

Code-behind

Events are handled by methods that live behind GUI our job is to program these methods

GUI (HU 2015/16) 36

GUI HandfdgdOut

Documents

Transcript of GUI HandfdgdOut