Introduction to GUI - Windows Forms, Event Handling, Control Properties, and Layout

1. Chapter 12 – Graphical User Interface Concepts: Part 1 Outline12.1 Introduction12.2   Windows Forms12.3   Event-Handling Model 12.3.1  Basic Event Handling12.4   Control Properties and Layout12.5   Labels, TextBoxes and Buttons12.6   GroupBoxes and Panels12.7   CheckBoxes and RadioButtons12.8   PictureBoxes12.9   Mouse-Event Handling12.10   Keyboard-Event Handling

2. 12.1 Introduction • GUI • Graphical User Interface • Allows visual interaction • Event driven • User interaction generates events • Distinctive “look” and “feel” • Learn new applications more quickly

3. 12.1 Introduction Fig. 12.1 Sample Internet Explorer window with GUI components.

4. 12.1 Introduction • GUI Components • Objects with which user interacts • Event generation • Contained in Toolbox • Control • Component with graphical representation

5. 12.1 Introduction Fig. 12.2 Some basic GUI components.

6. 12.2   Windows Forms • Form • Graphical element used to create GUIs • Click and drag component from Toolbox • Code generated • Component is instantiated • Basic properties are set

7. 12.2 Windows Forms Fig. 12.3 Components and controls for Windows Forms.

8. 12.2 Windows Forms Fig. 12.4 Common Form properties and events.

9. 12.3   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

10. calls Handler 1 for event E calls Object A raises event E Delegate for event E Handler 2 for event E Handler 3 for event E 12.3   Event-Handling Model Fig. 12.5 Event-handling model using delegates.

11. 12.3   Event-Handling Model Fig. 12.6 Events section of the Properties window.

12. Beginning of Visual Studiogenerated code 1 ' Fig. 12.7: SimpleEventExample.vb 2 ' Program demonstrating simple event handler. 3 4 PublicClass FrmSimple 5 Inherits System.Windows.Forms.Form 6 7#Region " Windows Form Designer generated code " 8 9 PublicSubNew() 10 MyBase.New() 11 12 ' This call is required by the Windows Form Designer. 13 InitializeComponent() 14 15 16 ' Add any initialization after the 17 ' InitializeComponent() call 18 EndSub ' New 19 20 ' Form overrides dispose to clean up the component list. 21 ProtectedOverloadsOverridesSub Dispose( _ 22 ByVal disposing AsBoolean) 23 24 If disposing Then 25 26 IfNot (components IsNothing) Then 27 components.Dispose() 28 EndIf 29 30 EndIf 31 32 MyBase.Dispose(disposing) 33 EndSub ' Dispose 34 35 FriendWithEvents lblOutput As System.Windows.Forms.Label SimpleEvenExample.vb

13. End of Visual Studiogenerated code 36 37 ' Required by the Windows Form Designer 38 Private components As System.ComponentModel.Container 39 40 ' 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 <System.Diagnostics.DebuggerStepThrough()> _ 45 PrivateSub 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}) 63 64 Me.Name = "FrmSimple" 65 Me.Text = "SimpleEventExample" 66 Me.ResumeLayout(False) 67 EndSub 68 69#End Region 70 SimpleEvenExample.vb

14. Reference to the objectthat generated the event Name of the handlerfollowed by an underscoreand the event name Event arguments object Event-handling codedisplays a message box 71 ' handler for click event on lblOutput 72PrivateSub lblOutput_Click(ByVal sender As Object, _ 73ByVal e As System.EventArgs) Handles lblOutput.Click 74 75 MessageBox.Show("Label was pressed") 76 EndSub ' lblOutput_Click 77 78 EndClass' FrmSimpleExample SimpleEvenExample.vb

15. 12.3   Event-Handling Model Fig. 12.8 List of Form events.

16. 12.3   Event-Handling Model Fig. 12.9 Details of Click event.

17. 12.4   Control Properties and Layout Fig. 12.10 Class Control properties and methods.

18. 12.4   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

19. 12.4   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

20. 12.4   Control Properties and Layout Fig. 12.11 Anchoring demonstration.

21. 12.4   Control Properties and Layout Fig. 12.12 Manipulating the Anchor property of a control.

22. 12.4   Control Properties and Layout Fig. 12.13 Docking demonstration.

23. 12.4   Control Properties and Layout Fig. 12.14 Control layout properties.

24. 12.5   Labels, TextBoxes and Buttons • Label • Displays read-only text • Textbox • Displays text • Text input by user • Button • Click to trigger action

25. 12.5   Labels, TextBoxes and Buttons Fig. 12.15 Common Label properties.

26. 12.5   Labels, TextBoxes and Buttons Fig. 12.16 TextBox properties and events.

27. 12.5   Labels, TextBoxes and Buttons Fig. 12.17 Button properties and events.

28. The label’s text property is setequal to the value of the textbox’stext property, which was entered by the user 1 ' Fig. 12.18: LabelTextBoxButtonTest.vb 2 ' Using a textbox, label and button to display the hidden 3 ' text in a password box. 4 5 PublicClass 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 13 14 lblOutput.Text = txtInput.Text 15 End Sub ' cmdShow_Click 16 17 End Class ' FrmButtonTest LabelTextBoxButtonTest.vb

29. 12.6   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

30. 12.6   GroupBoxes and Panels Fig. 12.19 GroupBox properties. Fig. 12.20 Panel properties.

31. 12.6   GroupBoxes and Panels Fig. 12.21 Creating a Panel with scrollbars.

32. Event handling code displays the appropriatetext property for lbl.Message 1 ' Fig. 12.22: 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 12 13 lblMessage.Text = "Hi pressed" 14 End Sub ' cmdHi_Click 15 16 ' bye button handler 17 Private Sub cmdBye_Click(ByVal sender As System.Object, _ 18 ByVal e As System.EventArgs) Handles cmdBye.Click 19 20 lblMessage.Text = "Bye pressed" 21 End Sub ' cmdBye_Click 22 23 ' far left button handler 24 Private Sub cmdLeft_Click(ByVal sender As System.Object, _ 25 ByVal e As System.EventArgs) Handles cmdLeft.Click 26 27 lblMessage.Text = "Far left pressed" 28 End Sub ' cmdLeft_Click 29 GroupBoxPanelExample.vb

33. 30 ' far right button handler 31 Private Sub cmdRight_Click(ByVal sender As System.Object, _ 32 ByVal e As System.EventArgs) Handles cmdRight.Click 33 34 lblMessage.Text = "Far right pressed" 35 End Sub ' cmdRight_Click 36 37 End Class ' FrmGroupBox GroupBoxPanelExample.vb

34. 12.7   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

35. 12.7   CheckBoxes and RadioButtons Fig. 12.23 CheckBox properties and events.

36. 1 ' Fig. 12.24: CheckBoxTest.vb 2 ' Using CheckBoxes to toggle italic and bold styles. 3 4 PublicClass 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 PrivateSub chkItalic_CheckedChanged _ 11 (ByVal sender As System.Object, ByVal e As System.EventArgs) _ 12 Handles chkItalic.CheckedChanged 13 14 lblOutput.Font = New Font(lblOutput.Font.Name, _ 15 lblOutput.Font.Size, lblOutput.Font.Style _ 16 Xor FontStyle.Italic) 17 EndSub' chkItalic_CheckedChanged 18 19 ' use Xor to toggle bold, keep other styles same 20 PrivateSub chkBold_CheckedChanged _ 21 (ByVal sender As System.Object, ByVal e As System.EventArgs) _ 22 Handles chkBold.CheckedChanged 23 24 lblOutput.Font = New Font(lblOutput.Font.Name, _ 25 lblOutput.Font.Size, lblOutput.Font.Style _ 26 Xor FontStyle.Bold) 27 EndSub' chkBold_CheckedChanged 28 29 End Class' FrmCheckBox CheckBoxTest.vb

37. CheckBoxTest.vb

38. 12.7   CheckBoxes and RadioButtons Fig. 12.25 RadioButton properties and events. 訂正: p502 上方 CheckedChanged 段之第二行, 將 “Textbox” 改為 “RadioButton”

39. 1 ' Fig. 12.26: RadioButtonTest.vb 2 ' Using RadioButtons to set message window options. 3 4 PublicClass 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 11 12 ' display message box and obtain dialogue button clicked 13 PrivateSub cmdDisplay_Click(ByVal sender _ 14 As System.Object, ByVal e As System.EventArgs) _ 15 Handles cmdDisplay.Click 16 17 Dim dialog As DialogResult = MessageBox.Show( _ 18 "This is Your Custom MessageBox", "VB", buttonType, _ 19 iconType) 20 21 ' check for dialog result and display on label 22 SelectCase dialog 23 24 Case DialogResult.OK 25 lblDisplay.Text = "OK was pressed" 26 27 Case DialogResult.Cancel 28 lblDisplay.Text = "Cancel was pressed" 29 30 Case DialogResult.Abort 31 lblDisplay.Text = "Abort was pressed" 32 33 Case DialogResult.Retry 34 lblDisplay.Text = "Retry was pressed" 35 RadioButtonTest.vb

40. 36 Case DialogResult.Ignore 37 lblDisplay.Text = "Ignore was pressed" 38 39 Case DialogResult.Yes 40 lblDisplay.Text = "Yes was pressed" 41 42 Case DialogResult.No 43 lblDisplay.Text = "No was pressed" 44 EndSelect 45 46 EndSub' cmdDisplay_Click 47 48 ' set button type to OK 49 PrivateSub radOk_CheckedChanged(ByVal sender _ 50 As System.Object, ByVal e As System.EventArgs) _ 51 Handles radOk.CheckedChanged 52 53 buttonType = MessageBoxButtons.OK 54 EndSub ' radOk_CheckedChanged 55 56 ' set button type to OkCancel 57 PrivateSub radOkCancel_CheckedChanged(ByVal sender _ 58 As System.Object, ByVal e As System.EventArgs) _ 59 Handles radOkCancel.CheckedChanged 60 61 buttonType = MessageBoxButtons.OKCancel 62 EndSub ' radOkCancel_CheckedChanged 63 64 ' set button type to AbortRetryIgnore 65 PrivateSub radAbortRetryIgnore_CheckedChanged(ByVal sender _ 66 As System.Object, ByVal e As System.EventArgs) _ 67 Handles radAbortRetryIgnore.CheckedChanged 68 69 buttonType = MessageBoxButtons.AbortRetryIgnore 70 End Sub ' radAbortRetryIgnore_CheckedChanged RadioButtonTest.vb

41. 71 72 ' set button type to YesNoCancel 73 PrivateSub radYesNoCancel_CheckedChanged(ByVal sender _ 74 As System.Object, ByVal e As System.EventArgs) _ 75 Handles radYesNoCancel.CheckedChanged 76 77 buttonType = MessageBoxButtons.YesNoCancel 78 EndSub ' radYesNoCancel_CheckedChanged 79 80 ' set button type to YesNo 81 PrivateSub radYesNo_CheckedChanged(ByVal sender _ 82 As System.Object, ByVal e As System.EventArgs) _ 83 Handles radYesNo.CheckedChanged 84 85 buttonType = MessageBoxButtons.YesNo 86 EndSub ' radYesNo_CheckedChanged 87 88 ' set button type to RetryCancel 89 PrivateSub radRetryCancel_CheckedChanged(ByVal sender _ 90 As System.Object, ByVal e As System.EventArgs) _ 91 Handles radRetryCancel.CheckedChanged 92 93 buttonType = MessageBoxButtons.RetryCancel 94 End Sub ' radRetryCancel_CheckedChanged 95 96 ' set icon type to Asterisk when Asterisk checked 97 PrivateSub radAsterisk_CheckedChanged(ByVal sender _ 98 As System.Object, ByVal e As System.EventArgs) _ 99 Handles radAsterisk.CheckedChanged 100 101 iconType = MessageBoxIcon.Asterisk 102 End Sub ' radAsterisk_CheckedChanged 103 RadioButtonTest.vb

42. 104 ' set icon type to Error when Error checked 105 PrivateSub radError_CheckedChanged(ByVal sender _ 106 As System.Object, ByVal e As System.EventArgs) _ 107 Handles radError.CheckedChanged 108 109 iconType = MessageBoxIcon.Error 110 End Sub ' radError_CheckedChanged 111 112 ' set icon type to Exclamation when Exclamation checked 113 PrivateSub radExclamation_CheckedChanged(ByVal sender _ 114 As System.Object, ByVal e As System.EventArgs) _ 115 Handles radExclamation.CheckedChanged 116 117 iconType = MessageBoxIcon.Exclamation 118 End Sub ' radExclamation_CheckedChanged 119 120 ' set icon type to Hand when Hand checked 121 PrivateSub radHand_CheckedChanged(ByVal sender _ 122 As System.Object, ByVal e As System.EventArgs) _ 123 Handles radHand.CheckedChanged 124 125 iconType = MessageBoxIcon.Hand 126 End Sub ' radHand_CheckedChanged 127 128 ' set icon type to Information when Information checked 129 PrivateSub radInformation_CheckedChanged(ByVal sender _ 130 As System.Object, ByVal e As System.EventArgs) _ 131 Handles radInformation.CheckedChanged 132 133 iconType = MessageBoxIcon.Information 134 End Sub ' radInformation_CheckedChanged 135 RadioButtonTest.vb

43. 136 ' set icon type to Question when Question checked 137 PrivateSub radQuestion_CheckedChanged(ByVal sender _ 138 As System.Object, ByVal e As System.EventArgs) _ 139 Handles radQuestion.CheckedChanged 140 141 iconType = MessageBoxIcon.Question 142 End Sub ' radQuestion_CheckedChanged 143 144 ' set icon type to Stop when Stop checked 145 PrivateSub radStop_CheckedChanged(ByVal sender _ 146 As System.Object, ByVal e As System.EventArgs) _ 147 Handles radStop.CheckedChanged 148 149 iconType = MessageBoxIcon.Stop 150 End Sub ' radStop_CheckedChanged 151 152 ' set icon type to Warning when Warning checked 153 PrivateSub radWarning_CheckedChanged(ByVal sender _ 154 As System.Object, ByVal e As System.EventArgs) _ 155 Handles radWarning.CheckedChanged 156 157 iconType = MessageBoxIcon.Warning 158 End Sub ' radWarning_CheckedChanged 159 160 EndClass' FrmRadioButtons RadioButtonTest.vb

44. RadioButtonTest.vb

45. RadioButtonTest.vb

46. RadioButtonTest.vb

47. RadioButtonTest.vb

48. 12.8   PictureBoxes • PictureBoxes • Display images • Bitmap • GIF (Graphics Interchange Format) • JPEG (Joint Photographic Expert Group) • Metafile • Image property • Image to be displayed

49. 12.8   PictureBoxes Fig. 12.30 PictureBox properties and events.

50. An image object is createdfrom file and set as the PictureBox’s image property 1 ' Fig. 12.31: 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 = -1 10 11 ' Visual Studio.NET generated code 12 13 ' replace image in picImage 14 Private Sub picImage_Click(ByVal sender As System.Object, _ 15 ByVal e As System.EventArgs) Handles picImage.Click 16 17 ' imageNumber from 0 to 2 18 imageNumber = (imageNumber + 1) Mod3 19 20 ' 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 25 26 End Class ' FrmPictureBox PictureBoxTest.vb