1 Web-Enabled Decision Support Systems Windows Forms and Controls Prof. Name Position (123) University Name

2 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

3 Introduction  A well-designed user interface separates the user from the underlying technology, making it straightforward to perform intended tasks –Arguably the important part of an application  A multiple-document interface (MDI) links several forms with navigation functionalities –In Visual Studio, we build such interfaces with the aid of forms and controls  Controls allow us to acquire user input and to display output –Play an integral role in the construction of an application’s user interface

4 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

5 The Controls  The Visual Studio Toolbox is a gazette of Visual Basic controls –All of the controls have their own:  Properties  Methods  Events –However, there are some shared characteristics common across the Control class –The following pages list some often used controls as well as their shared characteristics

6 Common Controls

7 Control Class - Properties

8 Control Class - Methods

9 Control Class - Events

10 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

11 The Label Control  The Label control displays information to the user –The text of the Label control is read-only

12 The LinkLabel Control  The LinkLabel control displays a label as a navigational link –Links to other forms or web pages

13 Using LinkLabel For Navigation  How-to: Use LinkLabel for Navigation 1.Add two LinkLabel controls on a new form. Associate the code below with the LinkClicked events for the appropriate control. Navigating Using a LinkLabel Control

14 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

15 The TextBox Control: In Depth  Additional properties: –PasswordChar, ReadOnly, ScrollBars, TextAlign

16 Hands-On Tutorial: Validating TextBox Control’s Input  How-to: Validate Input in a TextBox Control 1.Create a new project named WindowsControl. 2.Add a TextBox control, txtVerify, and a Label control to Form1. TextBox Control Input Validation: Output

17 Adding Code 3.Open the Code Window and select the txtVerify control in the top-left drop- down list and select the KeyPress event from the top-right drop-down list. 4.Associate the code shown below with the KeyPress event of the TextBox. TextBox Control Input Validation: Code Window

18 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

19 The Button Control  Button controls are used to trigger various events  Additional properties: –BackColor, Font, ForeColor, TextAlign

20 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

21 The CheckBox Control  The CheckBox control is one of the common controls used to provide different options to the user –Gather multiple choices from the user –Toggle between selecting and de-selecting by clicking on items Example of a CheckBox Control

22 The CheckBox Control: In Depth

23 Hands-On Tutorial: Getting and Setting a CheckBox’s State  How-to: Get and Set the State of a CheckBox Control 1.Add a new form, Form2, to the WindowsControls project created during the previous hands-on tutorial. Set the new form as the project’s start-up form. 2.Add three CheckBox controls to Form2. Name them chk1, chk2, and chk3. Add two command buttons to the form as shown below. Using a CheckBox Control: Design Window

24 Adding Code, Saving, and Running 3.Use the code below to complete the application. 4.Save and run the application. Using a CheckBox Control: Output

25 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

26 The ListBox Control  The ListBox control presents a list of choices in a column  Additional properties and methods: –ClearSelection, ColumnWidth, DisplayMember, ItemHeight, Items.RemoveAt, MultiColumn, ScrollAlwaysVisible, SetSelected, Text

27 Sorting a ListBox Control  The Sorted property alphabetically arranges items in a ListBox Sorting Items in a ListBox Control

28 The Multi-Select ListBox Control  Choosing the MultiSimple option for the SelectionMode property of a ListBox allows the user to select more than one item at-a-time –We can access the multiple selections using:  SelectedItems property  SelectedIndices property Multi-Select ListBox Control: Output

29 The Multi-Select ListBox Control (cont.)  The For-Each-Next loop can loop over all selected items to individually select item text and indices as shown below Multi-Select ListBox Control: Code Window

30 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

31 The ComboBox Control  A ComboBox control presents a list of choices to the user in a drop- down box  Additional properties and methods: –DisplayMember, GetItemText, ItemHeight, Items.Clear, MaxDropDownItems, Select, SelectedAll, SelectedText, Sorted

32 Hands-On Tutorial: Using a ComboBox Control  How-to: Use a ComboBox Control 1.Add a new form, Form3, to the WindowsControls project. Set Form3 as the project’s start-up form. 2.Setup Form3 as shown below. Name the ComboBox cmbFruits, the TextBox txtFruits, and four buttons cmdAdd, cmdSort, cmdRemove, and cmdClear. 3.Access the Items property of the cmbFruits ComboBox in the Property Window. Launch the String Collection Editor and add a few fruit names. A ComboBox Control Application: Design Window

33 Adding Code 4.Add the code below to the appropriate methods. A ComboBox Control Application: Code Window

34 Adding Code (cont.) 4.Use the code below to complete the application. A ComboBox Control Application: Code Window

35 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

36 The CheckedListBox Control  The CheckedListBox control displays choices associated with CheckBox controls in a column –Combination of ListBox and CheckBox controls –Items have two distinct states:  Item checked  Item selected Example of a CheckedListBox Control

37 The CheckedListBox Control: In Depth

38 Hands-On Tutorial: CheckedListBox Control  How-to: Use a CheckedListBox Control 1.Add another form, Form4, to the project WindowsControls and set it up as the start-up form. 2.Design Form4 as shown below. Name the CheckedListBox as clbFruits. Name the command buttons appropriately. Example of a CheckedListBox Control

39 Adding Code 3.Associate the code below with the Checked Fruits and Selected Fruit command buttons. A CheckedListBox Control Example: Code Window

40 Saving, Running, and Testing 4.Save and run the application. 5.While testing, check and select the fruits shown below (far left). Selected fruit is highlighted in blue, and checked fruits have a checkmark next to them. Compare the output with below. A CheckedListBox Control Example: Output

41 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

42 The DateTimePicker Control  The DateTimePicker control is a ComboBox of date and time items –Allows the user to select a single item from a list of dates or times –Reveals the date in the text form and features a calendar grid in the drop- down list –The MaxDate and MinDate properties determine the range of dates Example of a DateTimePicker Control

43 The DataTimePicker Control: In Depth  Additional properties: –CalendarFont, CalendarForeColor, CalendarMonthBackground, CalendarTitleBackColor, CalendarTitleForeColor, PreferredHeight, Text

44 Hands-On Tutorial: DataTimePicker Control  How-to: Use a DateTimePicker Control 1.Add a new form, Form5, to the existing project and set it up as the start-up form. 2.Add a DateTimePicker control and name it dtpDate. Add two command buttons with text values “Display Selected Date” and “Set the Starting Date”. Name these command buttons cmdSelected and cmdSetStart, respectively. Place the controls on the form as shown below. Example of a DateTimePicker Control

45 Adding Code and Testing 3.Use the code in below to complete the application. 4.Save, run, and test the application as shown below.

46 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

47 The TreeView Control  The TreeView control displays a hierarchy of nodes –Similar to the display of files and folders in the Solution Explorer –A parent node can be expanded to display its child nodes  The child node recursively serves as a parent of other nodes Example of TreeView Control

48 The TreeView Control: In Depth  Additional properties and methods: –EndUpdate, GetNodeCount, Scrollable, ShowLines, ShowPlusMinus, Sorted, TopNode, VisibleCount

49 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

50 Arranging Controls on a Form  When we add multiple controls to the form surface, we may want to: –Align them –Size them equally –Adjust the spacing between controls consistently  Using the Layout toolbar, we can adjust the following features of controls by selecting them together: –Width and height –Horizontal and vertical spacing –Left-center-right alignments –Common properties The Layout Toolbar

51 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

52 The Start-up Object  How-to: Start an Application Without a Start-up Form 1.Add a standard module to the existing project. 2.Write the Main subroutine procedure as shown to perform the desired task. 3.Open the Properties Window for a project (Project | Property) and set the start-up object to Main.

53 Displaying a Splash Screen  A splash screen is a form that displays the name of the application, the copyright details, and a simple image –Adds an attractive appearance to an application –Buys time to load large elements  Database values  Images –Typically contains code for a time delay of a few seconds

54 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

55 In-Class Assignment  In this in-class assignment, we aim at developing a greeting card application –Assists in the creation of customized birthday greeting cards –User will select the various parameters of the card:  Background color  Font type and size  Fore color  Border style  Text –Provide these options using various Windows controls –Once the user has selected his/her likings, the greeting card is developed  Use a Panel control for the greeting card itself

56 In-Class Assignment (cont.) The Greeting Card Application

57 Overview  13.1 Introduction  13.2 The Controls  13.3 The Label and LinkLabel Controls  13.4 The TextBox Control: In Depth  13.5 The Button Control  13.6 The CheckBox Control  13.7 The ListBox Control: In Depth  13.8 The ComboBox Control  13.9 The CheckedListBox Control  The DateTimePicker Control  The TreeView Control  Arranging Controls on a Form  The Start-up Object  In-Class Assignment  Summary

58 Summary  The user interface is perhaps the most important part of an application. –To users, it is the most visible part of an application. –Controls play an important role in the construction of a user interface.  Label controls display information. –The text of the Label control is read-only. –We use labels to:  Convey the meaning of other controls.  Display calculated information to a user.  Display titles and headings.

59 Summary (cont.)  The CheckBox control is one of the common controls that are used to provide different options to a user. –If a box has been selected, a check sign appears. –We can toggle between selecting and deselecting a CheckBox by simply clicking on it. –Used to obtain true/false or yes/no options from a user.  The ListBox control goes beyond the CheckBox and RadioButton controls to present a list of choices to the user. –Users can select one or more choices from the ListBox control.

60 Summary (cont.)  The ComboBox control presents a list of choices to the user in a drop- down box. –Combination of the TextBox and ListBox controls. –Allows the user to select an item either by typing text into the drop-down box or by selecting it from the list.  A CheckedListBox control presents a list of choices with a CheckBox control next to each item. –Combination of the CheckBox and ListBox. –Has two distinct states:  Item checked  Item selected –Select an item by clicking on it. –Check an item by putting a check mark in its CheckBox control.

61 Summary (cont.)  The DateTimePicker control is a ComboBox of date and time items. –Allows the user to select a single item from a list of dates or times. –The control reveals the date in the text form and features a calendar grid in the drop-down list.  The TreeView control displays a hierarchy of nodes in a manner similar to the display of files and folders in the Solution Explorer –A parent node can be expanded to display its child nodes  Which recursively serves as a parent of other nodes  The Properties Window allows us to specify a project’s start-up form or object. –A Main procedure can be used when we would like to display different forms at the start-up depending on the user type.