3-17
Your First Visual C# Express Project
Beginning Visual C# Express
3. Your First Visual C# Express Project
Review and Preview
In the first two classes, you learned about forms, controls, properties, and event methods. In this class, you’re going to put that knowledge to work in building your first simple Visual C# Express project. You’ll learn the steps in building a project, how to put controls on a form, how to set properties for those controls, and how to write your own event methods using a little C#.
Steps in Building a Visual C# Express Project
There are three primary steps in building a Visual C# Express Project:
Each of these steps is done with Visual C# Express in design mode.
Start Visual C# Express and start a new project (review the steps covered in Class 2, if necessary, naming it whatever you choose). Open the created form in the Design window. You should see something like this:
Sizing handle
You can resize the form if you want. This is one of the ‘Windows’ techniques you should be familiar with. Notice the form has a ‘sizing handle’ in the lower right corner. If you move the cursor over this handles, a little ‘double-arrow’ will appear. At that point, you can click and drag the corner to its desired position. This allows you to increase the width and height of the form at the same time. If you hold the cursor over the right or lower edge (until the arrow appears), you can resize the width and height, respectively. Practice sizing the form.
Placing Controls on the Form
The first step in building a Visual C# Express project is to place controls on the form in their desired positions. So, at this point, you must have decided what controls you will need to build your project. Many times, this is a time-consuming task in itself. And, I guarantee, you will change your mind many times. Right now, we’ll just practice putting controls on the form.
Controls are selected from the Visual C# Express Toolbox window (Windows Form controls). Click a tool in the toolbox and hold the mouse button down. Drag the selected tool over to the form. When the cursor pointer is at the desired upper left corner, release the mouse button and the default size control will appear. This is the classic “drag and drop” operation. Once the control is on the form, you can still move or resize the control. To move a control, left-click the control to select it (crossed-arrows will appear). Drag it to the new location, then release the mouse button. To resize a control, left-click the control so that it is selected. If you move the cursor over one its four sizing handles, a little ‘double-arrow’ will appear. At that point, you can click and drag the corresponding edge or corner to its desired position.
There are other ways to place a control on the form – you will learn them as you progress in your programming skills. One way is to simply double-click the control in the toolbox and it will appear in the upper left corner of the form. We prefer the drag and drop method since the control is placed where you want it.
Example
Make sure Visual C# Express is still running and there is a form on the screen as well as the Toolbox (click View on the main menu, then Toolbox if it is not there). Go to the toolbox and find the button control. It looks like this:
Drag and drop the button onto the form. Your form should look something like this:
Notice the sizing handles around the button. This indicates this is the active control. Click on the form and those handles disappear, indicating the form is now the active control. Click on the button again to make it active.
As mentioned, controls can always be moved and resized. To move a control you have drawn, click the object on the form (a cross with arrows will appear). Now, drag the control to the new location. Release the mouse button. To resize a control, click the control so that it is selected (active) and sizing handles appear. Use these handles to resize the object.
Click here to move object
Use sizing handles to resize control
Move the button around and try resizing it. Make a real big button, a real short button, a real wide button, a real tall button. Try moving the button around on the form.
Drag and drop another button control on the form. Move and resize it. Click from button to button noticing the last clicked control has the sizing handles, making it the active control. Spend some time placing controls on the form. Use other controls like labels, text boxes, radio buttons, and check boxes. Move them around, resize them. Try to organize your controls in nicely lined-up groups. These are skills that will be needed in building Visual C# Express projects.
You also need to know how to remove controls from a form. It is an easy process. Click on the control you want to remove. It will become the active control. Press the Del (delete) key on your keyboard. The control will be removed. Before you delete a control, make sure you really want to delete it. Delete any controls you may have placed on the form.
Setting Control Properties (Design Mode)
Once you have the desired controls on the form, you will want to assign properties to the controls. Recall properties specify how a control appears on the form. They establish such things as control size, color, what a control ‘says’, and position on the form. When you place a control on the form, it is given a set of default properties by Visual C# Express. In particular, its geometric properties (governing size and location) are set when you place and size the control on the form. But, many times, the default properties are not acceptable and you will want to change them. This is done using the Properties Window.
If Visual C# Express is not running on your computer, start it now. Start another new project. There should be a blank form in the design window. If it’s not there, select the View menu and choose Designer. Find the Properties Window (press <F4> if it’s not there):
Click the Alphabetic view (the button with A-Z on it) if Categorized properties are displayed. Also make sure the Properties button, next to the Alphabetic view button is depressed (always make sure this button is pressed when working with properties). Recall the box at the top of the properties window is the control list, telling us which controls are present on the form. Right now, the list only has one control, that being the form itself. Let’s look at some of the form’s properties.
First, how big is the form? All controls are rectangular in shape and two properties define the size of that rectangle. Scroll down the list of properties and find the Size property. You will see two numbers listed separated by commas. The first number is the Width of the form in pixels (a pixel is a single dot on the form). The second number is the Height of the form in pixels. Click on the little plus sign (+) in the box next to the Size property. The Width and Height properties will be displayed individually. Resize the form and notice the Height and Width properties change accordingly. You can also change the width and height of the form by typing in values for the desired property in the Properties window. Try it.
Scroll to the BackColor property. You probably guessed that this sets the background color of the form. The value listed for that property is probably Control (a light gray). To change the BackColor property, click on BackColor, then on the drop-down arrow that appears in the property side of the list. Choose one of the three ‘tabs’ that appear: Custom, Web, or System, then choose a color. My favorite is Custom. With this choice, a palette of colors will appear, you can choose a new color and notice the results.
Scroll to the Text property. This property establishes what is displayed in the form’s title bar. Click on Text, then type in something on the right side of the property window and press <Enter>. Notice the new Text appears in the form title bar.
That’s all there is to setting control properties. First, select the control of interest from the control list. Then, scroll down through properties and find the property you want to change. Click on that property. Properties may be changed by typing in a new value (like the Width and Height values and the Text property) or choosing from a list of predefined options (available as a drop-down list, like color values).
Let’s look at some of the button properties. Add a button control to your form. Select the button in the control list of the properties window. Like the form, the button is also rectangular. Scroll down to the Size property and click on the little plus (+) sign to expand this property. The Width property gives its width in pixels and Height gives its height in pixels. Two other properties specify the location of the button on the form. Scroll down to the Location property and expand it. Values for X (the Left property) and Y (the Top property) are displayed. Left gives the horizontal position (in pixels) of the left side of the button relative to the left side of the form. Similarly, Top is the vertical position (in pixels) of the top side of the button relative to the top of the form (the top of the form being defined as the lower part of the title bar). For a single button, these properties are:
Top
Height
Width
Left
Another important property for a button is the Text property. The text appearing on the button is the Text. It should indicate what happens if you click that button. Change the Text property of your button. Put a couple more buttons on the form. Move and size them. Change their Text and BackColor properties, if you want.
We have seen that to change from one control to another in the properties window, we can click on the down arrow in the controls list and pick the desired control. A shortcut method for switching the listed properties to a desired control is to simply click on the control on the form, making it the active control. Click on one of the buttons. Notice the selected control in the properties window changes to that control. Click on another button - note the change. Click on the form. The selected control becomes the form. You will find this shortcut method of switching from one control to another very useful as you build your own Visual C# Express projects.
Naming Controls
The most important property for any control is its Name. Because of its importance, we address it separately. When we name a control, we want to specify two pieces of information: the type of control and the purpose of the control. Such naming will make our programming tasks much easier.
In the Visual C# programming community, a rule has been developed for naming controls. The first three letters of the control name (called a prefix) specify the type of control. Some of these prefixes are (we will see more throughout the class):
Control Prefix
Button btn
Label lbl
Text Box txt
Check Box chk
Radio Button rdo
After the control name prefix, we choose a name (it usually starts with an upper case letter to show the prefix has ended) that indicates what the control does. The complete control name can have up to 40 characters. The name must start with a letter (this is taken care of by using prefixes) and can only contain letters (lower or upper case), numbers, and the underscore (_) character. Even though you can have 40 character control names, keep the names as short as possible without letting them lose their meaning. This will save you lots of typing.
Let’s look at some example control names to give you an idea of how to choose names. These are names used in the Sample project looked at in Class 1 and Class 2. Examples:
btnBeep - Button that causes a beep
txtType- Text box where information could be typed
rdoBlue - Radio button that changes background color to Blue
chkTop - Check box that displays or hides the toy top
picTop – Picture box that has the picture of a toy top
This should give you an idea of how to pick control names. We can’t emphasize enough the importance of choosing proper names. It will make your work as a programmer much easier.
It is important to note that the Visual C# language is case sensitive. This means the names picTop and PICTOP are not treated the same. Make sure you assign unique names to each control. We suggest mixing upper and lower case letters in your control names for improved readability. Just be sure when you type in control names that you use the proper case.
Setting Properties in Run Mode
To illustrate the importance of proper control names, let’s look at a common task in Visual C# Express. We have seen one of the steps in developing a Visual C# Express project is to establish control properties in design mode. You can also establish or change properties while your project is in run mode. For example, in the Sample project, when you clicked on a radio button, the BackColor property of the form was changed. When you clicked on a toy name, that toy either appeared or disappeared. To change a property in run mode, we need to use a line of C# code (you’re about to learn your first line of C#!). The format for this code is:
That is, we type the control’s name, a dot (same as a period or decimal point), the name of the property we are changing (found in the properties window), an equal sign (called an assignment operator), and the new value. Such a format is referred to as dot notation. Make sure the line ends with a semi-colon (;) – almost every line of code in Visual C# will end with a semi-colon.
In Sample, the code used to display the toy top on the form is:
...
Brambur