BIM211 – Visual Programming

1. BIM211 – Visual Programming Advanced Controls, Menus, Toolbars, and Status Bars

2. Contents • Traditional Controls • Labels, Text Boxes, Buttons, Check Boxes, List Boxes, Combo Boxes • Advanced Controls • Timers, Tabbed Dialog Boxes, Image Lists, List View, Tree View • Menus • Toolbars • Status Bar

3. Timers • The Timer control’s sole purpose is to trigger an event at a specified time interval. • The interval is set by the Interval property. • The Interval property is specified in milliseconds. • You have to set the Enabled property of a timer to True in order to activate it. • When the interval elapses, the Tick event of the Timer occurs.

4. Timer Exercise • Create a new project. • Add a label and timer to the main form. • Set the Enable property of the timer to True and set the interval as 1000 milliseconds. • Double-click the timer to open the Tick event and write the following code in it: lblClock.Text = DateTime.Now.ToLongTimeString();

5. Timer Example at Runtime

6. Tabbed Dialog Boxes • Tabs provide grouping the controls and reduces the required screen space. • The TabControl is used to design tabbed dialog boxes.

7. TabControl • Tabs of a TabControl can be added, removed, or edited by the TabPages property. • Each page on a TabControl acts as a container; so you can drag controls in the tab pages. • You can select each tab pages at design time by clicking their titles. • The control’s SelectedIndex property (not the TabIndex property) sets and returns the index of the currently selected tab. • When the user switches tabs, the TabControl’sSelectedIndexChanged event is fired.

8. ImageList Control • The ImageList control is dedicated to storing pictures and serving them to other controls. • The images in an ImageList control are shared among the other types of controls. • The pictures are stored in the control’s Images collection. • Try to use images of the same size.

9. Using Image List in a List View • The List View can be used to create simple lists, multicolumn grids, and icon trays. • The right pane in Windows Explorer is a List View. • The primary display options available for Explorer’s List View are Icons, List, Details, and Tiles. • These correspond exactly to the display options available for a List View by way of its View property.

10. Exercise • Create a new project • Add an ImageList to the main form • Select some images of size 16x16 for the image list • Add a ListView control and set its View property to Details. • Click the SmallImageList property of the ListView control and select the image list you created before from the drop-down list

11. Exercise (continued) • Using the Columns property of the ListView, add two columns with the names Name and State • Click the Items property of the ListView object and add an item with specifying a name (e.g. James Foxall) into its Text property • Select an image for the item from the ImageIndex property of the item.

12. Exercise Screens

13. Exercise (continued) • If the View property is set to Details and multiple columns have been defined, the value of the Text property appears in the first column. • Subsequent column values are determined by the SubItems collection. • Click SubItems property and add a new subitem with the value Nebraska • Add another entry and try the other values of the View property of the list view object • In order to select the whole line when any point in the item is clicked, change the FullRowSelect property of the list view to True

14. Last View of the Exercise

15. Adding List Items Using Code • Add a name: lvwMyListView.Items.Add("Monty Sothmann"); • Add a name with picture index: lvwMyListView.Items.Add("Mike Cook",0); • Add a name with state information: ListViewItem item; item = lvwMyListView.Items.Add("Mike Saklar", 0); item.SubItems.Add("Nebraska");

16. Tree View • The Tree View control is used to present hierarchical data. • The most commonly used Tree View control is found in Windows Explorer, where you can use the Tree View to navigate the folders and drives on your computer. • The Tree View’s items are contained in a Nodes collection, much as items in a List View are stored in an Items collection. • To add items to the tree, you append them to the Nodes collection.

17. List View and Tree View

18. Exercise • Create a new project, and add a List View, a button, and a text box to the default form. Create a new item in the List View, using the text entered into the text box when the button is clicked.

19. Menu Strip Control • Almost all applications have menus (File, Edit, View, Help, etc.) • In C#, menus are added to forms by using the Menu Strip control • Menu Strip control is located in the Menus & Toolbars category of the toolbox • Menu Strip control makes the creation of a menu very easy! You can easily catch the usage of a Menu Strip.

20. Using Menu Strip Control

21. Accelerator Keys and Hotkeys • Put an ampersand (&) character before a character in each of the top-level menu items (e.g. &File, &Edit, etc.) • The character which comes after the ampersand character in a top-level menu item is called an accelerator key • The character which comes after the ampersand character in a sub-menu item is called a hotkey • Accelerator keys and hotkeys are used to access the menu item by keyboard (Alt + hotkey) • Don’t use same letter for different menu items

22. Exercise • Open PictureViewer project and place a Menu Strip control onto the main form • Create a File menu with the submenus Open Picture and Quit • Create a Tools menu with the submenus Draw Border and Options • Name the menu items with the prefix mnu and suitable names • Try moving and deleting the menu items

23. Checked Menu Items • A menu item that isn’t used to open a submenu can display a check mark next to its text. • Check marks are used to create menu items that have state—the item is either selected or it isn’t.

24. Exercise • Open the File menu, put a new menu item with the text Confirm On Exit below the Quit menu item, and move it above the Quit menu item • Right-click Confirm On Exit and choose Checked from the shortcut menu • Similarly, you can use the Properties window in order to change the Checked property of a menu item • Run your program and observe whether you can change the Checked state or not

25. Checked State

26. Programming Menus • Double-clicking a menu item opens the method for the Click event of the menu item • Now, double-click the Open Picture menu item and write the following code: if (ofdSelectPicture.ShowDialog() == DialogResult.OK) { picShowPicture.Image =Image.FromFile(ofdSelectPicture.FileName); this.Text = "Picture Viewer(" +ofdSelectPicture.FileName + ")"; }

27. Confirm on Exit • Double-click the Confirm On Exit menu item to access its Click event. Enter the following code statement: mnuConfirmOnExit.Checked = !(mnuConfirmOnExit.Checked); • Here, mnuConfirmOnExit is the name of the Confirm On Exit menu item

28. Draw Border Menu Item Click Event Graphics objGraphics = null; objGraphics = this.CreateGraphics(); objGraphics.Clear(SystemColors.Control); objGraphics.DrawRectangle(Pens.Blue, picShowPicture.Left - 1, picShowPicture.Top - 1, picShowPicture.Width + 1, picShowPicture.Height + 1); objGraphics.Dispose();

29. Options Menu Item Click Event OptionsForm frmOptionsDialog = new OptionsForm(); frmOptionsDialog.ShowDialog();

30. Quit Menu Item Click Event if (mnuConfirmOnExit.Checked) { DialogResult result = MessageBox.Show("Are you sure you want to close the form?", "Close the program?", MessageBoxButtons.YesNo, MessageBoxIcon.Question); if (result == DialogResult.Yes) this.Close(); } else this.Close();

31. Context Menus • Context menus (also called shortcut menus) are the pop-up menus that appear when you right-click an object on a form. • Context menus get their name from the fact that they display context-sensitive choices—menu items that relate directly to the object that’s right-clicked. • Most Visual C# controls have a default context menu, but you can assign custom context menus if you want. • To create context menus, you use the Context Menu Strip control.

32. Exercise • Add a new Context Menu Strip control to the main form • Add a menu item with the text Draw Border • Double-click the menu item and write the border-drawing codes into the Click event • Now, we have to link the picture box object to the context menu strip • Select the picture box and set its ContextMenuStrip property to the name of the context menu strip control

34. Running the Program

35. Assigning Shortcut Keys to Menu Items • If you’ve spent any time learning a Microsoft application, you’ve most likely learned some keyboard shortcuts. • For example, pressing Ctrl+P in any application that prints has the same effect as opening the File menu and choosing Print. • The key combinations like Ctrl+P are called shortcut keys. • You can add shortcuts to your menus in C#.

36. Exercise • Select the Open Picture menu item under the File menu. • In the Properties window, click the ShortcutKeys property, and then click the down arrow that appears. • This drop-down allows you to define a shortcut key for the selected menu item. • Select Ctrl+O shortcut key for the Open Picture menu item.

37. Toolbars • Generally, when a program has a menu (as most programs should), it should also have a toolbar. • Using toolbars is one of the easiest ways for a user to access program functions. • Unlike menu items, toolbar items are always visible and therefore are immediately available. • In addition, toolbar items have ToolTips, which enable a user to discover a tool button’s purpose simply by hovering the mouse pointer over the button.

38. Toolbars • Toolbar items are really shortcuts for menu items; every item on a toolbar should have a corresponding menu item. • The actual items you place on a toolbar depend on the features the application supports. • Toolbars are created with the ToolStrip control under the Menus & Toolbars category of the toolbox.

39. Adding a Toolbar • Add a new ToolStrip control to your form by double-clicking the ToolStrip item in the toolbox. A new toolbar is added to the top of your form. • Notice that the toolbar appears above the menu. • Generally a toolbar belongs below the menu bar. • Right-click the toolbar and choose Bring To Front from its shortcut menu. That causes the toolbar to move below the menu.

41. Adding Toolbar Buttons • Toolbars have Items collection. Using this collection, you can add toolbar buttons. • Another way is using the Add ToolStripButtonbutton on the toolbar control. • Using either way, add three buttons: One for Open Picture, one for Draw Border, and one for Options. Don’t forget to change their ToolTipText and Image properties! • Try to separate the buttons using a separator.

43. Final View of the Toolbar

44. Programming Toolbars • Programming the toolbar buttons is same as programming the menu items • Just double-click the toolbar buttons and write the necessary codes • You wrote the same code several times but don’t think about it for now • Next week, you’ll learn how to use same code for different events

45. Status Bar • You can add a status bar to your forms using the Status Strip control under the Menus & Toolbars category of the toolbox • You can add StatusLabel, ProgressBar, DropDownButton, and SplitButton controls to a status bar in a way similar to the toolbars

46. StatusBar Buttons

47. Exercise • When the mouse is moved over the picture box, display the X and Y coordinates on the status bar.