C Sharp(C#)

Course: C#

Class: Batch15

Lecturer: Eng. Hassan Abdi Arale (Arale)

BENADIR UNIVERSITY
Faculty of Computer Science and IT
 C Sharp(C#)

Chapter Two

Introduction to Visual C#
Topics
• 2.1 Getting Started with Forms and Controls
• 2.2 Creating the GUI for Your First Visual C# Application
• 2.3 Introduction to C# Code
• 2.4 Writing Code for the Hello World Application
• 2.5 Label Control
• 2.6 Making Sense of IntelliSense
• 2.7 PictureBox Controls
• 2.8 Comments, Blank Lines, and Indentation
• 2.9 Writing the Code to Close an Application’s Form
• 2.10 Dealing with Syntax Error
2.1 Getting Started with Forms
and Controls
• A Visual C# application project starts with creating its
GUI with
– Designer
– Toolbox
– Property window
• In the Designer, an empty form is The project’s form
automatically created
– An application’s GUI is made of forms and controls
– Each form and control in the application’s GUI must have a
name as ID. The default blank form is named “Form1”
automatically.
Form’s Bounding Box and
Sizing Handles
• The default empty form has a dimension (size) of 300
pixels wide by 300 pixels high
• A form in Designer is enclosed with thin dotted lines
called the bounding box
• The bounding box has small sizing handles; you can use
them to resize the form

Thin dotted line

Sizing handle
The Property Window
• The appearance and other characteristics of a
GUI object are determined by the object’s
properties
• The Properties window lists all properties
– When selecting an object, its properties are displayed
in Properties windows
– Each property has 2 columns:
• Left: property’s name
• Right: property’s value
Changing a Property’s Value
• Select an object, such as the Form, by clicking it once
• Click View and select Properties if the Properties window
is not available
• Find the property’s name in the list and change its value
– The Text property determines the text to be displayed in the
form’s title bar
– Example: Change the
value from “Form1”
to
“My First Program”
Adding Controls to a Form
• In the Toolbox, select the Control (e.g. a Button),
then you can either:
– double click the Button control
– click and drag the Button control to the form
• On the form, you can
– resize the control using its bounding box and sizing
handles
– move the control’s position by dragging it
– change its properties in the Properties window
Rules for Naming Controls
• Controls’ name are identifiers of the controls
• The naming conventions are:
– The first character must be a letter (lower or uppercase does not
matter) or an underscore (_)
– All other characters can be alphanumerical characters or
underscores
– The name cannot contain spaces
• Examples of good names are:
– showDayButton
– DisplayTotal
– _ScoreLabel
2.2 Creating the GUI for Your
First Visual C# Application
• Components: a Form and a Button control
• Purpose:
– Create the application’s GUI
– Write the code that causes “Hello World” to
appear when the user clicks the button
(details are available in section 2.3)
2.3 Introduction to C# Code
• C# code is primarily organized in three ways:
– Namespace: a container that holds classes
– Class: a container that holds methods
– Method: a group of one or more programming statements that
perform some operations
• A file that contains program code is called a source code
file
Source Codes in the Solution
Explorer
• Each time a new project is created the following two
source code files are automatically created:
– Program.cs file: contains the application’s start-up code to be
executed when the application runs
– Form1.cs contains code that is associated with the Form1 form
• You can open them through the Solution Explorer
 Organization of the
Form1.cs
• A sample of Form1.cs: using System;
using System.Collections.Generic;
1. The using directives indicate which using System.ComponentModel;
namespaces of .NET Framework this using System.Data;
program will use. 1 using System.Drawing;
using System.Linq;
2. The user-defined namespace of the
using System.Text;
project not .NET Framework
using System.Windows.Forms;
namespaces
3. Class declaration namespace Hello_World
4. A method {
public partial class Form1 : Form
• C# code is organized as methods, {
which are contained inside public Form1()
2 3 {
classes, which are contained InitializeComponent(); 4
inside namespaces }
}
}
Adding Your Code
• GUI applications are event-driven which means they
interact with users
• An event is a user’s action such as mouse clicking, key
pressing, etc.
• Double clicking a control, such as Button, will link the
control to a default Event Handler
– An event handler is a method that executes when a specific event
takes place
– A code segment similar to the following will be created
automatically:
private void myButton_Click(object sender, EventArgs e)
{

}
Message Boxes
• A message box (aka dialog box) displays a message
• The .NET Framework provides a method named
MessageBox.Show
– C# can use it to pop up a window and display a message. A
sample code is (bold line):

private void myButton_Click(object sender, EventArgs e)

{
MessageBox.Show(“Thanks for clicking the button!”);
}

– Placing it in the myButton_Click event handler can display the

string in the message box when the button is clicked
2.4 Writing Code for the Hello
World Application
• The completed source code of Form1.cs is:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace Hello_World
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void myButton_Click(object sender, EventArgs e)

{
MessageBox.Show(“Thanks for clicking the button!”);
}
}
}
2.5 Label Controls
• A Label control displays text on a form and can
be used to display unchanging text or program
output
• Commonly used properties are:
– Text: gets or sets the text associated with Label control
– Name: gets or sets the name of Label control
– Font: allows you to set the font, font style, and font size
– BorderStyle: allows you to display a border around the control’s
text
– AutoSize: controls the way they can be resized
– TextAlign: set the text alignments
Handling Text Alignments
• The TextAlign property supports the following values:

• You can select them by clicking the down-arrow button

of the TextAlign property
Using Code to Display Output in a
Label Control
• By adding the following bold line to a Button’s event handler, a
Label control can display output of the application.

private void showAnswerButton_Click(object sender, EventArgs e)

{
answerLabel.Text = "Theodore Roosevelt";
}

• Notice that
–the equal sign (=) is known as assignment operator
–the item receiving value must be on the left of = operator
–the Text property accepts string only
–if you need to clear the text of a Label, simply assign an empty string (“”)
to clear the Text property
2.6 Making Sense of IntelliSense
• IntelliSense provides automatic code completion as you
write programming statements
• It provides an array of options that make language
references easily accessible
• With it, you can find the information you need, and insert
language elements directly into your code
2.7 PictureBox Controls
• A PictureBox control displays a graphic image
on a form
• Commonly used properties are:
– Image: specifies the image that it will display
– SizeMode: specifies how the control’s image is to be
displayed
– Visible: determines whether the control is visible on
the form at run time
The Image Property's Select
Resource Window
• The Image Property has a Select Resource
window. To use it:
– click the ellipses button to open it
– click the Import button and locate the
image file to display
Creating Clickable Images
• You can double click the PictureBox control in the
Designer to create a Click event handler and then add
your codes to it. For example,
private void catPictureBox_Click(object sender, EventArgs e)
{
MessageBox.Show("Meow");
}

And
private void spiderPictureBox_Click(object sender, EventArgs e)
{
spiderPictureBox.Visible = false
}
Sequential Execution of Statements
• Programmers need to carefully arrange the sequence of statements
in order to generate the correct results
• In the following example, the statements in the method execute in
the order that they appear:

Private void showBackButton_Click(object sender, EventArgs e)

{
cardBackPictureBox.visible = true;
cardFacePictureBox.visible = true;
}

• Incorrect arrangement of sequence can cause logic errors

2.8 Comments, Blank Links,
and Indentation
• Comments are brief notes that are placed in a program’s source
code to explain how parts of the program work
• A line comment appears on one line in a program

// Make the image of the back visible

cardBackPictureBox.Visible = true;

• A block comment can occupy multiple consecutive lines in a

program

/*
Line one
Line two
*/
 Using Blank Lines and
Indentation
• Programmers frequently use blank lines and indentation
in their codes to make the code more human-readable
• Compare the following two identical codes:

namespace Wage_Calculator namespace Wage_Calculator

{ {
public partial class Form1 : Form public partial class Form1 : Form
{ {
public Form1() public Form1()
{ {
InitializeComponent(); InitializeComponent();
} }
private void exitButton_Click(object sender, EventArgs e)
private void exitButton_Click(object sender, EventArgs e) {
{ // Close the form.
// Close the form. this.Close();
this.Close(); }
} }
} }
}
2.9 Writing the Code to Close
an Application’s Form
• To close an application’s form in code, use the following
statement:
this.Close();

• A commonly used practice is to create an Exit button and

manually add the code to it:
private void exitButton_Click(object sender, EventArgs e)
{
// Close the form.
this.Close();
}
2.10 Dealing with Syntax Errors
• Visual Studio code editor examines each statement as you type it
and reports any syntax errors that are found
• If a syntax error is found, it is underlined with a jagged line

This jagged line indicates an error

• If a syntax error exists and you attempt to compile and execute, you
will see the following window
That is……………….

Questions?