 2002 Prentice Hall. All rights reserved. 1 Chapter 12 – Graphical User Interface Concepts: Part 1 Outline 12.1Introduction 12.2 Windows Forms 12.3 Event-Handling Model Basic Event Handling 12.4 Control Properties and Layout 12.5 Label s, TextBoxes and Buttons 12.6 GroupBox es and Panel s 12.7 CheckBox es and RadioButton s 12.8 PictureBox es 12.9 Mouse-Event Handling Keyboard-Event Handling

 2002 Prentice Hall. All rights reserved Introduction GUI –Graphical User Interface Allows visual interaction Event driven –User interaction generates events Distinctive “look” and “feel” Learn new applications more quickly

 2002 Prentice Hall. All rights reserved Introduction Fig. 12.1Sample Internet Explorer window with GUI components.

 2002 Prentice Hall. All rights reserved Introduction GUI Components –Objects with which user interacts Event generation –Contained in Toolbox Control –Component with graphical representation

 2002 Prentice Hall. All rights reserved Introduction Fig. 12.2Some basic GUI components.

 2002 Prentice Hall. All rights reserved Windows Forms Form –Graphical element used to create GUIs –Click and drag component from Toolbox Code generated –Component is instantiated –Basic properties are set

 2002 Prentice Hall. All rights reserved Windows Forms Fig. 12.3Components and controls for Windows Forms.

 2002 Prentice Hall. All rights reserved Windows Forms Fig. 12.4Common Form properties and events.

 2002 Prentice Hall. All rights reserved Event-Handling Model Event handler –Method called by event –Receives event information Notion of delegates –Objects that reference methods –Act as intermediaries between objects creating events and methods handling events Event multicasting –Inclusion of multiple handlers for one event

 2002 Prentice Hall. All rights reserved Event-Handling Model Fig. 12.5Event-handling model using delegates. Object A raises event EDelegate for event E Handler 1 for event E Handler 3 for event E Handler 2 for event E calls

 2002 Prentice Hall. All rights reserved Event-Handling Model Fig. 12.6Events section of the Properties window.

 2002 Prentice Hall. All rights reserved. Outline 12 SimpleEvenExampl e.vb 1 ' Fig. 12.7: SimpleEventExample.vb 2 ' Program demonstrating simple event handler. 3 4 Public Class FrmSimple 5 Inherits System.Windows.Forms.Form 6 7 #Region " Windows Form Designer generated code " 8 9 Public Sub New() 10 MyBase.New() ' This call is required by the Windows Form Designer. 13 InitializeComponent() ' Add any initialization after the 17 ' InitializeComponent() call 18 End Sub ' New ' Form overrides dispose to clean up the component list. 21 Protected Overloads Overrides Sub Dispose( _ 22 ByVal disposing As Boolean) If disposing Then If Not (components Is Nothing) Then 27 components.Dispose() 28 End If End If MyBase.Dispose(disposing) 33 End Sub ' Dispose Friend WithEvents lblOutput As System.Windows.Forms.Label Beginning of Visual Studio generated code

 2002 Prentice Hall. All rights reserved. Outline 13 SimpleEvenExampl e.vb ' Required by the Windows Form Designer 38 Private components As System.ComponentModel.Container ' NOTE: The following procedure is required by 41 ' the Windows Form Designer. 42 ' It can be modified using the Windows Form Designer. 43 ' Do not modify it using the code editor. 44 _ 45 Private Sub InitializeComponent() 46 Me.lblOutput = New System.Windows.Forms.Label() 47 Me.SuspendLayout() 48 ' 49 'lblOutput 50 ' 51 Me.lblOutput.Location = New System.Drawing.Point(32, 48) 52 Me.lblOutput.Name = "lblOutput" 53 Me.lblOutput.Size = New System.Drawing.Size(168, 40) 54 Me.lblOutput.TabIndex = 0 55 Me.lblOutput.Text = "Click Me!" 56 ' 57 'FrmSimple 58 ' 59 Me.AutoScaleBaseSize = New System.Drawing.Size(5, 13) 60 Me.ClientSize = New System.Drawing.Size(272, 237) 61 Me.Controls.AddRange( _ 62 New System.Windows.Forms.Control() {Me.lblOutput}) Me.Name = "FrmSimple" 65 Me.Text = "SimpleEventExample" 66 Me.ResumeLayout(False) 67 End Sub #End Region 70 End of Visual Studio generated code

 2002 Prentice Hall. All rights reserved. Outline 14 SimpleEvenExampl e.vb 71 ' handler for click event on lblOutput 72 Private Sub lblOutput_Click(ByVal sender As Object, _ 73 ByVal e As System.EventArgs) Handles lblOutput.Click MessageBox.Show("Label was pressed") 76 End Sub ' lblOutput_Click End Class ' FrmSimpleExample Name of the handler followed by an underscore and the event name Reference to the object that generated the event Event arguments object Event-handling code displays a message box

 2002 Prentice Hall. All rights reserved Event-Handling Model Fig. 12.8List of Form events.

 2002 Prentice Hall. All rights reserved Event-Handling Model Fig. 12.9Details of Click event.

 2002 Prentice Hall. All rights reserved Control Properties and Layout Fig Class Control properties and methods.

 2002 Prentice Hall. All rights reserved Control Properties and Layout Method Focus –Transfers focus to control Active control Method Hide –Hides control Visible property is false Method Show –Shows control Visible property is true

 2002 Prentice Hall. All rights reserved Control Properties and Layout Anchoring –Specifying layout of controls within container –Controls remain fixed distances from inside of container Docking –Sets dimensions of control to dimensions of container at all times

 2002 Prentice Hall. All rights reserved Control Properties and Layout Fig Anchoring demonstration.

 2002 Prentice Hall. All rights reserved Control Properties and Layout Fig Manipulating the Anchor property of a control.

 2002 Prentice Hall. All rights reserved Control Properties and Layout Fig Docking demonstration.

 2002 Prentice Hall. All rights reserved Control Properties and Layout Fig Control layout properties.

 2002 Prentice Hall. All rights reserved Labels, TextBoxes and Buttons Label –Displays read-only text Textbox –Displays text –Text input by user Button –Click to trigger action

 2002 Prentice Hall. All rights reserved Labels, TextBoxes and Buttons Fig Common Label properties.

 2002 Prentice Hall. All rights reserved Labels, TextBoxes and Buttons Fig TextBox properties and events.

 2002 Prentice Hall. All rights reserved Labels, TextBoxes and Buttons Fig Button properties and events.

 2002 Prentice Hall. All rights reserved. Outline 28 LabelTextBoxButt onTest.vb 1 ' Fig : LabelTextBoxButtonTest.vb 2 ' Using a textbox, label and button to display the hidden 3 ' text in a password box. 4 5 Public Class FrmButtonTest 6 Inherits System.Windows.Forms.Form 7 8 ' Visual Studio.NET generated code 9 10 ' handles cmdShow_Click events 11 Private Sub cmdShow_Click(ByVal sender As System.Object, _ 12 ByVal e As System.EventArgs) Handles cmdShow.Click lblOutput.Text = txtInput.Text 15 End Sub ' cmdShow_Click End Class ' FrmButtonTest The label’s text property is set equal to the value of the textbox’s text property, which was entered by the user

 2002 Prentice Hall. All rights reserved GroupBoxes and Panels Groupboxes –Arrange controls on a GUI –Can display captions –Do not include scrollbars Panels –Arrange controls on a GUI –Cannot display captions –Include scrollbars

 2002 Prentice Hall. All rights reserved GroupBoxes and Panels Fig GroupBox properties. Fig Panel properties.

 2002 Prentice Hall. All rights reserved GroupBoxes and Panels Fig Creating a Panel with scrollbars.

 2002 Prentice Hall. All rights reserved. Outline 32 GroupBoxPanelExa mple.vb 1 ' Fig : GroupBoxPanelExample.vb 2 ' Using GroupBoxes and Panels to hold buttons. 3 4 Public Class FrmGroupBox 5 Inherits System.Windows.Forms.Form 6 7 ' Visual Studio.NET generated code 8 9 ' event handlers to change lblMessage 10 Private Sub cmdHi_Click(ByVal sender As System.Object, _ 11 ByVal e As System.EventArgs) Handles cmdHi.Click lblMessage.Text = "Hi pressed" 14 End Sub ' cmdHi_Click ' bye button handler 17 Private Sub cmdBye_Click(ByVal sender As System.Object, _ 18 ByVal e As System.EventArgs) Handles cmdBye.Click lblMessage.Text = "Bye pressed" 21 End Sub ' cmdBye_Click ' far left button handler 24 Private Sub cmdLeft_Click(ByVal sender As System.Object, _ 25 ByVal e As System.EventArgs) Handles cmdLeft.Click lblMessage.Text = "Far left pressed" 28 End Sub ' cmdLeft_Click 29 Event handling code displays the appropriate text property for lbl.Message

 2002 Prentice Hall. All rights reserved. Outline 33 GroupBoxPanelExa mple.vb 30 ' far right button handler 31 Private Sub cmdRight_Click(ByVal sender As System.Object, _ 32 ByVal e As System.EventArgs) Handles cmdRight.Click lblMessage.Text = "Far right pressed" 35 End Sub ' cmdRight_Click End Class ' FrmGroupBox

 2002 Prentice Hall. All rights reserved CheckBoxes and RadioButtons State Buttons –CheckBoxes Any number can be checked at a time –RadioButtons Usually organized in groups and only one checked at a time

 2002 Prentice Hall. All rights reserved CheckBoxes and RadioButtons Fig CheckBox properties and events.

 2002 Prentice Hall. All rights reserved. Outline 36 CheckBoxTest.vb 1 ' Fig : CheckBoxTest.vb 2 ' Using CheckBoxes to toggle italic and bold styles. 3 4 Public Class FrmCheckBox 5 Inherits System.Windows.Forms.Form 6 7 ' Visual Studio.NET IDE generated code 8 9 ' use Xor to toggle italic, keep other styles same 10 Private Sub chkItalic_CheckedChanged _ 11 (ByVal sender As System.Object, ByVal e As System.EventArgs) _ 12 Handles chkItalic.CheckedChanged lblOutput.Font = New Font(lblOutput.Font.Name, _ 15 lblOutput.Font.Size, lblOutput.Font.Style _ 16 Xor FontStyle.Italic) 17 End Sub ' chkItalic_CheckedChanged ' use Xor to toggle bold, keep other styles same 20 Private Sub chkBold_CheckedChanged _ 21 (ByVal sender As System.Object, ByVal e As System.EventArgs) _ 22 Handles chkBold.CheckedChanged lblOutput.Font = New Font(lblOutput.Font.Name, _ 25 lblOutput.Font.Size, lblOutput.Font.Style _ 26 Xor FontStyle.Bold) 27 End Sub ' chkBold_CheckedChanged End Class ' FrmCheckBox

 2002 Prentice Hall. All rights reserved. Outline 37 CheckBoxTest.vb

 2002 Prentice Hall. All rights reserved CheckBoxes and RadioButtons Fig RadioButton properties and events. 訂正 : p502 上方 CheckedChanged 段之第二行, 將 “Textbox” 改為 “RadioButton”

 2002 Prentice Hall. All rights reserved. Outline 39 RadioButtonTest. vb 1 ' Fig : RadioButtonTest.vb 2 ' Using RadioButtons to set message window options. 3 4 Public Class FrmRadioButton 5 Inherits System.Windows.Forms.Form 6 7 Private iconType As MessageBoxIcon 8 Private buttonType As MessageBoxButtons 9 10 ' Visual Studio.NET generated code ' display message box and obtain dialogue button clicked 13 Private Sub cmdDisplay_Click(ByVal sender _ 14 As System.Object, ByVal e As System.EventArgs) _ 15 Handles cmdDisplay.Click Dim dialog As DialogResult = MessageBox.Show( _ 18 "This is Your Custom MessageBox", "VB", buttonType, _ 19 iconType) ' check for dialog result and display on label 22 Select Case dialog Case DialogResult.OK 25 lblDisplay.Text = "OK was pressed" Case DialogResult.Cancel 28 lblDisplay.Text = "Cancel was pressed" Case DialogResult.Abort 31 lblDisplay.Text = "Abort was pressed" Case DialogResult.Retry 34 lblDisplay.Text = "Retry was pressed" 35

 2002 Prentice Hall. All rights reserved. Outline 40 RadioButtonTest. vb 36 Case DialogResult.Ignore 37 lblDisplay.Text = "Ignore was pressed" Case DialogResult.Yes 40 lblDisplay.Text = "Yes was pressed" Case DialogResult.No 43 lblDisplay.Text = "No was pressed" 44 End Select End Sub ' cmdDisplay_Click ' set button type to OK 49 Private Sub radOk_CheckedChanged(ByVal sender _ 50 As System.Object, ByVal e As System.EventArgs) _ 51 Handles radOk.CheckedChanged buttonType = MessageBoxButtons.OK 54 End Sub ' radOk_CheckedChanged ' set button type to OkCancel 57 Private Sub radOkCancel_CheckedChanged(ByVal sender _ 58 As System.Object, ByVal e As System.EventArgs) _ 59 Handles radOkCancel.CheckedChanged buttonType = MessageBoxButtons.OKCancel 62 End Sub ' radOkCancel_CheckedChanged ' set button type to AbortRetryIgnore 65 Private Sub radAbortRetryIgnore_CheckedChanged(ByVal sender _ 66 As System.Object, ByVal e As System.EventArgs) _ 67 Handles radAbortRetryIgnore.CheckedChanged buttonType = MessageBoxButtons.AbortRetryIgnore 70 End Sub ' radAbortRetryIgnore_CheckedChanged

 2002 Prentice Hall. All rights reserved. Outline 41 RadioButtonTest. vb ' set button type to YesNoCancel 73 Private Sub radYesNoCancel_CheckedChanged(ByVal sender _ 74 As System.Object, ByVal e As System.EventArgs) _ 75 Handles radYesNoCancel.CheckedChanged buttonType = MessageBoxButtons.YesNoCancel 78 End Sub ' radYesNoCancel_CheckedChanged ' set button type to YesNo 81 Private Sub radYesNo_CheckedChanged(ByVal sender _ 82 As System.Object, ByVal e As System.EventArgs) _ 83 Handles radYesNo.CheckedChanged buttonType = MessageBoxButtons.YesNo 86 End Sub ' radYesNo_CheckedChanged ' set button type to RetryCancel 89 Private Sub radRetryCancel_CheckedChanged(ByVal sender _ 90 As System.Object, ByVal e As System.EventArgs) _ 91 Handles radRetryCancel.CheckedChanged buttonType = MessageBoxButtons.RetryCancel 94 End Sub ' radRetryCancel_CheckedChanged ' set icon type to Asterisk when Asterisk checked 97 Private Sub radAsterisk_CheckedChanged(ByVal sender _ 98 As System.Object, ByVal e As System.EventArgs) _ 99 Handles radAsterisk.CheckedChanged iconType = MessageBoxIcon.Asterisk 102 End Sub ' radAsterisk_CheckedChanged 103

 2002 Prentice Hall. All rights reserved. Outline 42 RadioButtonTest. vb 104 ' set icon type to Error when Error checked 105 Private Sub radError_CheckedChanged(ByVal sender _ 106 As System.Object, ByVal e As System.EventArgs) _ 107 Handles radError.CheckedChanged iconType = MessageBoxIcon.Error 110 End Sub ' radError_CheckedChanged ' set icon type to Exclamation when Exclamation checked 113 Private Sub radExclamation_CheckedChanged(ByVal sender _ 114 As System.Object, ByVal e As System.EventArgs) _ 115 Handles radExclamation.CheckedChanged iconType = MessageBoxIcon.Exclamation 118 End Sub ' radExclamation_CheckedChanged ' set icon type to Hand when Hand checked 121 Private Sub radHand_CheckedChanged(ByVal sender _ 122 As System.Object, ByVal e As System.EventArgs) _ 123 Handles radHand.CheckedChanged iconType = MessageBoxIcon.Hand 126 End Sub ' radHand_CheckedChanged ' set icon type to Information when Information checked 129 Private Sub radInformation_CheckedChanged(ByVal sender _ 130 As System.Object, ByVal e As System.EventArgs) _ 131 Handles radInformation.CheckedChanged iconType = MessageBoxIcon.Information 134 End Sub ' radInformation_CheckedChanged 135

 2002 Prentice Hall. All rights reserved. Outline 43 RadioButtonTest. vb 136 ' set icon type to Question when Question checked 137 Private Sub radQuestion_CheckedChanged(ByVal sender _ 138 As System.Object, ByVal e As System.EventArgs) _ 139 Handles radQuestion.CheckedChanged iconType = MessageBoxIcon.Question 142 End Sub ' radQuestion_CheckedChanged ' set icon type to Stop when Stop checked 145 Private Sub radStop_CheckedChanged(ByVal sender _ 146 As System.Object, ByVal e As System.EventArgs) _ 147 Handles radStop.CheckedChanged iconType = MessageBoxIcon.Stop 150 End Sub ' radStop_CheckedChanged ' set icon type to Warning when Warning checked 153 Private Sub radWarning_CheckedChanged(ByVal sender _ 154 As System.Object, ByVal e As System.EventArgs) _ 155 Handles radWarning.CheckedChanged iconType = MessageBoxIcon.Warning 158 End Sub ' radWarning_CheckedChanged End Class ' FrmRadioButtons

 2002 Prentice Hall. All rights reserved. Outline 44 RadioButtonTest. vb

 2002 Prentice Hall. All rights reserved. Outline 45 RadioButtonTest. vb

 2002 Prentice Hall. All rights reserved. Outline 46 RadioButtonTest. vb

 2002 Prentice Hall. All rights reserved. Outline 47 RadioButtonTest. vb

 2002 Prentice Hall. All rights reserved PictureBoxes PictureBoxes –Display images Bitmap GIF (Graphics Interchange Format) JPEG (Joint Photographic Expert Group) Metafile –Image property Image to be displayed

 2002 Prentice Hall. All rights reserved PictureBoxes Fig PictureBox properties and events.

 2002 Prentice Hall. All rights reserved. Outline 50 PictureBoxTest.v b 1 ' Fig : PictureBoxTest.vb 2 ' Using a PictureBox to display images. 3 4 Imports System.IO 5 6 Public Class FrmPictureBox 7 Inherits System.Windows.Forms.Form 8 9 Private imageNumber As Integer = ' Visual Studio.NET generated code ' replace image in picImage 14 Private Sub picImage_Click(ByVal sender As System.Object, _ 15 ByVal e As System.EventArgs) Handles picImage.Click ' imageNumber from 0 to 2 18 imageNumber = (imageNumber + 1) Mod ' create Image object from file, display in PictureBox 21 picImage.Image = Image.FromFile _ 22 (Directory.GetCurrentDirectory & "\images\image" & _ 23 imageNumber & ".bmp") 24 End Sub ' picImage_Click End Class ' FrmPictureBox An image object is created from file and set as the PictureBox’s image property

 2002 Prentice Hall. All rights reserved. Outline 51

 2002 Prentice Hall. All rights reserved Mouse-Event Handling MouseEventArgs Properties –Button Mouse button pressed –Clicks Number of mouse clicks –X X-coordinate of event, within the control –Y Y-coordinate of event, within the control

 2002 Prentice Hall. All rights reserved Mouse-Event Handling Fig Mouse events, delegates and event arguments.

 2002 Prentice Hall. All rights reserved. Outline 54 Painter.vb 1 ' Fig : Painter.vb 2 ' Using the mouse to draw on a form. 3 4 Public Class FrmPainter 5 Inherits System.Windows.Forms.Form 6 7 Dim shouldPaint As Boolean = False 8 9 ' Visual Studio.NET IDE generated code ' draw circle if shouldPaint is True 12 Private Sub FrmPainter_MouseMove( _ 13 ByVal sender As System.Object, _ 14 ByVal e As System.Windows.Forms.MouseEventArgs) _ 15 Handles MyBase.MouseMove ' paint circle if mouse pressed 18 If shouldPaint Then 19 Dim graphic As Graphics = CreateGraphics() graphic.FillEllipse _ 22 (New SolidBrush(Color.BlueViolet), e.X, e.Y, 4, 4) 23 End If End Sub ' FrmPainter_MouseMove ' set shouldPaint to True 28 Private Sub FrmPainter_MouseDown(ByVal sender As Object, _ 29 ByVal e As System.Windows.Forms.MouseEventArgs) _ 30 Handles MyBase.MouseDown shouldPaint = True 33 End Sub ' FrmPainter_MousDown 34 Event handling for Mouse event MouseDown sets variable shouldPaint to True Event handling code begins for event MouseMove

 2002 Prentice Hall. All rights reserved. Outline 55 Painter.vb 35 ' set shouldPaint to False 36 Private Sub FrmPainter_MouseUp(ByVal sender As Object, _ 37 ByVal e As System.Windows.Forms.MouseEventArgs) _ 38 Handles MyBase.MouseUp shouldPaint = False 41 End Sub ' FrmPainter_MouseUp End Class ' FrmPainter Event handling for Mouse event MouseUp sets variable shouldPaint to False

 2002 Prentice Hall. All rights reserved Keyboard-Event Handling Key Events –Generated when keys are pressed and released –KeyPress Can return a Char for any ASCII character pressed –KeyUp and KeyDown Test for special modifier keys Use KeyEventArgs

 2002 Prentice Hall. All rights reserved Keyboard-Event Handling Fig Keyboard events, delegates and event arguments.

 2002 Prentice Hall. All rights reserved. Outline 58 KeyDemo.vb 1 ' Fig : KeyDemo.vb 2 ' Displaying information about a user-pressed key. 3 4 Public Class FrmKeyDemo 5 Inherits System.Windows.Forms.Form 6 7 ' Visual Studio.NET generated code 8 9 ' event handler for key press 10 Private Sub FrmKeyDemo_KeyPress(ByVal sender As System.Object, _ 11 ByVal e As System.windows.Forms.KeyPressEventArgs) _ 12 Handles MyBase.KeyPress lblCharacter.Text = "Key pressed: " & e.KeyChar 15 End Sub ' display modifier keys, key code, key data and key value 18 Private Sub FrmKeyDemo_KeyDown(ByVal sender As System.Object, _ 19 ByVal e As System.Windows.Forms.KeyEventArgs) _ 20 Handles MyBase.KeyDown lblInformation.Text = "" ' if key is Alt 25 If e.Alt Then 26 lblInformation.Text &= "Alt: Yes" & vbCrLf 27 Else 28 lblInformation.Text &= "Alt: No" & vbCrLf 29 End If 30 KeyDown event handler displays information from its KeyEventArgs object KeyPress event handler accesses the KeyChar property of the KeyPressEventArgs object and displays the Key

 2002 Prentice Hall. All rights reserved. Outline 59 KeyDemo.vb 31 ' if key is Shift 32 If e.Shift Then 33 lblInformation.Text &= "Shift: Yes" & vbCrLf 34 Else 35 lblInformation.Text &= "Shift: No" & vbCrLf 36 End If ' if key is Ctrl 39 If e.Control Then 40 lblInformation.Text &= "Ctrl: Yes" & vbCrLf & _ 41 "KeyCode: " & e.KeyCode.ToString & vbCrLf & _ 42 "KeyData: " & e.KeyData.ToString & vbCrLf & _ 43 "KeyValue: " & e.KeyValue 44 Else 45 lblInformation.Text &= "Ctrl: No" & vbCrLf & _ 46 "KeyCode: " & e.KeyCode.ToString & vbCrLf & _ 47 "KeyData: " & e.KeyData.ToString & vbCrLf & _ 48 "KeyValue: " & e.KeyValue 49 End If End Sub ' FrmKeyDemo_KeyDown ' clear labels when key is released 54 Private Sub FrmKeyDemo_KeyUp(ByVal sender As System.Object, _ 55 ByVal e As System.windows.Forms.KeyEventArgs) _ 56 Handles MyBase.KeyUp lblInformation.Text = "" 59 lblCharacter.Text = "" 60 End Sub ' FrmKeyDemo_KeyUp End Class ' FrmKeyDemo The KeyCode property returns a Keys enumeration, which must be converted to a String via method ToString Both labels are cleared when a key is released

 2002 Prentice Hall. All rights reserved. Outline 60 KeyDemo.vb