More Controls and Their Properties

Part 4 dbg --- TextBox, CheckBox, RadioButton, GroupBox, ToolTips,

2

Buttons (Review)

• Buttons allow user to choose when they are ready to perform an action.

• Each Button should be given a meaningful name that begins with btn.

• Text that will appear on the Button itself is typed in the Text Property of the Button.

• The code that should execute when a button is clicked, will go in the Click event handler.

3

Special Buttons

• One button can be designated as the AcceptButton Property value for the form. That particular button will be automatically “clicked” when you press the Enter key if the button has focus.

• One button can be designated as the CancelButton Property for the form. That particular button will be automatically “clicked” when you press the Esc key if the button has focus.

4

Labels (Review)

• Labels are be used for output only.• Keep the default names (Label1, Label2, etc.)

for labels that act as headings or static messages.

• Rename labels whose appearance will change at runtime; use lbl prefix for labels that you rename.

• Set the design time contents of a label by typing a Text Property value in the Property Window; alignment of this text can be set by clicking on the desired TextAlign Property.

5

Control Formatting

• Set a different color for text by setting the ForeColor Property.

• Set a different size or style with the Font Property.

• Set a different background color by setting the BackColor Property.

• Should a label have an outline or not? Set the BorderStyle Property:– None (default)– FixedSingle (use this to designate that output will

be displayed at runtime)– Fixed3D (will look like a TextBox)

6

Drawing a Line via a Label

• Put a label control onto the form at the desired location.

• Set the Text Property to blank/empty.• Set the BackColor Property to the desired line

color.• Set the BorderStyle Property to None.• Set the size of the line by setting the Width and

Height of the Size Property.

7

How to Select and Work with Multiple Controls• Ways to select multiple controls:

– Position mouse to left of a control, depress the left mouse button, and drag to outside/right of last control; this is called lassoing.

-or-

– Click a control, press Shift or Ctrl and continue clicking additional controls until you have selected all desired controls.

• Click 1 control to make it the primary control; it will display with white handles. You can align, size, or format all of the selected controls by sizing, aligning, and/or formatting the primary control.

8

Formatting Multiple Controls at one Time

1. Highlight multiple controls.

2. Format using tools:

-or-

2. Format using menus:– Choose Format, Make Same Size to make several

controls the same size. – Choose Format, Align to line up controls.– Choose Format, Horizontal Spacing or Vertical

Spacing to change spacing.

9

Let’s Work on Diner Specials Again

• Move button controls and results label down a little on form. Size, align, and adjust spacing as necessary.

• Draw a line between diner name and buttons.• Change the color and size of the results label

text and diner name label text. • Display an outline around results label.• Set a button as AcceptButton Property for form.

10

Text with TextBoxes

• TextBox controls can display text like Label controls.

• But more importantly, TextBox controls also allow the user to input/modify the text at run time.

• Name TextBoxes with the txt prefix.

11

Assign Text at Design Time

• As with the Label control, the Text Property of the TextBox control may be assigned using the Property Window at design time.

TextBoxTextDesignTime

12

Text Modification by User at Run Time

• The TextBox Text Property is modifiable by the user at run time. Information typed by the user may then be used by the program.

• It is important to note that anything typed in a TextBox (even numbers) will be considered a string and will have to be “converted” to numeric data type before use. More later…

• In the example below, TextBox input is used to change the Text Property of the form, when a Button is clicked.

UserChangeFormText

13

Modifying Access to a Control

• We can set the ReadOnly Property of a TextBox to True; allowing display of output only; no input will be allowed.

• We can set the Enabled Property of any control to False; the control is “dimmed” at run time, but still visible.

• We can set the Visible Property of any control to False; the control will be invisible at run time.

ChangeAccess

14

CheckBox

• A CheckBox control is appropriate for portraying one, or a series of independent binary (on/off) decisions.

• Clicking a CheckBox toggles its Checked Property between True and False.

• A CheckBox control is completely independent from any other CheckBox.

• CheckBox controls should be named with a chk prefix.

15

CheckBox

• The Text Property of a CheckBox is displayed adjacent to the actual check box of the control,

• The Checked Property is a Boolean value (True or False) that may be evaluated at run time.

CheckBox1

CheckBox2

16

CheckedChanged Event

• The CheckBox control raises the CheckedChanged Event when it is either checked or unchecked.

• This event can often streamline coding and design of interfaces using CheckBox controls.

CheckedChanged

17

RadioButton

• Like their namesakes, RadioButton controls are meant to be used in groups where only one may be checked at a time.

• RadioButtons should be used to portray decisions with exclusive results—only one option is allowed among several possibilities.

• Each RadioButton control should be named with a rad prefix.

18

RadioButton

• Setting the Checked Property of one RadioButton to True automatically sets the Checked Properties of all other RadioButtons in the set to False.

• Only one set of RadioButtons may be created directly on a form.

RadioButton1 RadioButton2

19

Containers for RadioButtons

• If we want to use more than one set of RadioButtons on a form, we have to isolate each set in a container control on the form.

• The GroupBox and Panel controls can isolate sets of RadioButtons on a form.

• Name a GroupBox control with a grp prefix.• Name a Panel control with a pnl prefix.• Add a GroupBox or Panel control to your form

first and then add the grouped controls to the GroupBox or Panel container.

20

GroupBox

• The GroupBox control is especially designed to function as a container.

• The border appearance is not adjustable.

• Type a caption/title for a GroupBox in the Text Property.

• GroupBoxes are a bit like miniature forms; however, they are unable to raise any mouse events except the MouseHover.

21

GroupBox

• It is possible to set a background image and draw on a GroupBox, but normally its use is limited to containing controls in logical or functional groups.

• Setting the Visible Property of a GroupBox affects the contained controls.

RadioButtonGroup

22

Picture Box

• A PictureBox control can hold an image (graphic file with .jpg, .gif, .bmp, or .ico extension).

• For now, we will make our PictureBox controls square in size. Name PictureBox controls using a pic prefix.

• I have posted icons.zip on my website which contains icons provided with VS 2003.

• You should copy any image files that you use into the Bin folder of your project before using.

• Then set the Image Property of the PictureBox to the filename of the graphic image.

23

PictureBox Properties

• Icon (.ico) files are generally square in size, which will match the shape of our PictureBox.

• Other image files will most likely have different Height and Width Properties and resizing can result in distortion. We’ll learn how to deal with that later.

• For our purposes now, we will set the SizeMode Property of a PictureBox to StretchImage, which will automatically resize the graphic to fit the size of our PictureBox control.

24

Empty Text Property of Labels and Textboxes

• At design time, the Text Property can be cleared/deleted using Delete key.

• At run time, the Text Property of labels and textboxes can be set to an empty string. lblCost.Text = “”;

• For textboxes only, you can use the Clear() method to empty a textbox.

25

Lengthy Text in Labels or TextBoxes

• A lengthy Text Property value may not fit on one line of code in an event handler function. lblMessage.Text = “I live at:\n12345 Grand “ + “Boulevard\nSchenectady, NY “ + “12306-3456”;

• Match up double quotes on each line.• \n (within a string literal) can be used to force a

carriage return.• + is used to concatenate strings.

26

Adding Access (Hot) Keys

• Access keys (hot keys) allow users to select controls using the keyboard rather than the mouse.

• Access keys (hot keys) are created by inserting an & character ahead of the character (that will act as a hot key) in the Text Property of a control.

• The user presses Alt and the appropriate hot key to select a particular control without using the mouse.

Note: You may need to customize your computer to display hot keys. Right-click an open area of Desktop. Choose Properties in context menu. Click Appearance Tab. Click Effects button. If necessary, uncheck box that says “Hide underlined letters for keyboard navigation until I press the Alt key”.

27

More Access Keys (Hot Keys)

• When you set access keys (hot keys), make sure to use a unique letter for each control.

• Since the access keys aren't case sensitive, &N and &n set the same access key.

• You can’t set an access key for a textbox. However, if you set an access key for the label immediately precedes the textbox in the tab order, the access key will take the user to the textbox.

28

Tab Order

• Tab order refers to the sequence in which the controls receive the focus when the user presses the Tab key.

• Most controls have a TabStop Property and a TabIndex Property.

• If the TabStop Property is set to True, focus can be directed to the control via the Tab key. (Labels don’t have a Tabstop Property so they can’t receive the focus.)

• The TabIndex Property indicates the control’s position in tab order.

29

Viewing Tab Order

• The TabIndex Property can be set for each control via the Properties Window.

• Alternatively, you can set the tab order for the entire form by choosing View, Tab Order in the menu. Click the controls in the order you wish them to receive focus.

ViewTabOrder

30

ToolTips

• ToolTips are message strings that pop into view when the mouse pointer hovers over an object with which they are associated.

• First add the ToolTip provider to a form. It will be named toolTip1 and will be in the component tray below the form. A ToolTip on toolTip1 Property is automatically added to the form and all controls.

• Next type helpful text in the ToolTip on toolTip1 Property for the form and controls.

Diner Specials with ToolTips

31

Let’s Do a Problem Together

Create a project to display the flag of one of 4 different countries, depending on the setting of the radio buttons. In addition, display the name of the country in a large label under the flag image. The user can also choose to display or hide the form’s title bar text, the country name, and the name of the programmer. Use check boxes for the display/hide choices. Include keyboard access keys for all radio buttons, check boxes, and buttons. Make the Exit button the Cancel button. Include Tooltips.