Chapter 3C# Windows Forms

Your first C# Windows Form

IDE: Code Editor and Property Window

Code Editor Missing: how to get it back?

Property Window Missing: how to get it back?

Your first C# Windows Form

Program.cs Form1.cs

Program.cs

Window Applications allow multi-threading Single Threaded Apartment [STAThread] Multi Thread Apartment [MTAThread]

[STAThread] // Attribute for Main() method

static void Main() Application.Run(new Form1()); // Begins running a

standard // application on the

current // thread

Threaded Application

IDE: Form1.cs

Form1.cs: code, design and design code

Logic codes

Form Designer

Designer codes

IDE: Form1.cs

Contain the logic you put in

How to view this panel? In solution explorer: Double-click

Form1.cs Menu: View > code OR click on [view

code icon]

IDE: Form1.cs

Contain the code representing the form design

Normally, do NOT modify

How to view this panel? In solution explorer: Double-click on

Form1.Designer.cs

IDE: Form1.cs

Contain the form design

How to view this panel? In solution explorer: Double-click

Form1.cs

Toolbar

How to find this window? Menu: View > Toolbar If AutoHide is set

Then Toolbar is usually hide on the left Just hover your mouse over the hidden Tooblar and reset AutoHide

Toolbar

Toolbar window is Context sensitive It will show the controls ONLY in the

Design View: Eg Form1.cs [Design]

Toolbar

Categories:- All Windows Forms- Common ControlsAnd others

Use All Windows Formsto search for unknown

Use Common Controlsfor normal usage

Properties Window

How to view Properties Window? Menu: View > Properties Window

The properties Window usually on the Bottom Right side

Properties Window

Name of Control

Sort by category Sort from A to Z

Properties Event

Property page: available when solution or project is selected

Properties Window

Properties Try changing the

Text property from “Form1” to “First WinForm App” Click on Form1

and type over

Properties Window

Events Shows all the

events available for this control

Try add logic for Form1 Load event by double-clicking on “Load”

Properties Window

Add the following codes into the Form1 Load event:

Build and run the application

Adding Common Controls

Three types of Common Control Display : Eg Label Input : Eg Textbox, Button Output: Eg Label

Button with its Click Event

In Form1.cs [Design] view From the Toolbar, drag a button onto

the form OR double-click on button Drag the button to the centre of the

form

Button with its Click Event

Go to Button Click event code: Double-click on OR Select button1, Click on Icon, then

double-clicking on Click event

Button with its Click Event

Add the following codes into the button1 Click event:

Build and run the application, then click on the button

Exercise 3.1

Make use of Button control, its Click event and output to Message Box

For those with textbook: page 28 - 51

For those without textbook http://alturl.com/uiak Your First C# Windows Form Adding Controls to a Blank C# Form Properties of a C# Control Adding C# Code to a Button

Next Lesson

More controls and problem solving exercises

Recap

A new Windows Forms Application has 2 *.cs files ?.cs ?.cs What are these two

files?

Recap

Program.cs Different from Console Program: threaded

and use Application.Run() method to start a new Form

Form1.cs Consists of 3 parts

What does each part consist of?

Recap

Form1 consisting of 3 views:

What does each use for: Form1.cs? Form1.cs [Design]? Form1.Designer.cs?

Recap

Windows application with at least one form A form may contain

Button TextBox Label … Etc

Event driven/activated : program responses to▪ Button Click▪ Mouse Move▪ Keypress

Recap

Exercise 3.1: Button with click event that output a message

Exercise 3.2

Create the following GUI for Exercise32

Set the TabIndex property from top to bottom and from left to right

Containers Controls with Alignments

Drag and drop a Container > TabControl to the form

Move the tabcontrol to align with the top and left side of form

Resize the tabcontrol to align with the bottom and right side of form

Set the Anchor property to “Top, Bottom, Left, right”

Containers Controls with Alignments

tabControl vs tabPage

Exercise 3.3

Create the GUI for Exercise33:

Multiline textbox

Exercise 3.4

Create the following GUI for exercise34

ReadOnly Multiline textbox

Output

Try relating to console program using Console.Write() or WriteLine()

Two ways to output for Winform Apps Pop up a message box with the output

Display the output on controls like label, textbox

Input

Get inputs from various controls TextBox: Text property (Eg textBox1.Text) CheckBox: Checked property (Eg

checkBox1.Checked) ListBox: SelectedIndex property

Where to find more information: http://alturl.com/e94q

Naming Convention for WinForm

Underscore is used only with events: eg Form1_Load, button1_Click

Do NOT use hungarian (lblName, btnProcess), but some programmers do use hungarian for GUI controls: Eg a submit button might be btnSubmit, a name label might be lblName – the textbook uses hungarian for GUI controls

Alternatively, spell in full: Eg buttonSubmit, labelName (need not know what prefix for which control)

Problem solving

Recall Console Program for Exercise 2.1

Your Input: 3 Output: 3 3 3 3 3

How do we do for WinForm App?

Guided Handson: Exercise 3.5

Name: Form1Text: Exercise 3.5

Name: textBoxInputText: blankTabIndex: 0

Name: textBoxOutputMultiLine: TrueReadOnly: TrueTabIndex: 9

Name: buttonProcessText: ProcessTabIndex: 1

Guided Handson: Exercise 3.5 Double click on [Process] button and add code

to buttonProcess_Click event:

string input; // Declare 2 string var string output; input = textBoxInput.Text; // Get input string // Set output string output = input + “ “ + input + “ “ + input + “ “ + input + “ “ + input ; textBoxOutput.Text = output; // Set onto screen

Guided Handson: Exercise 3.5

Output:

Exercise 3.6

Write a program that asks the user to type the width and the length of a rectangle and then outputs to the screen the area and the perimeter of that rectangle.Hint: 1) Assume that the width and length

are integers 2) Convert from string to integer: use int.Parse( … ) 3) Convert from integer to string: use .ToString()

=> Next page for screen output

Exercise 3.6

Output:

Exercise 3.7

Write a program that asks the user to type 2 integers n1 and n2 and exchange the value of n1 and n2 if n1 is greater than n2.

Hint:1) To swop 2 variable, you need another variable (n3) to store one of the value 2) Eg if (n1 > n2) { n3 = n2; n2 = n1; n1 = n3; }

“then” processing

Exercise 3.7

Output:

Exercise 3.8

Prompt user to key in 3 integers.Sort the integers in ascending order.Print the 3 integers as you sort.Prompt user to key in 3 integers.Sort the integers in ascending order.Print the 3 integers as you sort. Input1: 2 Input2: 1 Input3: 0 210 120 102 012

if (n1 > n2) { … }

if (n2 > n3) { … }

if (n1 > n2) { … }

Use this to append output:output = output + n1 + " " + n2 + " " + n3 + “\r\n";

Exercise 3.8

Output:

Summary

WinForm App Form1.cs and Program.cs (main() is threaded and use

Application.Run to start FORM1)

GUI design using Toolbar Controls Event activation – eg Button Click Problem solving – same as what we

did in console program