3. WinForms Lab


Overview:  in this lab you'll work in Visual Studio .NET to create your first form-based, Windows GUI application.  Your GUI app will display information about each attendee. 

Part 1:  Designing the GUI

  1. Startup Microsoft Visual Studio .NET via the Start menu.  If this is the first time VS .NET has been started, you'll be presented with "My Profile" as the Startup page; here you can select your default keyboard mappings if you prefer.  When you're ready, click on "Get Started", click "New Project", select "Visual C# Projects" as the project type, click on the template for a "Windows Application", give the project a name like "AttendeesGUI", and finally, under Location, navigate to the work directory for this lab assignment (the lab directory is called "3-WinForms" ).  When all that is set, click OK.

  2. The first step is to design the GUI.  Click anywhere on the form to select it, and then press F4 to view the Properties window.  Set the form's Text property (i.e. what is displayed in the title bar) to "Attendees GUI App".  Then set the FormBorderStyle property to "FixedSingle" so the user cannot resize the form, and set the StartPosition property to "CenterScreen" so the form is centered when first shown.

  3. Next, drag-and-drop the necessary controls from the Toolbox onto the form as shown above:  a list box, 3 labels, 3 text boxes, and a command button.  Change the font sizes to 12 point (some to bold as well if you want), set the list box's name to lstAttendees (a control's name property is at the top of the Properties window list as (Name)), and set the names of the text boxes to txtFirstName, txtLastName, and txtEmail, respectively.  For each of text boxes, clear its Text property so nothing is displayed in the text box by default.  Finally, change the Text property of the command button to "Exit".

  4. Click on the form's background to select the form, and then drop-down the View menu and select "Tab Order".  Click on the controls in the order you want the focus to move when the user presses the tab key; when you're satisfied, drop-down the View menu again and deselect "Tab Order". 

  5. Save your work.  Now run (F5).  While the app doesn't do anything yet, it should appear centered, and as you press tab, the focus should move around the form appropriately.  You should be unable to resize the form as well. 

Part 2:  Programming the GUI

  1. First, code the Exit button to end the application.  Double-click on the button to reveal its Click event, and then end the application by programmatically closing the form via this.Close(); .  Run and test the button. 

  2. Next, let's create an Attendee class for holding info about each attendee.  Add a new class file to your project via the Project menu.  Each attendee has a first name, last name, and email address (all strings).  Code the constructor to take a single parameter of type System.IO.TextReader, and input 3 strings using the given TextReader object (one per line).  Finally, implement a ToString() method that returns the attendee's full name in the format "lastname, firstname". 

  3. Now it's time to program the application to open the file when it starts up, create an array and fill it with attendee objects, and then display the attendees in the list box.  You'll find in the work directory a text file called "attendees.txt".  The first line of this file contains the number of attendees in the file, followed by each attendee's info (one string per line).  Double-click on the form's background to reveal its Load event.  This is the proper event to code when you need to initialize a form before it is first shown.  Program this event to open the text file, read the # of attendees N, and create an array of size N.  Now read the rest of the file, creating attendees objects and storing the object references into the array.  When you're done, close the file, and then loop through the array, adding each attendee object to the list box for display on the screen.  For help with files, you may want to review the previous lab ("2-Types-Stmts-Methods").  Note that when you try to open the file, the literal path string should be @"..\..\..\attendees.txt", because Visual Studio runs your program from the project folder's bin\Debug directory, and the "attendees.txt" file is 3 levels up in the work directory.  Or you can just move the text file down into the bin\Debug directory, up to you. 

  4. Run and test, and behold!  You should now see the attendees listed in the list box.

  5. The list box display is not sorted.  Stop the application, click on the list box, press F4 to view the Properties window, and set the list box's Sorted property to True.  Run again, and the attendees should now be displayed in sorted order.

Part 3:  Displaying Email Addresses

  1. The last step is to display the email address when the user clicks on an attendee's name in the list box. 

  2. Double-click on the list box to reveal its SelectedIndexChanged event.  This event is triggered whenever the user selects an item in the list box (in other words, whenever the underlying index of the selected item has changed).  The list box (which should be named lstAttendees) has a property called SelectedItem, which is either (a) null if nothing is selected, or (b) a reference to the selected object.  Type cast the contents of this property into a local variable of type Attendee.  If the value is null, clear the contents of each text box, otherwise fill the text boxes with the attendee's info.  Note that you want to manipulate the Text property of each text box in order to clear / display data; also recall that the names of the text boxes are txtFirstName, txtLastName, and txtEmail. 

  3. Run and test.  You should now be able to click on each attendee in the list box and display their email address.  Good work!

If time permits...

  1. You'll notice that when the application first starts up, nothing is preselected in the list box.  This is easily fixed by modifying the form's Load event to set the list box's SelectedIndex property to 0 (the first element in the list box).  You need to fill the list box before doing this, and to be careful, only do this if you actually added at least one attendee to the list box.  Run and test, and the first attendee should now be preselected.  Interestingly, also note that their info was displayed in the text boxes --- how did that happen?  As is often the case in GUI programming, changing the property of an object triggers one or more events in the system.  In this case, setting the SelectedIndex property of a list box immediately triggers its SelectedIndexChanged event, which we coded earlier to display attendee info.  Strange, but this is exactly the behavior we wanted!

  2. Take a well-deserved break :-)