Site Search

Lab 1: Using Visual Studio.NET & C#

Learning Objectives for Lab 1

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

Lab Orientation

At the start of today's lab, obtain a CS 446 account and password from your instructor and log in to this account.

There are a few things we should do to help set-up Visual Studio to work best in the Hebeler Labs.

Visual Studio Solutions

Visual Studio Solution Hierarchy
VS.NET Solution Organizational Structure

Visual Studio stores all applications in solutions. Contained inside of solutions are one or more projects. Both Solutions and Projects represent folders on the hard drive. Inside the project folders go the actual project files.

To help with grading, it is important that all your graded work, including programming assignments 1-4 and your prototype project, is saved neatly in your account's U:\ drive .

We will have 11 labs, 4 programming assignments, and one prototype project. To be consistent, everyone should save their work in solution folders named

Activity 1

New Project
New Project Dialog (VS 2005)

Activity: Create a New Project called WindowsUI in Solution Lab1

  1. From the File menu, choose New > Project
  2. From the New Project dialog box, choose Visual C# Windows Forms Application
  3. Enter WindowsUI as the project name, U:\ as the Location, and Lab1 as the solution name.
  4. Check Create directory for solution
  5. Click OK

Note: Only one solution can be open in Visual Studio at one time. To work with multiple solutions, you simple need to open up multiple instances of Visual Studio.

Projects

MVC Solution Hierarchy
Model-View-Controller (MVC)
Solution Architecture

Inside of solutions are one or more projects. Many times, with a simple application done by one person, a single project is sufficient. However, when scaling up in size and number of team members, using multiple projects to modularize the solution is a better idea. Typical projects in a medium-sized solution can be

  1. Windows User Interface
  2. Web Interface
  3. Business Logic Layer
  4. Database Access Layer
  5. Web Services
  6. Unit Tests

Activity 2

Solution Explorer
VS Solution Explorer (2005)

Activity: Solution and Project files

  1. Open up My Computer and look at the directory and file structure used to store your solution on your U:\ drive
  2. Compare this to the file structure you see in VS's Solution Explorer
    • Hint: Click Show All Files toolbar button in Solution Explorer
  3. Under the Project menu, select WindowsUI properties to view detailed information about the project.

 

 

C# Classes

C# is an object-oriented language very similar to Java. Classes are the fundamental organizing blocks for code. Projects typically contain one to many C# classes.

Files that contain C# classes use the .cs extension

Visual Studio created two files that contain C# classes for the WindowsUI project

Activity: View the Program class

  1. From Solution Explorer right-click Program.cs and select View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;

namespace WindowsUI
{
   static class Program
   {
      /// <summary>
      /// The main entry point for the application.
      /// </summary>
      [STAThread]
      static void Main()
      {
         Application.EnableVisualStyles();
         Application.SetCompatibleTextRenderingDefault(false);
         Application.Run(new Form1());
      }
   }
}
Notes:

Window Forms

Graphical user interface windows are known are called Forms in .NET, and are implemented as derived classes from the System.Windows.Forms.Form class.

Visual Studio added Form1 as the startup Form for your project.

We will add an additional class to our WindowsUI Project called MainForm to implement a GUI for our simple Hello World program.

Activity 3: Modify the start-up form for your WindowUI

  1. From the Solution Explorer, right-click Form1 and select View Code
  2. Place the cursor in the Form1 class name, right-click, select Refactor » Rename and change the class name to MainForm
  3. Use the Debug menu, Select Start Debugging to run you minimalist windows application.

Activity 3: Initialize your MainForm's properties

in MainForm's main method, use Visual Studio.NET's IntelliSense to manually add the code

  1. to set the size of the rendered window to 800 by 600 pixels
  2. Set the window's title bar caption to display today's date (use System.DateTime.Now)
    • Tip: Composite formatting of strings (e.g. {0:D}) is a handy way to embed one or more formatted values into a string.
namespace WindowsUI
{
   public partial class MainForm : Form
   {
      public MainForm()
      {
         InitializeComponent();

         //Initialize the Form's size in pixels
         this.Size = new Size(800, 600);

         //Display today's date in the Form's Title bar caption
         this.Text = String.Format("Hello - Today is {0:D}", DateTime.Now);
      }
   }
}

Adding Graphical Components to Forms

HelloWorldForm-small (3K)
MainForm with three controls

Controls are graphical user interface widgets such as buttons, scroll bars, and menus that are displayed inside of Forms.

Controls may be added to Forms by

Activity: Add three controls as instance variable to your MainForm class

public partial class MainForm : Form
{
   //Instance variables
   private TextBox nameTextBox;
   private Button  okButton;
   private Label   greetingLabel;

Activity: Add the InitializeMyControls() method to instantiate, set properties, and add the controls to the form's Controls collection

   private void InitializeControls()
   {
      //Initialize the text box
      nameTextBox = new TextBox();
      nameTextBox.Location = new Point(50, 50);

      //Initialize the ok button
      okButton = new Button();
      okButton.Location = new Point(60, 100);
      okButton.Text = "OK";

      //Initialize the hello greeting
      greetingLabel = new Label();
      greetingLabel.Location = new Point(50, 150);
      greetingLabel.Text = "Hello ";

      //Add the controls to the Form's Controls collection
      this.Controls.Add(nameTextBox);
      Controls.Add(okButton);
      Controls.Add(greetingLabel);
   }

Activity: Modify the constructor method to call InitializeMyControls()

      this.InitializeControls();

Handling User-Initiated Events

Most controls have user-initiated events associated with them. In our simple example, users can type in text into the nameTextBox or click on the okButton.

Events such as these are noticed by the operating system and, if your program desires to take action to handle the event, code must be written to instruct the program on what to do.

Two steps are required to handle events:

  1. Write the event-handling method's code
  2. Register the event-handling method with the control's event

Activity: Write the event-handler method for the button click

   private void okButton_Click(object sender, System.EventArgs e) 
   {
      //Concatenate the user's name to the greeting label
      greetingLabel.Text += nameTextBox.Text;
   }

Activity: Add the okButton_Click event handler method to the okButton's Click property (in this case it is the only one) in the InitializeMyControls() method

      //Initialize the ok button
      ...
      okButton.Click += new System.EventHandler(okButton_Click);