GUI Concepts - 3GUI Concepts - 3

•Menus•Creating Other Forms•Visual Inheritance

Outline

Menus• Menu

– provides groups of related commands.

• Menu items– Commands or options in menu

• Sub-menu– Menu within a menu

• Hot keys– Alt key shortcuts

• Press Alt + underlined letter in desired menu item

Menus

D C

All menu items can have Alt key shortcuts which are accessed by pressing Alt and the underlined letter (for example, Alt + F expands the File menu).

Some menu items display checkmarks,usually indicating that multiple options on the menu can be selected at once.

Menus that are not top-level menus can have shortcut keys as well (combinationsof Ctrl, Shift, Alt, F1, F2, letter keys, etc.).

MenusTo create a menu, open the Toolbox and drag a MainStrip control onto the form. This creates a menu bar on the top of the form and places a MainStrip icon at the bottom of the IDE.

To add command names to the menu, click the Type Here textbox and type the menu command’s name.

Menus

To create an access shortcut (or keyboard shortcut), type an ampersand (&) in front of the character to be underlined. For example, to create the File menu item, type &File.

Separator bars are inserted by right-clicking the menu and selecting Insert Separator or by typing “-”for the menu text.

• Buttons also can have access shortcuts. Place the & symbol immediately before the desired character. To click the button, the user then presses Alt and the underlined character.

• It is convention to place an ellipsis (…) after a menu item that display a dialog (such as Save As...).

MenusMainMenu and MenuItem events and properties

Description / Delegate and Event Arguments

MainMenu Properties

MenuItems Lists the MenuItems that are contained in the MainMenu.

RightToLeft Causes text to display from right to left. Useful for languages, such as Arabic, that are read from right to left.

MenuItem Properties

Checked Indicates whether a menu item is checked (according to property RadioCheck). Default value is False, meaning that the menu item is unchecked.

Index Specifies an item’s position in its parent menu. A value of 0 places the MenuItem at the beginning of the menu.

MenuItems Lists the submenu items for a particular menu item.

RadioCheck Specifies whether a selected menu item appears as a radio button (black circle) or as a checkmark. True displays a radio button, and False displays a checkmark; default False.

Shortcut Specifies the shortcut key for the menu item (e.g., Ctrl + F9 is equivalent to clicking a specific item).

ShowShortcut Indicates whether a shortcut key is shown beside menu item text. Default is True, which displays the shortcut key.

Text Specifies the menu item’s text. To create an Alt access shortcut, precede a character with & (e.g., &File for File).

Common Event (Delegate EventHandler, event arguments EventArgs)

Click Generated when item is clicked or shortcut key is used. This is the default event when the menu is double-clicked in designer.

Fig. 13.4 MainMenu and MenuItem properties and events.

1 ' Fig 13.5: MenuTest.vb2 ' Using menus to change font colors and styles.3 4 Public Class FrmMenu5 Private Sub mnuitmAbout_Click( _6 ByVal sender As System.Object, _7 ByVal e As System.EventArgs) Handles mnuitmAbout.Click8 9 MessageBox.Show("This is an example" & vbCrLf & _10 "of using menus.", "About", MessageBoxButtons.OK, _11 MessageBoxIcon.Information)12 End Sub ' mnuitmAbout_Click13 14 ' exit program15 Private Sub mnuitmExit_Click( _16 ByVal sender As System.Object, _17 ByVal e As System.EventArgs) Handles mnuitmExit.Click18 19 Application.Exit()20 End Sub ' mnuitmExit_Click

This event handler displays a message box when the about

menu item in the file menu is clicked

This event handler terminates theapplication when the exit menu item

in the file menu is clicked

21 ' reset font color 22 Private Sub ClearColor()23 24 ' clear all checkmarks25 mnuitmBlack.Checked = False26 mnuitmBlue.Checked = False27 mnuitmRed.Checked = False28 mnuitmGreen.Checked = False29 End Sub ' ClearColor30 31 ' update menu state and color display black32 Private Sub mnuitmBlack_Click(ByVal sender As System.Object, _33 ByVal e As System.EventArgs) Handles mnuitmBlack.Click34 35 ' reset checkmarks for color menu items36 ClearColor()37 38 ' set color to black39 lblDisplay.ForeColor = Color.Black40 mnuitmBlack.Checked = True41 End Sub ' mnuitmBlack_Click

Each color menu item must bemutually exclusive, so each event handler calls method ClearColor

42 ' update menu state and color display blue43 Private Sub mnuitmBlue_Click(ByVal sender As System.Object, _44 ByVal e As System.EventArgs) Handles mnuitmBlue.Click45 46 ' reset checkmarks for color menu items47 ClearColor()48 49 ' set color to blue50 lblDisplay.ForeColor = Color.Blue51 mnuitmBlue.Checked = True52 End Sub ' mnuitmBlue_Click53 54 ' update menu state and color display red55 Private Sub mnuitmRed_Click(ByVal sender As System.Object, _56 ByVal e As System.EventArgs) Handles mnuitmRed.Click57 58 ' reset checkmarks for color menu items59 ClearColor()60 61 ' set color to red62 lblDisplay.ForeColor = Color.Red63 mnuitmRed.Checked = True64 End Sub ' mnuitmRed_Click

65 ' update menu state and color display green66 Private Sub mnuitmGreen_Click(ByVal sender As System.Object, _67 ByVal e As System.EventArgs) Handles mnuitmGreen.Click68 69 ' reset checkmarks for color menu items70 ClearColor()71 72 ' set color to green73 lblDisplay.ForeColor = Color.Green74 mnuitmGreen.Checked = True75 End Sub ' mnuitmGreen_Click76 77 ' reset font type78 Private Sub ClearFont()79 80 ' clear all checkmarks81 mnuitmTimes.Checked = False82 mnuitmCourier.Checked = False83 mnuitmComic.Checked = False84 End Sub ' ClearFont85

86 ' update menu state and set font to Times87 Private Sub mnuitmTimes_Click(ByVal sender As System.Object, _88 ByVal e As System.EventArgs) Handles mnuitmTimes.Click89 90 ' reset checkmarks for font menu items91 ClearFont()92 93 ' set Times New Roman font94 mnuitmTimes.Checked = True95 lblDisplay.Font = New Font("Times New Roman", 30, _96 lblDisplay.Font.Style)97 End Sub ' mnuitmTimes_Click98 99 ' update menu state and set font to Courier100 Private Sub mnuitmCourier_Click(ByVal sender As System.Object, _101 ByVal e As System.EventArgs) Handles mnuitmCourier.Click102 103 ' reset checkmarks for font menu items104 ClearFont()105 106 ' set Courier font107 mnuitmCourier.Checked = True108 lblDisplay.Font = New Font("Courier New", 30, _109 lblDisplay.Font.Style)110 End Sub ' mnuitmCourier_Click

Each font menu item must bemutually exclusive, so each eventhandler calls method ClearFont

111 112 ' update menu state and set font to Comic Sans MS113 Private Sub mnuitmComic_Click(ByVal sender As System.Object, _114 ByVal e As System.EventArgs) Handles mnuitmComic.Click115 116 ' reset check marks for font menu items117 ClearFont()118 119 ' set Comic Sans font120 mnuitmComic.Checked = True121 lblDisplay.Font = New Font("Comic Sans MS", 30, _122 lblDisplay.Font.Style)123 End Sub ' mnuitmComic_Click 124 125 ' toggle checkmark and toggle bold style126 Private Sub mnuitmBold_Click( _127 ByVal sender As System.Object, _128 ByVal e As System.EventArgs) Handles mnuitmBold.Click129 130 ' toggle checkmark131 mnuitmBold.Checked = Not mnuitmBold.Checked132 133 ' use Xor to toggle bold, keep all other styles134 lblDisplay.Font = New Font( _135 lblDisplay.Font.FontFamily, 30, _136 lblDisplay.Font.Style Xor FontStyle.Bold)137 End Sub ' mnuitmBold_Click

138 139 ' toggle checkmark and toggle italic style140 Private Sub mnuitmItalic_Click( _141 ByVal sender As System.Object, _142 ByVal e As System.EventArgs) Handles mnuitmItalic.Click143 144 ' toggle checkmark145 mnuitmItalic.Checked = Not mnuitmItalic.Checked146 147 ' use Xor to toggle italic, keep all other styles148 lblDisplay.Font = New Font( _149 lblDisplay.Font.FontFamily, 30, _150 lblDisplay.Font.Style Xor FontStyle.Italic)151 End Sub ' mnuitmItalic_Click152 153 End Class ' FrmMenu

Menus

Demo

Example – Long / Short Menu

Public Class Form1 Private Sub MenuSize_Click(ByVal sender As System.Object, ByVal

e As System.EventArgs) Handles MenuSize.Click If MenuSize.Text = "Short Menu" Then MenuSize.Text = "Long Menu" Else MenuSize.Text = "Short Menu" End If mFontUnderline.Visible = Not mFontUnderline.Visible mFontStrike.Visible = Not mFontStrike.Visible mFontSmallCaps.Visible = Not mFontSmallCaps.Visible mFontAllCaps.Visible = Not mFontAllCaps.Visible End Sub

1 -Adding a New Form to the Project • You can add a new

form to the project with which you are working.

• To do that, right click on the project name>Add

• Select Windows Form from the window and click Add to add a new form to the project.

Creating other Forms

• To run the application with other Startup object: Right-click on the project name in Solution Explorer window and select Properties which displays the Property Pages window.

• On this window click the drop-down box which is labeled as Startup Object. Doing that displays all the forms available in the project.

• Select the form which you want to be displayed when you run the application.

• Now, when you run the application, the form you assigned as Startup object will be displayed.

2- Working with Multiple Forms

Public Class Form1

Private Sub btnFrm2_Click(ByVal sender As _ System.Object, ByVal e As System.EventArgs) _ Handles btnFrm2.Click Form2.Show() Me.Hide() Form3.Hide() End Sub

Private Sub btnFrm3_Click(ByVal sender As _ System.Object, ByVal e As System.EventArgs) _ Handles btnFrm3.Click

Form3.Show() Me.Hide() Form2.Hide() End SubEnd Class

Public Class Form2 Private Sub btnFrm1_Click(ByVal _ sender As System.Object, ByVal e As _ System.EventArgs) Handles _ btnFrm1.Click Form1.Show() Me.Hide() End SubEnd Class

Public Class Form3 Private Sub btnFrm1_Click(ByVal _ sender As System.Object, ByVal e As _ System.EventArgs) Handles _ btnFrm1.Click Form1.Show() Me.Hide() End SubEnd Class

• In OOP, Inheritance is the ability to use all of the functionality of an existing class, and extend those capabilities without re-writing the original class.

• In .NET, inheritance is not just limited to designing classes but also extended to visual designing. So, what does it mean?

• Well, it means we can use inheritance in Form designing too, so this kind of usage is called Visual Inheritance.

• One of the main advantages of visual inheritance is it reduces or cuts down the development time, and helps in designing consistency in the Forms layouts.

Visual Inheritance

Visual Inheritance• Derived forms contain same functionality as Base form

including:– Properties– Methods– Variables– Controls– All visual aspects

• Sizing• Layout• Spacing• Colors and fonts

1 ' Fig. 13.39: FrmInheritance.vb2 ' Form template for use with visual inheritance.3 4 Imports System.Windows.Forms5 6 Public Class FrmInheritance7 Inherits Form8 9 ' invoked when user clicks Learn More button10 Private Sub cmdLearn_Click(ByVal sender As System.Object, _11 ByVal e As System.EventArgs) Handles cmdLearn.Click12 13 MessageBox.Show("Bugs, Bugs, Bugs is a product of " & _14 " Bug2Bug.com.", "Learn More", MessageBoxButtons.OK, _15 MessageBoxIcon.Information)16 End Sub ' cmdLearn_Click17 18 End Class ' FrmInheritance

lblBug

lblCopyright

cmdLearn

Example: 1- Create the Base Form

Example: 2- Run the Base Form to make sure it runs correctly

• To allow other forms to inherit from FrmInheritance, we must package FrmInheritance as a .dll.

• Right click the project's name in the Solution Explorer and choose Properties.

Example: 3- Packaging the Base Form

• Under Application > Application Type, change Type to Class Library.

•Building the project produces the .dll.

• To visually inherit from FrmInheritance, we create an empty project.

• From the Project menu, select Add Inherited Form... to display the Add New Item dialog.

• Select Inherited Form from the Templates pane. Clicking OK displays the Inheritance Picker tool.

Example: 4- Create an empty project to make the derived form

• The Inheritance Picker tool enables programmers to create a form which inherits from a specified form.• Click button Browse and select the .dll file corresponding to FrmInheritance. •This .dll file normally is located within the project’s bin directory. Click OK. •The Form Designer should now display the inherited form•We can add components to the form.

In the design view Visual Studio adds Glyphs to the image to let you know that these components are inherited, not actually in this form

No Glyphs, it is not inherited

1 ' Fig. 13.41: VisualTest.vb2 ' A form that uses visual inheritance.3 4 Public Class FrmVisualTest5 Inherits VisualForm.FrmInheritance6 7 8 ' invoke when user clicks Learn the Program button9 Private Sub cmdProgram_Click(ByVal sender As System.Object, _10 ByVal e As System.EventArgs) Handles cmdProgram.Click11 12 MessageBox.Show( _13 "This program was created by Deitel & Associates", _14 "Learn the Program", MessageBoxButtons.OK, _15 MessageBoxIcon.Information)16 End Sub ' cmdProgram_Click17 18 End Class ' FrmVisualTest

Components, layout andfunctionality of the base formare inherited by the new form

cmdProgramnew button added to form

Example: 5- Add new controls to the derived form

Reading Topics

• For more information on how to Access Controls on Other Forms: http://www.devcity.net/Articles/100/multipleforms2.aspx

• For more information on how to Use Events in Multiple Forms:http://www.devcity.net/Articles/102/multipleforms3.aspx