Windows Forms GUI A Deeper Look Menus Month

Windows Forms GUI: A Deeper Look Menus , Month. Calender, Date. Time. Picker, MDI , Tree View, List View,

1. What is the Menus? © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 2

How to add Menu to your program? (1 -2) Drag and drop Menu. Strip in your form or double click on Menu. Strip © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 3

How to add Menu to your program? (2 -2) 1. Click here 3. It will look like this 2. Type the name of the menu you want then press Enter 4. If you run the program it will look like this © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 4

Different Types of Items Look like this in the program © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 5

Adding a second level items to the Menu. Item To create items in File menu that we created in slide#4, 1. Click inside the Type Here box. 2. Enter the name of the item you want for example “New” 3. Press the enter key 4. Your menu will then look like this: © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 6

Different types of items in the second level items to the Menu. Item © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 7

Enabled Property of the menu. Item You can disable any of the items of the menu items by changing the property “Enabled” to False By changing the property Enabled to False, this prevents the user from clicking the menu. Item “Save As” as in the example below: So the menu. Item “Save As” appears as follows © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 8

Tool. Tip. Text Property of the menu. Item You can show a tool tip text for your menu item to explain its job. In the following example, the menu. Item “Save As” we set the Tool. Tip. Text property to the following text: “This item saves your file” So the menu. Item “Save As” appears as follows © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 9

Visible Property of the menu. Item You can hide or show your menu item using the menu. Item property “Visible” In the following example, the menu. Item “Save As” we set the Visible property to false. When we run the program the “Save As” menu. Item is hidden: So the menu. Item “Save As” appears as follows © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 10

Shortcut Keys in Menus Shortcut Keys ◦ All menu items can have Alt key shortcuts (also called access shortcuts or hotkeys), ◦ They are accessed by pressing Alt and the underlined letter (for example, Alt F expands the File menu). © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 11

Setting the Shortcut Key in Menus 1. Click on the menu you want to add shortcut key for (click on File) 2. Go to the Shortcut. Keys property in the Property Window of the File Menu. Item 3. Open the dropdown list and select the keys you want for example: • Select Alt • From the drop down list of Keys, choose the letter F © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 12

Setting the Shortcut Key in Menus When you Run the program you can open the file menu by pressing Alt + F © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 13

Another Example on Adding a Shortcut Key on a second level menu item 1. Click on the New menu Item 2. Set the shortcut key property Ex: Alt+A 3. The shortcut. Key is displayed. 4. When you Run you program, you can open the New menu by clicking Alt+A © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 14

Some Shortcutkey properties You can hide the shortcut keys by setting property Show. Shortcut. Keys to False You can modify how the control keys are displayed in the menu item by modifying property Shortcut. Key. Display. String. The shortcutkey string that appears in front of the menu. Item The shortcutkey property Control the appearance of the shortcutkey © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 15

© 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 16

© 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 17

Adding events to menu items (1 -3) You can link an event to a menu item so that when a user click on the name of the menu item an event happens. Steps to add an event to existing menu item is as follows: 1. In the design view, double click on the menu. Item you want to add the event to, for example New menuitem: 1 © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 18

Adding events to menu items (2 -3) 2. This will direct you to the code view with an event that is linked to the New menu item as follows: Private Sub New. Tool. Strip. Menu. Item_Click(By. Val sender As System. Object, By. Val e As System. Event. Args) Handles New. Tool. Strip. Menu. Item. Click End Sub 3. Write any code you want inside the body of the New menu. Item sub procedure as follows: Private Sub New. Tool. Strip. Menu. Item_Click(By. Val sender As System. Object, By. Val e As System. Event. Args) Handles New. Tool. Strip. Menu. Item. Click Label 1. Text = "Hello World" Label 1. Back. Color = Color. Yellow Message. Box. Show("Hello World : )") End Sub © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 19

Adding events to menu items (3 -3) 4. Now when we run the program it look like this. After we click on the New menu. Item the label will be changed © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 20

Date and Time Controls In vb. net we have two controls to retrieve date and time information Month. Calendar and Date. Time. Picker. A. The Month. Calendar control displays a monthly calendar. B. The Date. Time. Picker control is similar to the Month. Calendar control, but displays the calendar when the user clicks the control’s down arrow. © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 21

A. Month. Calendar Control A range of dates can be selected by clicking one date on the calendar, then holding the Shift key while clicking another date. © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 22

Example: Month. Calender 1. (Adding Month. Calender) Drag and drop Month. Calendar control from the toolbox menu as follows: © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 23

Example: Month. Calender 2. (Modifying Month. Calendar Properties) by clicking on the month. Calendar on the design view all of its properties will be shown in the properties window as follows: © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 24

A. Month. Calendar Control © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 25

Example: Month. Calender 3. 4. (Adding event to Month. Calendar) The default event for this control is Date. Changed, which occurs when a new date is selected. (Adding event to Month. Calendar) To add Date. Changed to the month calendar, double click on the month. Calendar in the design view: Private Sub Month. Calendar 1_Date. Changed(By. Val sender As System. Object, By. Val e As System. Windows. Forms. Date. Range. Event. Args) Handles Month. Calendar 1. Date. Changed End Sub 2. This code will be displayed in the code view 1. Double click on the Month. Calendar © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 26

Example: Month. Calender 5. 6. (Adding event to Month. Calendar) Write the code you want inside the sub procedure event of the month. Calendar: For example the following code will display the date that is selected by the user: Private Sub Month. Calendar 1_Date. Changed(By. Val sender As System. Object, By. Val e As System. Windows. Forms. Date. Range. Event. Args) Handles Month. Calendar 1. Date. Changed Message. Box. Show("You selected the date " & Month. Calendar 1. Selection. Range. Start) End Sub © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 27

Example: Month. Calender 5. (Adding event to Month. Calendar) When we run this code: Private Sub Month. Calendar 1_Date. Changed(By. Val sender As System. Object, By. Val e As System. Windows. Forms. Date. Range. Event. Args) Handles Month. Calendar 1. Date. Changed Run Message. Box. Show("You selected the date " & Month. Calendar 1. Selection. Range. Start) End Sub After clicking on a date, the following message box will appear with the selected date © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 28

B. Date. Time. Picker Control The Date. Time. Picker can be used to retrieve date and time information from the user. 1. (Adding Date. Time. Picker): To add a date time picker double click on it from the toolbox menu then it will appear on the form in the design view: © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 29

B. Date. Time. Picker Control 2. (Modifying Date. Time. Picker properties) by clicking on the Date. Time. Picker on the design view, all of its properties will be shown in the properties window as follows: © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 30

© 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 31

B. Date. Time. Picker Control 3. (Adding Event to the Date. Time. Picker Control) The default event to date. Time. Picker can be added by double clicking on it in the design view. This will display the following code (The default event is Value. Changed, which occurs when a new date is selected. ) : Private Sub Date. Time. Picker 1_Value. Changed(By. Val sender As System. Object, By. Val e As System. Event. Args) Handles Date. Time. Picker 1. Value. Changed End Sub © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 32

B. Date. Time. Picker Control 4. (Adding Event to the Date. Time. Picker Control) Add the code you want inside the event, For example: Private Sub Date. Time. Picker 1_Value. Changed(By. Val sender As System. Object, By. Val e As System. Event. Args) Handles Date. Time. Picker 1. Value. Changed Message. Box. Show("You selected the date: " & Date. Time. Picker 1. Value. To. String()) Message. Box. Show("You selected the Time of the day: " & Date. Time. Picker 1. Value. Time. Of. Day. To. String()) End Sub © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 33

B. Date. Time. Picker Control Output of the Date. Time. Picker Example When you select the date 10, April, 2012 the event occur © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 34

List View Control Columns Items List. View Sub. Items © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 35

1. Adding the list. View © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 36

2. Adding Columns to list. View © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 37

3. Adding Items to the List. View © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 38

4. Adding Sub. Item to an Item © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 39

Example of List View In the following form (Form 1) the. List View with: 1. Two columns (Name – Size) 2. One Item (Document. docx) 3. One Sub. Item for Document. docx item (10 kb) © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 40

5. Changing the view of the list view © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 41

5. Examples of the different views of the list view Large Icon Details List Small Icon Tile © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 42

6. Adding Event to the List. View The default event to the list view is Selected. Index. Changed which is triggered when the user change his selection of the item. Double Click here Private Sub List. View 1_Selected. Index. Changed (By. Val sender As System. Object, By. Val e As System. Event. Args) Handles List. View 1. Selected. Index. Changed ‘ Write your Code here End Sub © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 43

6. Example on adding Event to the List. View Double Click here Private Sub List. View 1_Selected. Index. Changed (By. Val sender As System. Object, By. Val e As System. Event. Args) Handles List. View 1. Selected. Index. Changed Message. Box. Show("You Selected an item") End Sub Run Click on any item © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 44

What is the Tree. View Parent Nodes Child Nodes © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 45

Adding a Tree. View © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 46

Adding Nodes to the Tree. View © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 47

Adding Root Node to the Tree. View 2 1 3 © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 48

Adding Child Node to the Tree. View 2 1 3 © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 49

Tree. View After Adding Nodes © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 50

Deleting Nodes from the Tree. View 1 2 3 © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais 51

Adding Event to the Tree. View Double Click here Private Sub Tree. View 1_After. Select(By. Val sender As System. Object, By. Val e As System. Windows. Forms. Tree. View. Event. Args) Handles Tree. View 1. After. Select Message. Box. Show("You Selected an item") End Sub The default event of the Tree. View is After. Select which is triggred when the user select a node from the tree. © 1992 -2011 by Pearson Education, Inc. All Rights Reserved. Edited By Maysoon Al. Duwais Run 52