Keeping Track, Menus. CSC 330 Object-Oriented Programming 1

Size: px

Start display at page:

Download "Keeping Track, Menus. CSC 330 Object-Oriented Programming 1"

Godwin McDowell
6 years ago
Views:

1 Keeping Track, Menus CSC 330 Object-Oriented Programming 1

2 Chapter Objectives Keeping Track Create menus and submenus for program control Display and use the Windows common dialog boxes Create context menus for controls and the form Write reusable code in methods and call the methods from other locations CSC 330 Object-Oriented Programming. 2

3 Keeping Track Various controls help us keep track of dates, time, and numbers DateTimePicker NumericUpDown StatusBar Timer CSC 330 Object-Oriented Programming. 3

4 Example KeepTrack CSC 330 Object-Oriented Programming. 4

5 Example KeepTrack operation DateTimePicker at top of form User chooses a date NumericUpDown in the middle User selects a number Button at bottom User presses to display date in a label and number selected in another label StatusBar a at bottom shows s current time Timer updates it every second, and changes label colors CSC 330 Object-Oriented Programming. 5

6 DateTimePicker Format Long Tuesday, January 28, 2003 Short 1/28/03 Time 10:32:56 AM CSC 330 Object-Oriented Programming. 6

7 Button Click handling private void showbutton_click { } (object sender, System.EventArgs e) datedisplay.text = "Date selected: " + date.value.tolongdatestring(); numberdisplay.text = "Number selected " + number.value.tostring(); CSC 330 Object-Oriented Programming. 7

8 A Timer control CSC 330 Object-Oriented Programming. 8

9 Timer Tick event every second private void timer1_tick (object sender, System.EventArgs e) { currentdatetime.text t T t = DateTime.Now.ToString(); T i number.backcolor = datedisplay.backcolor; datedisplay.backcolor = numberdisplay.backcolor; numberdisplay.backcolor = number.backcolor; } Copies time to status bar Permutes background colors to give flashing effect CSC 330 Object-Oriented Programming. 9

10 DateTimePicker properties and an event CSC 330 Object-Oriented Programming. 10

11 MonthCalendar control CSC 330 Object-Oriented Programming. 11

12 Menus Menu Bar Menus that drop down to display a list of menu items Menu items are controls with properties and events Each menu item has a Name and Text property and a Click event (similar to a button) Easy to create menus for a Windows form using Visual Studio's Menu Designer Menus look and behave like standard Windows menus CSC 330 Object-Oriented Programming. 12

13 Defining Menus - 1 Add a MenuStrip component to the form MenuStrip is a container which can contain ToolStripMenuItems ToolStripComboBoxes ToolStripSeparators S ToolStripTextBoxes CSC 330 Object-Oriented Programming. 13

Defining Menus - 2 The MenuStrip component appears in

"Type Here" Enter text for first menu Enter items for

ToolStripMenuItem is automatically added to the

14 Defining Menus - 2 The MenuStrip component appears in the component Tray Begin typing on top of the words "Type Here" Enter text for first menu Enter items for first menu or enter text for second menu A ToolStripMenuItem is automatically added to the MenuStrip's Items collection CSC 330 Object-Oriented Programming. 14

Holds the words that appear on the screen Similar to the Text

The first menu's Text property should be File, with a

for each menu and menu item Use the Menu Designer or the

15 Holds the words that appear on the screen Similar to the Text property of a button or label Conform to Windows standards The first menu's Text property should be File, with a keyboard access key (&File) Enter or change the Text property for each menu and menu item Use the Menu Designer or the Properties window The Text Property CSC 330 Object-Oriented Programming. 15

16 Adding ToolStripMenuItems to a MenuStrip. Setting a menu item's shortcut keys CSC 330 Object-Oriented Programming. 16

17 Creating an access shortcut To create an access shortcut (or keyboard shortcut), type an ampersand (&) before the character to be underlined. d For example, to create the File menu item with the letter F underlined, type &File. To display an ampersand, type &&. To add other shortcut keys (e.g., <Ctrl>-F9) for menu items, set the ShortcutKeys property of the appropriate ToolStripMenuItems. To do this, select the down arrow to the right of this property in the Properties window. In the window that appears, use the CheckBoxes and dropdown list to select the shortcut keys. When you are finished, click elsewhere on the screen. You can hide the shortcut keys by setting property p ShowShortcutKeys to false, and you can modify how the control keys are displayed in the menu item by modifying property ShortcutKeyDisplayString. CSC 330 Object-Oriented Programming. 17

18 The Name Property The File menu item that is added is automatically named filetoolstripmenuitem Menu items are named so well that there is no need to change the Name property of any menu component If the Text property is changed, the item is not automatically renamed Rename it in the Properties window CSC 330 Object-Oriented Programming. 18

Clicking the down arrow allows you to select the type of item to addmenuitem (of type

19 Menu item options In addition to text, Visual Studio allows you to easily add TextBoxes and ComboBoxes (drop-down lists) as menu items. Clicking the down arrow allows you to select the type of item to addmenuitem (of type ToolStripMenuItem, the default), ComboBox (of type ToolStripComboBox) and TextBox (of type ToolStripTextBox). CSC 330 Object-Oriented Programming. 19

20 Menu Item Options CSC 330 Object-Oriented Programming. 20

menu items Select the MenuStrip and in the Items property in the

21 The MenuStrip Items Collection Items are automatically added in the Menu Designer Use the Items Collection Editor to reorder, add, and delete menu items Select the MenuStrip and in the Items property in the Properties window, click the ellipsis button CSC 330 Object-Oriented Programming. 21

A Menu's DropDownItems Collection Each top-level menu has a DropDownItems collection that holds the menu items In the Items Collection Editor you

22 A Menu's DropDownItems Collection Each top-level menu has a DropDownItems collection that holds the menu items In the Items Collection Editor you can rearrange or delete menu items and set properties of the items DropDownItems collection for the File menu CSC 330 Object-Oriented Programming. 22

23 A filled triangle to the right of a menu item indicates that a submenu exists Create a submenu by moving to the right of a menu item and typing the next item's text Submenus CSC 330 Object-Oriented Programming. 23

item and click on its drop-down arrow Select Separator or type a

24 Separator Bars Group menu items according to their purpose Draws a bar across the entire menu To create a separator bar, add a new menu item and click on its drop-down arrow Select Separator or type a single hyphen in the Menu Designer CSC 330 Object-Oriented Programming. 24

25 Menu items have Enabled property set to true by default Enabled menu items appear in black text and can be selected Disabled items are not available Enabled property can be set at design time or run time, in code The Enabled Property instructionstoolstripmenuitem.enabled = false; CSC 330 Object-Oriented Programming. 25

26 The Checked Property Menu items have Checked property set to false by default A check mark next to a menu item indicates the option is selected Checked property can be set at design time or in code summarytoolstripmenuitem.checked = true; CSC 330 Object-Oriented Programming. 26

27 Toggling Check Marks On and Off Set a menu item s initial Checked property p in the Properties window To change the menu item s state in code, set its Checked property to true or false if (summarytoolstripmenuitem.checked) { // Uncheck the summary menu item. summarytoolstripmenuitem.checked = false; } else { } //Check the summary menu item. summarytoolstripmenuitem.checked = true; CSC 330 Object-Oriented Programming. 27

28 Setting Keyboard Shortcuts Many users prefer to use keyboard shortcuts for selecting menu items To set keyboard shortcuts Select the menu item in the designer In the Properties window, select the ShortcutKeys property Make a choice from the drop-down list Set ShowShortcutKeys property to false to prevent a shortcut from showing on the menu CSC 330 Object-Oriented Programming. 28

29 Design Example CSC 330 Object-Oriented Programming. 29

Example: Design GUI with Menu To create this GUI, begin by dragging the MenuStrip from the ToolBox onto the Form.

The File menu (filetoolstripmenuitem) has menu items About (abouttoolstripmenuitem) and Exit

The first submenu, Color (colortoolstripmenuitem), contains menu items Black (blacktoolstripmenuitem), Blue

The second submenu, Font (fonttoolstripmenuitem), contains menu items Times New Roman (timestoolstripmenuitem),

30 Example: Design GUI with Menu To create this GUI, begin by dragging the MenuStrip from the ToolBox onto the Form. Then use Design mode to create the menu structure shown in the sample outputs. The File menu (filetoolstripmenuitem) has menu items About (abouttoolstripmenuitem) and Exit (exittoolstripmenuitem); the Format menu (formattoolstripmenuitem) has two submenus. The first submenu, Color (colortoolstripmenuitem), contains menu items Black (blacktoolstripmenuitem), Blue (bluetoolstripmenuitem), Red (redtoolstripmenuitem) and Green (greentoolstripmenuitem). The second submenu, Font (fonttoolstripmenuitem), contains menu items Times New Roman (timestoolstripmenuitem), Courier (couriertoolstripmenuitem), Comic Sans (comictoolstripmenuitem), a separator bar (dashtoolstripmenuitem), Bold (boldtoolstripmenuitem) and Italic (italictoolstripmenuitem). CSC 330 Object-Oriented Programming. 30

31 Example: Design GUI with Menu cont d The About menu item in the File menu displays a MessageBox when clicked. The Exit menu item closes the application through static method Exit of class Application. Class Application's static methods control program execution. Method Exit causes our application to terminate. We made the items in the Color submenu (Black, Blue, Red and Green) mutually exclusive the user can select only one at a time. To indicate that a menu item is selected, we will set each Color menu item's Checked property to true. This causes a check to appear to the left of a menu item. Each Color menu item has its own Click event handler. The method handler for color Black is blacktoolstripmenuitem_click. lst k Similarly, il l the event handlers for colors Blue, Red and Green are bluetoolstripmenuitem_click, redtoolstripmenuitem_click and greentoolstripmenuitem_click, respectively. Each Color menu item must be mutually exclusive, so each event handler calls method ClearColor before setting its corresponding Checked property p to TRue. Method ClearColor sets the Checked property p of each color MenuItem to false, effectively preventing more than one menu item from being selected at a time. In the designer, we initially set the Black menu item's Checked property to true, because at the start of the program, the text on the Form is black. CSC 330 Object-Oriented Programming. 31

32 Standards for Windows Menus Follow Windows standards for menus Include keyboard access keys Stick with standard keyboard shortcuts Place File menu at the left end of the menu bar Place Help menu, if included, at the right end Any menu item that will display a dialog box asking for further information should have "..." appended to the Text property CSC 330 Object-Oriented Programming. 32

33 Common Dialog Boxes Predefined standard dialog boxes Specifying colors and fonts Opening, saving and browsing for files Place the desired common dialog component from the Dialogs tab of the toolbox in the Component Tray Default names for the components are fine CSC 330 Object-Oriented Programming. 33

34 Displaying a Windows Common Dialog Box Display the dialog box at run time using the ShowDialog method The dialogobject is the name of the common dialog component Write code to show the dialog in the event handler for a menu item or button colordialog1.showdialog(); fontdialog1.showdialog(); g() CSC 330 Object-Oriented Programming. 34

35 Modal versus Modeless Windows A dialog box is said to be modal The box stays on top of the application and must be responded to Use the ShowDialog method to display a dialog box, which is a window displayed modally A window that does not require response is said to be modeless Use the Show method to display a modeless window CSC 330 Object-Oriented Programming. 35

36 Using the Color Dialog Box Color selected in the Color dialog box is stored in the Color property Color property can be assigned to another object, such as a control Display dialog box with ShowDialog method User responds to dialog box Use the Color property p colordialog1.showdialog(); titlelabel.forecolor = colordialog1.color; CSC 330 Object-Oriented Programming. 36

property can be assigned to other objects on the form fontdialog1.

37 Using the Font Dialog Box The Font common dialog box displays available fonts for the system display After the user makes a selection, the Font property can be assigned to other objects on the form fontdialog1.showdialog(); titlelabel.font = fontdialog1.font; CSC 330 Object-Oriented Programming. 37

38 Setting Initial Values Before executing the ShowDialog method, assign the existing values of the object's properties When the dialog box appears, the current values will be selected If the user presses Cancel, property setting for the objects will remain unchanged colordialog1.color = titlelabel.forecolor; colordialog1.showdialog(); titlelabel.forecolor il lf l = colordialog1.color; l 1C l fontdialog1.font = titlelabel.font; fontdialog1.showdialog(); titlelabel.font il lf = fontdialog1.font; 1F CSC 330 Object-Oriented Programming. 38

39 How to Base a New Project on an Existing Project - 1 Make sure the project is not open (very important) Copy the folder to a new location using Windows Explorer Rename the new folder for the new project name, still using Windows Explorer Open the new project (the copy) in the Visual Studio IDE CSC 330 Object-Oriented Programming. 39

40 How to Base a New Project on an Existing Project 2 In the IDE's Solution Explorer, rename the solution and the project Right-click on the name and choose Rename Display the solution, Tools/Options/Projects and Solutions/General/Always show solution Rename the form(s), if desired Open the Project Designer (Project/ProjectName Properties) ) and change the Assembly name and Default namespace entries to match the new project name CSC 330 Object-Oriented Programming. 40

CIS 3260 Intro to Programming with C#

CIS 3260 Intro to Programming with C# Menus and Common Dialog Boxes McGraw-Hill 2010 The McGraw-Hill Companies, Inc. All rights reserved. Create menus and submenus for program control Display and use the Windows common dialog boxes McGraw-Hill