Lab 5: Window Controls

Learning Objectives for Lab 5

After completion of today's lab, you should be able to

Declare and instantiate simple Windows Controls through code
Create controls with Visual Studio.NET Designer
Use tab index and access keys with controls
Use the various controls to create a modern GUI

In addition, an introduction to the Program 2 assignment will be covered.

Window Controls

With the .NET framework, every built-in control is a class defined in the System.Windows.Forms namespace.

The fact that GUI controls are classes is very useful. As programmers we can instantiate an object of that type, set its properties (both its visual elements and data) in code, and call its methods.

Since C# is an object oriented programming language, we can also use inheritance and polymorphism to our advantage to create new derived classes and work with the inheritance hierarchy to create polymorphic methods.

We saw in Lab 1 how a programmer, working with Notepad or other text editor, can declare and instantiate a new instance of a TextBox, set its visual and data properties, and display it on a form.

//Declare and Instantiate a GUI object
TextBox TextBox1 = new TextBox();

//Set its properties
TextBox1.Location = new Point(60, 70);  
TextBox1.Size = new Size(200, 20);

//Add to the Form's collection of controls
this.Controls.Add(TextBox1);

If you want to remove the control at a later time, you may use the Remove() method of the Controls collection.

Creating controls with Visual Studio.NET

Typically, a Window developer will use a programming IDE like Visual Studio to take care of the instantiation and initial properties settings automatically.

Creating controls at design-time by dragging and dropping controls from Visual Studio's toolbox onto the design view generates C# code in the InitializeComponent() method of the *.Designer.cs file

Creating Windows user interfaces using the design view is definitely easier than creating controls by hand-coding, but it is less flexible and occasionally needs to be tweaked to make it do what you want. Bottom line, it is to your advantage to gain some familiarity with the hand-creation of controls rather than being totally dependent on VS.NET's designer toolbox.

By default, Microsoft Visual Studio uses
- inheritance to create a derived Form
- instantiation of built-in classes to create controls
  - The alternative is to use inheritance to create user defined custom controls.
  - Custom controls will be introduced in Lab 6
- Rather than encapsulating the controller logic elsewhere, the form acts as the controller directing the actions of the user-interface

Focus, tab order, and access keys

Input focus determines which control gets keyboard input. Buttons, when they have input focus appear with dotted border around the text. TextBoxes, when they have input focus, appear with a cursor inside them.

Users can change input focus by using the mouse or by pressing the tab key. However, unless you are careful in setting your tab index order, the input focus will shuffle through in an unexpected manner.

All controls that support focus provide a TabStop property. Set this property to false if you would like the control to not be able to be part of the tab sequence. To set the tab order, use the control's TabIndex property.

Some controls (such as buttons and menu items) allow a character in their caption to be highlighted and used as an access key. Then, if the user presses the Alt key and that character, the control is "clicked" automatically. To designate an access key, use the ampersand (&) before the letter.

Activity: Create a New Project called WindowsUI in Solution Lab5

From the File menu, choose New > Project and then Visual C# WindowsForms Application
Enter WindowsUI as the project name, U:\Labs\ as the Location, and Lab2 as the solution name.
Change the name of the Form1.cs file to MainForm.cs and set its Text to Lab 5

Activity - Access Keys and TabIndex Property

Use the designer to add seven controls to your form: 3 labels, 2 textboxes, and 2 buttons
Use Ampersands in the Control's Text property to add the access keys L, F, 1 and 2 to the controls
Change the tab order on the controls to those specified at right (use the view | tab order menu item to help)

Activity - Focus property

Add event handler methods to the two button to display the name in label3 either as Last, First or First Last
Add the code so that when the user clicks one of the buttons, it performs the appropriate action and then changes the focus to the other button
- e.g. lastFirstButton.Focus();
Add the code so that when the Form initially loads, the focus comes up in the first text box

   private void MainForm_Load(object sender, System.EventArgs e) {
     this.ActiveControl = textBox1;
   }

Activity - Enabled property

Add the code so that when the Form initially loads, both buttons come up as disabled
Add the event handler so that after the user has entered something into either text box, both buttons become enabled

Toolbox Controls

The Visual Studio.Net Toolbox contains the various controls you can drag onto a Windows form to construct a GUI.

The toolbox controls are derived from System.Windows.Forms.Control base class and share a rich inheritance structure.

window controls

Many of these controls you have used or seen before on GUIs

Labels
Button
TextBox
- New: Auto-Complete TextBoxes
MenuStrip
ToolStrip
LinkLabel
PictureBox
GroupBox
CheckBox
Panels
RadioButton
ListBox
DateTimePicker

New .net 2.0 controls include

MaskedTextBox
WebBrowser

Provider Controls

The Program 2 assignment will give you the opportunity to experiment with the different GUI controls in a Windows application. We will work with the Tool Tip, Help Provider, and Error Provider controls during Lab 8.