Graphical Applications Fundamentals

These lessons assume that you already know the C# language. We assume that you have no prior knowledge of graphical application programming. In these lessons, we will create Windows applications, the type referred to as graphical user interface (GUI).

A typical application consists of more than one code file and can even be as complex as you want. To make it faster and a little easier to graphically create an application, you would need a good functional environment like Microsoft Visual Studio or Microsoft Visual C# 2010 Express. Using it, you can create a new project or you can open an existing one.

To create a Microsoft Visual C# project, you can display the New Project dialog box. To open the New Project dialog box:

• On the Start Page, click New Project...
• On the Standard toolbar, you can click the New Project button
• You can press Ctrl + N

In the New Project dialog box, select Visual C# Projects, select the type of project, give it a name, specify its directory, and click OK.

1. On the main menu, click File -> New Project...
2. In the top combo box, make sure .NET Framework 4 is selected.
   If you are using Microsoft Visual Studio, in the left list, expand the Visual C# node.
   In the middle list, click Empty Project
3. In the Name edit box, replace the name with Exercise1
    
   

4. Click OK. This creates a new project
5. On the main menu, click Project -> Add New Item...
6. In the middle list, click Code File
7. Change the Name to Exercise
    
   

8. Click Add
9. In the empty file, type the following:
   

   using System;
   
   public class Exercise
   {
       public static int Main(string[] args)
       {
           Console.ReadKey();
           return 0;
       }
   }

The instructions created for a Microsoft Visual C# project are written in plain English in a language easily recognizable to the human eye. After creating the file(s) of a project, you would compile the project to get an executable that becomes ready to be distributed to your users.

To compile and execute a project

• On the main menu, click Debug -> Start Debugging
• On the Standard toolbar, click the Start button
• Press F5

1. To execute the application, on the main menu, click Debug -> Start Debugging

2. After viewing the result, press Enter to close the DOS window

As opposed to creating a new project, you can open a project that either you or someone else created. To open an existing project:

• On the Start Page, click Open Project...
• On the main menu, click File -> Open Project...
• You can press Ctrl + O

This action would display the Open Project dialog box. This allows you to select a project and open it.

With Microsoft Visual Studio, you can create many projects on one solution. To add a project to a solution:

• On the main menu, you can click File -> Add -> New Project...
• In the Solution Explorer, right-click the name of the solution, position the mouse on Add, and click New Project...

Any of these actions would display the Add New Project dialog box. You can then select the type of project in the middle list, give a name to the project, and click OK. In the same way, you can add as many projects as you judge necessary to your solution. When a solution possesses more than one project, the first node in the Solution Explorer becomes Solution 'ProjectName' (X Projects). The ProjectName represents the name of the first project and X represents the current number of projects.

When you are using more than one project in the same solution, one of the projects must be set as the startup. The project that is set as the startup has its name in bold characters in the Solution Explorer. You can change and use any project of your choice as the startup. To do this, in the Solution Explorer, you can right-click the desired project and click Set As StartUp Project.

When a solution possesses more than one project, you can build any project of your choice and ignore the others. To build one particular project, you can right-click it in the Solution Explorer and click Build.

Besides the windows and functionalities we reviewed earlier, when you work on a project, there are other features that become available.

The Server Explorer is an accessory that allows you to access SQL Server databases without using the physical server and without opening Microsoft SQL Server Management Studio:

The items of this window display in a tree. To expand a node, you can click its + button. To collapse it, click its - button.

The Solution Explorer is a window that displays the file names and other items used in your project:

The items of this window display in a tree. To expand a node, you can click its + button. To collapse it, click its - button. To explore an item, you can double-click it. The result depends on the item you double-clicked.

The Solution Explorer can be used to create a new class, a new folder, or a reference. To perform any of these operations, you can right-click a folder node such as the name of the project, position the mouse on Add and select the desired operation. You can also perform any of these operations from the Project category of the main menu.

Besides adding new items to the project, you can also use the Solution Explorer to build the project or change its properties. If you add one or more other project(s) to the current one, one of the projects must be set as the default. That project would be the first to come up when the user opens the application. By default, the first project created is set as the default. If you have more than one project, to set the default, right-click the name of the desired project in Solution Explorer and click Set As StartUp Project.

The Solution Explorer also you to rename or delete some of the items that belong to your project.

1. To start a new project, on the main menu, click File -> New Project...
2. In the middle list, click Empty Project and change the Name to Exercise3
3. Click OK
4. On the main menu, click Project -> Exercise3 Properties...
5. In the left frame, make sure Application is selected.
   In the right frame, click the arrow of the Output Type combo box and select Windows Application
6. If the Solution Explorer is not visible, on the main menu, click View -> Solution Explorer.
   In the Solution Explorer, right-click Exercise3 and click Add Windows Form...
7. In the middle list, make sure Windows Form is selected.
   Set the Name to Exercise and click Add

The Class View displays the various classes used by your project, including their ancestry. The items of the Class View an organized as a tree list with the name of the project on top:

The Class View shares some of its functionality with the Solution Explorer. This means that you can use it to build a project or to add new class.

While the Solution Explorer displays the items that are currently being used by your project, the Class View allows you to explore the classes used in your applications, including their dependencies. For example, sometimes you will be using a control of the of the .NET Framework and you may wonder from what class that control is derived. The Class View, rather than the Solution Explorer, can quickly provide this information. To find it out, expand the class by clicking its + button.

1. If the Class View is not visible, on the main menu, click View -> Class View.
   In the Class View, expand the Exercise2 node if necessary
2. Right-click the name of the project Exercise3 -> Add -> Class...
3. In the middle list, make sure Class is selected. Change the Name to Central and click Add
4. Change the file as follows:
   

   using System;
   using System.Windows.Forms;
   
   namespace Exercise3
   {
       public class Central
       {
           public static int Main()
           {
               Application.Run(new Exercise());
   
               return 0;
           }
       }
   }

5. Execute the application to see the new form

On a form, the client area is the body of the form without the title bar, its borders and other sections we have not mentioned yet such as the menu, scroll bars, etc:

Besides the form, every control also has a client area. The role of the client area is to specify the bounding section where the control can be accessed by other controls positioned on it. Based on this, a control can be visible only within the client area of its parent. Not all controls can be parent.

Application programming primarily consists of adding objects to your project. Some of these objects are what the users of your application use to interact with the computer. As the application developer, one of your jobs will consist of selecting the necessary objects, adding them to your application, and then configuring their behavior. There are various ways you can get a control into your application. If you are using Notepad or a text editor to add the objects, you can write code. If you are using Microsoft Visual C#, you can visually select an object and add it.

To create your applications, there are two settings you will be using. If a control is displaying on the screen and you are designing it, this is referred to as design time. This means that you have the ability to manipulate the control. You can visually set the control's appearance, its location, its size, and other necessary or available characteristics. The design view is usually the most used and the easiest because you can glance at a control, have a realistic display of it and configure its properties. The visual design is the technique that allows you to visually add a control and manipulate its display. This is the most common, the most regularly used, and the easiest technique.

The other technique you will be using to control a window is with code, writing the program. This is done by typing commands or instructions using the keyboard. This is considered, or referred to, as run time. This is the only way you can control an object's behavior while the user is interacting with the computer and your program.