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 controls 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 controls SelectedIndex property (not the
  TabIndex property) sets and returns the index of
  the currently selected tab.
• When the user switches tabs, the TabControls
  SelectedIndexChanged 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 controls 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
  Explorers 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 Views 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)
• Dont 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 isnt used to open a submenu can
  display a check mark next to its text.
• Check marks are used to create menu items that
  have statethe item is either selected or it
  isnt.

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(ofdSelect
  Picture.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.Chec
  ked)
• 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 choicesmenu items
  that relate directly to the object thats
  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

33
(No Transcript)
34
Running the Program
35
Assigning Shortcut Keys to Menu Items

• If youve spent any time learning a Microsoft
  application, youve most likely learned some
  keyboard shortcuts.
• For example, pressing CtrlP in any application
  that prints has the same effect as opening the
  File menu and choosing Print.
• The key combinations like CtrlP 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 CtrlO 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 buttons 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.

40
(No Transcript)
41
Adding Toolbar Buttons

• Toolbars have Items collection. Using this
  collection, you can add toolbar buttons.
• Another way is using the Add ToolStripButton
  button on the toolbar control.
• Using either way, add three buttons One for Open
  Picture, one for Draw Border, and one for
  Options. Dont forget to change their ToolTipText
  and Image properties!
• Try to separate the buttons using a separator.

42
(No Transcript)
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 dont
  think about it for now
• Next week, youll 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.