IS 350 Course Introduction

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

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

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

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

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

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

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

A poor user interface

Figure 3-4: An improved user interface

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

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

Selected Visual Studio windows

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

Solution Explorer for a Windows Forms Application project

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

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

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

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

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

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

Organization of the Toolbox controls

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

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

The Properties window

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

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

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

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

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

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

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

Hierarchical organization of control classes

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

Executing an Event Handler

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

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

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

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"

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

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

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

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

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")