1. IS 350 Course Introduction

2. Objectives Compare command-line interfaces and forms-based interfaces
Design the user interface for a Windows application
Create a Windows Forms Application project using Visual Studio
Use Visual Studio to create and configure control instances
Use controls to create the user interface for a Windows Forms Application project
Create code for a Windows Forms Application project

3. Comparing Command-Line and Form-Based Interfaces
User interfaces can be roughly be categorized into two types
Command-line interfaces use textual input and output
The end user interacts with an application by typing commands
Most Windows user interfaces are form-based visual interfaces
The end user interacts with an application through its visual elements called controls

4. Comparing a command-line and a form-based visual interface

5. Principles of a Good User Interface
Control – The end user should control the application
User-friendliness – The interface should help the end user accomplish tasks
Intuitiveness – The interface should follow a direct style that proceeds logically
Consistency – The user interface should have consistent fonts, and buttons should have the same shape and size
Programming with Microsoft Visual Basic 2008: An Object-Oriented Approach, Third Edition

6. Principles of a Good User Interface (continued)
Feedback – The interface should provide clear and immediate feedback
Graphics – Avoid the use of unnecessary graphics
Input – Minimize transitions between the keyboard and mouse where possible

7. Designing a User Interface
A user interface should be designed before it is implemented
Design the user interface using a tool such as Visio
A simple pencil and paper sketch will often suffice

8. Principles of Control Design
Alignment – Align control instances vertically or horizontally
Balance – Distribute control instances evenly about the form
Appropriate color – Use soft colors with adequate contrast between foreground and background colors
Users may be colorblind
Function grouping – Group control instances based on their function
Consistent sizing – Control instances should have the same size

9. A poor user interface

10. Figure 3-4: An improved user interface

11. Differences Between Console Application and Windows Forms Application Projects
Console Application projects are procedural
Console Application projects have a textual (character-based) user interface
Windows Forms Application projects are event driven
Windows Forms Application projects have a visual user interface consisting of buttons and boxes

12. Anatomy of a Windows Application Project
Use the Windows Forms Designer to create a form’s visual interface
Use controls appearing in the Toolbox to create a form’s visual interface
The Properties window provides a visual way to set properties for the form and its control instances

13. Selected Visual Studio windows

14. The Solution Explorer
The role of the Solution Explorer is the same for Console and Windows Forms Application projects
It organizes the various parts of a solution
The project and support files are the same
The role of project references are the same
Windows Application projects reference different assemblies and namespaces, however
Form files appear instead of module files
A Windows Forms Application can contain modules

15. Solution Explorer for a Windows Forms Application project

16. The Windows Forms Designer and the Toolbox
The Windows Forms Designer and Toolbox are used together to create an application’s visual interface
View the Windows Forms Designer by
Selecting the form in the Solution Explorer and clicking View Designer
Clicking View, Designer on the menu bar
The Toolbox contains controls
Controls created on a form are called control instances
Control instances are created visually by drawing them on the Windows Forms Designer

17. Characteristics of a Form
A title bar appears along the top of a form
An optional control box appears in the title bar
The control box contains Minimize, Maximize, Restore, and Close buttons
The buttons on the control box may be disabled or hidden
An icon appears on the left side of the title bar
Below the title bar appears an optional menu
The region inside a form's border is called the client area

18. Form Properties
AcceptButton contains the name of a Button control instance
Pressing Enter executes this button’s Click event handler
BackColor defines a form’s background color
ControlBox defines whether the control box appears
MaximizeBox enables or disables the Maximize button on the control box
MinimizeBox enables or disables the Minimize button on the control box

19. Form Properties (continued)
FormBorderStyle defines whether a form is resizable and the size of the title bar
CancelButton contains the name of a Button control instance
Pressing Escape executes this button’s Click event handler
Icon defines the form’s icon
Contents of the Text property appear in the title bar
Width and Height define the form’s size
StartPostion defines the position of the form on the desktop

20. Form Methods and Events
Close method closes the form and unloads it from memory
Hide method makes a form invisible
Events
Load event fires when a form is loaded into memory for the first time
FormClosing fires just before a form is unloaded from memory

21. Toolbox Tabs
The Toolbox contains controls that are drawn on the form and is divided into tabs
All Windows Forms tab lists all controls
Common Controls tab lists the most frequently used controls
Containers tab lists controls used to group other controls
Menus & Toolbars tab contains controls used to create a menu system and toolbars
Dialogs tab contains standard dialog boxes

22. Organization of the Toolbox controls

23. Introduction to the Properties Window
The Properties window is a tool window
It can be docked, Auto Hidden, or appear as a floating window
Use it to set properties for a form or control instance at design time
Select the form or control instance using the Windows Forms Designer

24. Properties Window (Sections)
The Properties window is divided into four sections
Object drop-down box lists the form and control instances on the form
Toolbar area contains buttons to change the order in which properties are listed and to display properties or events
List section contains two columns displaying property names and values
Description section displays a property’s purpose

25. The Properties window

26. Configuring Textual and Hierarchical Properties
Properties such as Name and Text store textual values
Edit these values directly in the Value column
A plus or minus sign appears next to hierarchical properties
Click plus to expand and minus to collapse
Some properties display a drop-down list
Some properties display a visual editor

27. Using Visual Studio to Create and Configure Control Instances
To create a control instance
Click the control in the Toolbox to select it
Using the mouse, draw the region of the control instance on the form
To delete a control instance, click the control instance to select it and press Delete

28. Moving and Resizing a Control Instance
Move a control instance by dragging it on the form
Resize a control instance by
Clicking the control instance to select it
Resize the control instance by dragging the sizing handles

29. Working with Multiple Control Instances
Select multiple control instances by
Holding down the Shift key and clicking the desired control instance
Dragging a rectangle around the desired control instances with the Pointer tool
Only part of the control instance needs to appear in the rectangle to be selected

30. Aligning Multiple Control Instances
Use the Format menu to align control instances
All commands work with the active and selected control instances
Align command aligns the margins of the selected control instances
Make Same Size command makes the selected control instances the same size as the active control instance
Horizontal and Vertical Spacing commands change the horizontal or vertical spacing from the form’s border
Visual snap lines appear while dragging control instances in the Windows Forms Designer

31. Introduction to Visual Studio Controls
Controls discussed in this chapter
PictureBox displays graphical images
Label displays text
Button is used to perform a specific task when clicked
OpenFileDialog displays a dialog box from which the end user can select a file to open
ToolTip displays informational pop-up messages

32. The System.Windows.Forms. Form.Control Class
The Control class is the base class from which all visible controls are derived
Dialog boxes are derived from the CommonDialog class

33. Hierarchical organization of control classes

34. Understanding the Name Property
Every form and control instance has a name
Visual Studio assigns a default name to forms and control instances
The value of the Name property is used to reference a form or control instance programmatically
Assigning meaningful names creates more readable code
Use consistent prefixes for form and control instance names

35. Requirements for the Name property
first character must be a letter
Subsequent characters can be letters, numbers, or the underscore character
Name must be less than 255 characters long
Names cannot contain spaces
Names cannot contain special characters
Form names and control instance names must be unique

36. Control Prefixes Control Prefix Button btn Label lbl OpenFileDialog
ofd
PictureBox
pic
ToolTip
tip
Form
frm

37. Properties of the Control Class
Text and background colors are specified with the ForeColor and BackColor properties
Enabled property defines whether the control instance responds to end user interaction
Height and Width properties specify the size
Location property defines the position on the form
Text property contains the text appearing in the control instance
Visible property defines whether the control instance is visible or invisible

38. Methods and Events of the Control class
Hide method makes a control instance invisible
Visible property is set to False
Show method makes a control instance visible
Visible property is set to True
Click event fires when the end user clicks the control instance

39. The Label Control
The Label control derives directly from the Control class
It displays textual information
The end user has no interaction with a Label control instance

40. Properties of the Label Control
BorderStyle defines the appearance of the border surrounding the label
Font defines the font of the text appearing in the label
Alignment defines the alignment of the text within the visible region of the control instance

41. The Button Control
The Button control is derived from the ButtonBase class
It supplies a clickable button
CheckBox and RadioButton controls also supply clickable buttons
The CheckBox and RadioButton controls are discussed in subsequent chapters

42. The Button Control (Members)
Enabled property defines whether the control instance will respond to events
FlatStyle property defines the visual appearance of the button
Text property defines the text appearing in the visible region
Click event fires when the end user clicks the button

43. The PictureBox Control
The PictureBox control derives directly from the Control class
It displays images having formats of JPEG, bitmap and others
The image can be scaled inside the control instance

44. The PictureBox Control (Members)
BorderStyle property defines the appearance of the border surrounding the PictureBox
Image property contains the image
ImageLocation property contains the disk filename where the image is stored
SizeMode property defines how the image appears (is scaled) inside of the PictureBox
Click event fires when the end user clicks the PictureBox

45. The OpenFileDialog Control
The CommonDialog class is the base class for other classes
These classes are used to display standard dialog boxes
OpenFileDialog control allows the end user to select a file to open
The control instance appears in the resizable component tray below the Windows Forms Designer at design time
Call the ShowDialog method to display the control instance

46. Using the OpenFileDialog Control
ShowDialog method displays the dialog box to the end user
FileName property contains the filename selected by the end user
The OpenFileDialog control does not actually open a file

47. The OpenFileDialog Control (Example)
Display an instance of the OpenFileDialog control named ofdImages and print the filename selected by the end user
ofdImages.ShowDialog()
System.Console.WriteLine(ofdImages.FileName)

48. ToolTips (Introduction)
ToolTips appear as pop-up windows when the mouse hovers over a control instance
Use to display informational messages to the end user
Create ToolTips with the ToolTip control
The ToolTip control is a provider control meaning that it works with other control instances
Use one ToolTip control instance for all the other control instances on a form

49. ToolTip Control (Members)
InitialDelay property controls the amount of time the mouse must hover before displaying the ToolTip
AutomaticDelay property controls the length of time the ToolTip appears
Use to ToolTipOnControlInstanceName to display the ToolTip

50. Creating Code for a Windows Application Project
Code executes as the end user interacts with the form’s control instances
This code is called the code behind the form
Code behind the form is made up of two parts
One part is automatically generated by the Windows Forms Designer
The second part contains the code you write

51. Introduction to Class Blocks and Partial Classes
A form is made up of two files
Windows Forms Designer generated code appears in the file named frmName.Designer.vb
Developer created code appears in the file frmName.vb
A form is a class having the following structure
Public Class frmMain
‘ statements
End Class

52. The Syntax of a Class Block
Class and Module blocks have a similar syntax
Class and End Class keywords mark the beginning and end of a Class block
A Class block contains procedures
The procedure named New is the entry point and is called the constructor
A Class block can contain a Main() procedure but it is not the entry point

53. Introduction to Event Handlers
An event hander is a procedure containing statements that execute when the end user performs an action
Windows executes different event handlers as different events fire
Windows fires a Click event when the end user clicks a button
Different types of controls support different events

54. Executing an Event Handler

55. Characteristics of an Event Handler
An event handler is a form of Sub procedure
All event procedures have two arguments
Arguments send information to a procedure
Handles clause marks the procedure as an event handler
Use the Windows Forms Designer and Code Editor to create event handlers automatically
Double-click the control instance in the Windows Forms Designer
Use the Class Name and Method Name drop-down boxes to create and select event handlers

56. Event Handler (Example)
Click event handler for a Button control instance named btnDemo
Private Sub btnDemo_Click( _
ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles btnDemo.Click
End Sub

57. Assignment Statements (Introduction)
Assignment statements are similar to algebraic statements
They contain a left side and a right side
The expression on the left side is evaluated and stored in the property appearing on the right side
An equals (=) sign separates the left side and the right side

58. Assignment Statement (Example 1)
Store a literal value in the form’s Text property
String literal values are surrounded by double quotation marks
Me.Text is the form’s Text property
Me.Text = "Chapter 3 – Concept Lesson"

59. Assignment Statement (Example 2)
Assignment statements can be used with numeric values
Double quotation marks do not surround literal values
Store 0 in the Top and Left properties of a PictureBox control instance named picCurrent
picCurrent.Top = 0
picCurrent.Left = 0

60. Assignment Statement (Example 3)
Boolean values can be used in assignment statements
True and False are Boolean values
Visible and Enabled properties store Boolean values
Set the Visible and Enabled properties for control instances
btnDemo.Visible = False
picCurrent.Enabled = True

61. Assignment Statement (Example 4)
Set the SizeMode property to an enumeration value
picDemo.SizeMode = _
PictureBoxSizeMode.CenterImage
PictureBoxSizeMode.Normal

62. Reading an Image
Call the FromFile method of the System.Drawing.Image class
The method accepts a file name as the argument

63. Reading an Image (Example)
Read the Image named "C:\House1.jpg" into the PictureBox control instance named picDemo
picDemo.Image = _
System.Drawing.Image.FromFile( _
"C:\House1.jpg")