Soup to Nuts Lab 1: A Tour of Visual Studio.Net

Objectives

This lab is intended as a beginner’s introduction to Visual Studio .NET 2003 and Windows Forms application development. The intended audience is programmers who have not used the Visual Studio tools before and want to learn how to create a simple Windows forms-based application. After completing this lab, you will be able to:

a. Navigate the Visual Studio .NET Integrated Development Environment (IDE)

b. Create a simple Windows Forms application

c. Leverage the many tools built into the IDE

d. Write some code

e. Perform basic debugging

Estimated Time to Complete This Lab: 45 minutes

Prerequisites

In order to do this lab, you should have some programming experience in any language, and should be familiar with using the Microsoft Windows User Interface.

Take Microsoft software for a test drive. With MSDN Virtual Labs, you get full access to all available Microsoft products through 90-minute modules, each with its own downloadable manual. Try this lab out now.

Exercise 1: Create a Simple Windows Forms Application

Scenario

In this exercise, you will start up the Visual Studio IDE, and you will create a simple Windows Form application. You will also add controls to a form.

        Tasks              Detailed Steps

1. Start Visual Studio 2003.
   
   
   1. Click Start | All Programs | Microsoft Visual Studio .NET 2003 | Microsoft Visual Studio .NET 2003.
      
2. Create a New Windows Forms Application Project
   
   Note: This is a dual-language lab intended for both C# and Visual Basic .NET. You can choose the language in which you want to code to complete the procedures. When you see the word language (for example, Visual <language> Projects), this indicates that the project can be either Visual C# Projects or Visual Basic Projects. Choose the language you are using, and then proceed.
   
   
   1. Click File and choose New | Project.
      
   2. Select Visual <language> Projects in the Project Types list.
      
   3. Choose Windows Application from the Templates list. 
      
   4. Type Northwind in the Name box. 
      
   5. Click OK.
      
      Visual Studio creates a new solution and a new Windows Forms project based on the template, and adds a Form1 class file, an AssemblyInfo class file, and some references to the project in the C:\Documents and Settings\<user>\My Documents\Visual Studio Projects folder, unless you change the Location: box.
      
      
3. Add a new form.
   
   
   1. Click View and choose Solution Explorer.
      
      If not already visible, the Solution Explorer pane becomes visible in the right-hand side of the IDE.
      
      
   2. In the Solution Explorer pane, right click Northwind project node, choose Add | Add Windows Form.
      
      The Add New Item dialog box displays.
      
   3. Type Customers in the Name box. 
      
   4. Click Open.
      
      Visual Studio creates a Customers form and adds it to the Northwind project, opening the new form in the forms designer.
      
      
4. Add some controls to the form.
   
   
   1. Click View and chose Toolbox.
      
      If not already visible, the Toolbox pane becomes visible in the left-hand side of the IDE.
      
      
   2. Drag a Label from the Toolbox and drop it onto the Customers form designer surface.
      
      The forms designer renders a label named Label1 on the Customers form. 
      
      
   3. Drag a TextBox from the Toolbox and drop it onto the Customers form designer surface.
      
      The forms designer renders a text box named TextBox1 on the Customers form. 
      
   4. Drag a Button from the Toolbox and drop it onto the Customers form designer surface.
      
      The forms designer renders a button named Button1 on the Customers form
      
      
   5. Using drag/drop, arrange the controls and size the form to look like the following form:
      
      Note:  forms and most controls have “handles” that when the object is selected, you can “grab” with the mouse in order to size them by left-clicking and holding with the mouse and dragging to size.
              
                      

Take Microsoft software for a test drive. With MSDN Virtual Labs, you get full access to all available Microsoft products through 90-minute modules, each with its own downloadable manual. Try this lab out now.

Exercise 2 Using the Visual Studio .NET IDE Tools

Scenario

In this exercise, you will examine the different tools the Visual Studio .NET 2003 IDE has to offer. You will learn how to use the Properties Pane to examine and adjust design-time settings for forms and controls to change their visible appearance while visually designing the form. This exercise assumes you have completed Exercise 1.

        Tasks              Detailed Steps

1. Examine the Properties Pane and Set Properties.
   
   
   1. Click View and choose Properties Window.
      
      The Properties pane becomes visible on the right-hand side of the Visual Studio .NET IDE.
      
      Note: you may need to size the Properties Pane so that the properties are clearly visible.
      
      
   2. In the Properties pane, choose Customers System.Windows.Forms.Form from the combo box at the top.
        
      
   3. In the Properties pane, click the Alphabetic button 
       
          
      
      The properties sort alphabetically by name.
      
      Note: by default, the properties pane sorts properties by category. 
      
   4. In the Properties pane, scroll until the Text property is visible.
      
   5. In the Text property row, replace the value Customers with Northwind Customers.
      
      In the Forms Designer, the title in the Title Bar of the form changes from Customers to Northwind Customers.
      
      
   6. In the Properties pane, scroll until BackColor is visible.
        
      
   7. On the BackColor row, click on the currently selected back ground color value (the default)
      
        
       
      A drop-down button appears in the BackColor value box. 
      
   8. Click the BackColor dropdown, and change the BackColor to ControlDark. 
      
   9. In the forms designer, click on the Label1 label.
      
      The Properties Pane now displays properties for Label1.
      
   10. In the Properties pane, change the Text property value from Label1 to Customer ID:
       
   11. In the Properties pane, scroll until the BackColor property is visible for the label Label1. 
       
   12. Change the BackColor to ControlLight. 
       
   13. Click TextBox1.
       
   14. Delete the Text property value.
       
   15. Click Button1. 
       
   16. Change the Text property for Button1 to Get Customer and in the designer, the form should now look like this: 
        
       
       
2. Examine the Solutions Explorer.
   
   
   1. In the Solution Explorer pane, expand the References node by clicking the plus sign next to it.
      
      A new windows forms project will have the following references added to it by default: System, System.Data, System.Drawing, System.Windows.Forms, and System.XML.
      
      
   2. In the Solution Explorer, right-click the Northwind project node; in the context menu that pops up, choose Add | Add New Item.
      
      
   3. From the Templates, select Windows Form. 
      
      
   4. In the Name box replace the text Form2 with Product. 
      
      
   5. Click Open.
      
      Visual Studio adds a new form to the Northwind project named Product.xx where xx will be cs for C# or vb for Visual Basic.
      
      
   6. In the Solution Explorer, click the Northwind project node and then click the Show All Files button.
       
      
      After clicking Show All Files, notice there is now a bin node visible and an obj node visible as well; these are folders in the working directory for the Northwind project, but are not included in the project.
      
      Note: in the event there are files in the project directory that are not part of the solution, those will show up now also.
      
      
3. Examine the Server Explorer.
   
   
   1. Click View and choose Server Explorer.
      
      The Server Explorer comes into view on the left-hand side of the IDE, if it wasn’t already visible. 
      
      
   2. In the Server Explorer, expand the Servers node by clicking the plus sign next to it.
      
      
   3. Expand client1.
      
      Notice the different tree nodes listed here that contain information about the server: Crystal Services, Event Logs, Message Queues, Performance Counters, Services, and SQL Servers. 
      
      
   4. Expand SQL Servers. 
      
      
   5. Expand CLIENT1 server node.
      
      
   6. Expand Northwind database node.
      
      Notice the database objects are listed for the Northwind database: Database Diagrams, Tables, Views, Stored Procedures, and Functions.
      
      
   7. Expand Tables. 
      
      
   8. Expand Customers. 
      
      
   9. Double-click Customers.
      
      The Customers table data is displayed in the IDE; you can change/add/delete data through this interface if your user account has permissions
      
      Note: the Server Explorer allows you to examine many different aspects of a given server
      
      
   10. Close the newly opened Customers table data tab.
       
       
4. Examine the Object Browser.
   
   
   1. Click View and choose Object Browser.
      
      The Object Browser displays in the center pane of the IDE, showing all referenced assemblies and projects at the root level of the Objects tree view.
      
      
   2. In the Objects tree, expand the system.windows.forms assembly node.
      
      The Object Browser displays all namespaces within the assembly as child nodes to the assembly node.
      
      
   3. Under the system.windows.forms assembly node, expand the {} System.Windows.Forms namespace node.
      
      The Object Browser displays all public enumerations, classes, structures, delegates and interfaces that exist in the namespace as child nodes to the namespace node. 
      
      
   4. In the Objects tree view, scroll down and click Form.
      
      The Members list shows all of the public properties and methods of the Form class; in addition at the bottom of the Object Browser pane, a definition of the selected class appears and a descriptive Summary: 
      
      
   5. In the Members list, scroll down and click ShowDialog().
      
      The description at the bottom of the Object Browser changes to reflect the definition of the selected item, in this case the ShowDialog method.
      
      Note: the Object Browser allows you to examine and view information for any class in any namespace existing in or referenced by the project.
      
      
5. Examine the Class View.
   
   
   1. Click View and choose Class View.
      
      The Class View displays on the right-hand side of the IDE.
      
      
   2. Expand the Northwind project root node.
      
      The namespaces in the Northwind project display as child nodes to the Northwind project root node prefixed by {} and in this case, only one: {}Northwind.
      
      
   3. Expand the {}Northwind namespace node.
      
      The classes currently in the {}Northwind namespace node display: Customers, Form1, and Product. 
      
      
   4. Expand the Customers node.
      
      Several nodes are displayed for the Customers class including Bases and Interfaces and several for the members (properties and methods) of the Customers class.
      
      
   5. In the Class View pane, double-click label1.
      
      The code pane comes up displaying the code for the Customers form with the definition for the declaration of label1 highlighted.
      
      Note: The class view allows you to examine and explore all public namespaces, classes, interfaces and enumerations in any projects in the current solution.
      
      
6. Examine the Help Facility.
   
   
   1. In the Solution Explorer, double-click the Customers form.
      
      If it wasn’t visible before, the Customers form is now visible in the Forms designer.
      
      
   2. In the forms designer, click the Get Customer button and press the F1 key on the keyboard.
      
      The center pane of the IDE displays help for Introduction to the Windows Forms Button Control.
      
      
   3. Click Help and choose Index.
      
      The Help Index pane appears on the right-hand side of the IDE.
      
      
   4. In the Index pane, in the Look for box, type Button.
      
      The Index pane displays button selected in the topics list with many other topics listed in alphabetical order.
      
      
   5. In the Index pane, scroll down until Button class (System.Windows.Forms) is visible and click it. 
      
      
   6. Click Help and choose Index Results.
      
      The Index Results pane displays in the bottom part of the IDE. 
      
      
   7. In the Index Results pane, double-click the first item in the list: titled Button Members (System.Windows.Forms).
      
      The help for the Button Members displays in the center pane of the IDE.

Take Microsoft software for a test drive. With MSDN Virtual Labs, you get full access to all available Microsoft products through 90-minute modules, each with its own downloadable manual. Try this lab out now.

Exercise 3: Write Some Code

Scenario

In this exercise, you will write a simple button-click event handler for the Get Customer button on the Customers form. You will declare some variables, concatenate strings and write code to display a message box.

        Tasks              Detailed Steps

1. Create a button-click event.
   
   Note: C# is a case-sensitive language. If using C#, Ensure that the code you type matches the code in to the right exactly.
   
   
   1. Return to the Customers.xx [Design] tab. 
      
   2. In the forms designer, Double-click the button with the text Get Customer.
      
      The code pane opens and you see an event handler stub, ready for you to write some code into. 
      
   3. Write some code into the button click event handler to declare a string variable named Value, display a message in a message box, concatenate a value and assign it to the variable, then display the variable’s value in a message box:
      
      C#
      
        private void button1_Click(object sender,
           EventArgs e)
        {
           string Value = textBox1.Text; 
           MessageBox.Show("Hello, Soup to Nuts!");
           Value = "You typed " + Value;
           MessageBox.Show(Value);
        }
      
      Visual Basic .NET
      
        Private Sub Button1_Click(ByVal sender As Object, _  
           ByVal e As EventArgs) Handles Button1.Click
           Dim Value As string = TextBox1.Text 
           MessageBox.Show("Hello, Soup to Nuts!")
           Value = "You typed " & Value
           MessageBox.Show(Value)End Sub
      
      
2. Create an application entry point.
   
   
   1. In the Solution Explorer, right-click Northwind, choose Add | Add Class.
      
      The Add New Item dialog displays with Class selected by default.
      
      
   2. In the Name box, clear the default text and type MainClass. 
      
   3. Click Open.
      
      The code pane opens for the new class in the center pane of the IDE.
       
   4. Add a Main sub routine MainClass class. The class should look like the following:
      
      C#
      using System;
      namespace Northwind
      {
        /// <summary>
        /// Summary description for MainClass.
        /// </summary>
        public class MainClass
        {
          public MainClass() 
          {
            //
            // TODO: Add constructor logic here
            //
        }
        public static void Main(string[] args)    
        {
          System.Windows.Forms. Application.Run(
            new Customers());
        }
      }
      
      Visual Basic .NET
      Public Class MainClass 
        Public Shared Sub Main(ByVal args as string())  
          System.Windows.Forms. Application.Run( _
            New Customers())
        End Sub
      End Class
      
      
3. Change the application entry point to be the one you just created.
   
   
   1. Delete the default Form1.
      
      C#
      
      In Solution Explorer, right-click Form1.cs and choose Delete, then click OK.
      
      Visual Basic.NET
      
      In Solution Explorer, right-click Form1.vb and choose Delete, then click OK.
      
      Visual Basic.NET Only
      
   2. In Solution Explorer right-click the Northwind project node and choose Properties.
      
   3. Change the Startup object in the Northwind Property Pages dialog, under Common Properties->General, in the Startup object: dropdown, choose Sub Main. 
      
   4. Click OK.

Take Microsoft software for a test drive. With MSDN Virtual Labs, you get full access to all available Microsoft products through 90-minute modules, each with its own downloadable manual. Try this lab out now.

Exercise 4: Basic Debugging

Scenario

In this exercise, you will examine the different tools the Visual Studio .NET 2003 IDE has to offer.

        Tasks              Detailed Steps

1. Set a breakpoint.
   
   
   1. In the code pane for the Customers.xx class, find the following line:
      
      C#
      Value = "You typed " + Value;
      
      Visual Basic .NET
      Value = "You typed " & Value 
      
   2. Left-click the above line to place the cursor there, right-click and choose Insert Breakpoint.
      
      The line becomes highlighted red by default, indicating a breakpoint is set on the line.
      
      
2. Run the code.
   
   
   1. Press F5 on the keyboard.
      
      The Visual Studio IDE starts up and the Customers form displays.
      
      
   2. In the Customer ID text box type 1234. 
      
   3. Click Get Customer.
      
      The Hello Soup to Nuts message box displays.
      
      
   4. Click OK.
      
      The IDE enters Break mode, and the line on which the current breakpoint is hit is highlighted the default yellow. By default, the Autos, Locals, and Watch 1 windows are organized in the lower-left pane of the IDE in break mode and the Call-Stack, Breakpoints, Command Window and Output windows are displayed in the lower right. These are all powerful features of the .NET debugger and will be hugely helpful for you to debug your code.
      
      
3. Step through the code.
   
   
   1. Click Debug and choose Step Over.
      
      The current line advances, indicated by the yellow highlight moving down one line.
      
      
   2. In the code pane, hover the mouse cursor over the word Value.
      
      A tool tip pops up showing the concatenated Value="You Typed 1234" .
      
   3. Click Debug and choose Step Into.
      
      A message box displays the text "You typed 1234" .
      
      
   4. Click OK.
      
      The IDE re-enters Break mode, and the line on which the current breakpoint is hit is highlighted the default yellow. 
      
      
   5. Click Debug and choose Continue.
      
      The IDE switches back to run mode and the Customers form comes to the foreground.
      
      
4. Stop the run.
   
   
   1. In the IDE, click Debug and choose Stop Debugging.

Take Microsoft software for a test drive. With MSDN Virtual Labs, you get full access to all available Microsoft products through 90-minute modules, each with its own downloadable manual. Try this lab out now.

Exercise 5: Configuring the Visual Studio .NET IDE

Scenario

In this exercise, you will explore a few of the many different configuration options available for customizing the .NET IDE.

        tasks              Detailed Steps

1. Turn on line numbers.
   
   
   1. Click Tools and choose Options.
      
      Note the many different categories for choosing options in the IDE. 
      
   2. In the Options tree, click Text Editor. 
      
   3. Click C# if you are using C#, Basic if you are using Visual Basic. 
      
   4. Click General. 
      
   5. Under Display, check Line numbers. 
      
   6. Click OK.
      
      Line numbers will now be displayed in the code pane on the left-hand margin.
      
      
2. Add a custom task tag to the tasks list.
   
   
   1. Click Tools and choose Options.
      
   2. In the Options tree, click Environment.
      
   3. Click Fonts and Colors.
      
   4. Ensure the Show settings for combo box is set to Text Editor.
      
      Notice the different categories you can set the font for. 
      
      
   5. Click the Font (bold type indicates fixed-width fonts) dropdown.
      
   6. Choose Comic Sans MS.
      
   7. Click the Size dropdown. 
      
   8. Choose 12.
      
   9. Click OK.
      
      View the code pane and notice how the font has changed. 
      
      
   10. Use steps a through i to change the Text Editor font back to Courier New, 10 pt. (the default) .
       
3. Add a custom task tag to the tasks list.
   
   
1. Click Tools and choose Options.
   
2. In the Options tree, click Environment. 
   
3. Under Environment, click Task List.
   
   Note the pre-loaded tasks in the Token list: HACK, TODO, UNDONE, and UnresolvedMergeConflict.
   
   
4. In the Name box, type RENAME. 
   
5. Click Add.
   
   RENAME now appears in the Token list:
   
6. Click OK 
   
7. In Solution Explorer, double-click Customers.
   
   The Customers form loads into the Forms Designer in the middle pane of the IDE.
   
8. On the Customers form, double-click the Get Customer button. 
   
9. In the code pane, enter a comment RENAME on the line above the button click
   
   method declaration.
   
   C#
   
   //RENAME
   private void button1_Click(object sender,
     EventArgs e)
    {
    ...
   
    Visual Basic .NET
     ‘RENAME
     Private Sub Button1_Click(ByVal sender As Object, _ 
       ByVal e As EventArgs) Handles Button1.Click
      ...
   
10. In Solution Explorer, double-click Customers.
    
    The Customers form loads into the Forms Designer in the middle pane of the IDE. 
    
    
11. Click View and choose Show Tasks | All.
    
    The Task List pane appears at the bottom of the IDE.
    
    
12. In the Task List pane, double-click RENAME.
    
    The code pane opens, and the RENAME comment is highlighted indicating that the developer needs to take action on the named task.

Take Microsoft software for a test drive. With MSDN Virtual Labs, you get full access to all available Microsoft products through 90-minute modules, each with its own downloadable manual. Try this lab out now.