Download - Spf chapter 03 WinForm
![Page 1: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/1.jpg)
Chapter 3C# Windows Forms
![Page 2: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/2.jpg)
Your first C# Windows Form
![Page 3: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/3.jpg)
IDE: Code Editor and Property Window
Code Editor Missing: how to get it back?
Property Window Missing: how to get it back?
![Page 4: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/4.jpg)
Your first C# Windows Form
Program.cs Form1.cs
![Page 5: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/5.jpg)
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
![Page 6: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/6.jpg)
Threaded Application
![Page 7: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/7.jpg)
IDE: Form1.cs
Form1.cs: code, design and design code
Logic codes
Form Designer
Designer codes
![Page 8: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/8.jpg)
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]
![Page 9: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/9.jpg)
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
![Page 10: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/10.jpg)
IDE: Form1.cs
Contain the form design
How to view this panel? In solution explorer: Double-click
Form1.cs
![Page 11: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/11.jpg)
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
![Page 12: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/12.jpg)
Toolbar
Toolbar window is Context sensitive It will show the controls ONLY in the
Design View: Eg Form1.cs [Design]
![Page 13: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/13.jpg)
Toolbar
Categories:- All Windows Forms- Common ControlsAnd others
Use All Windows Formsto search for unknown
Use Common Controlsfor normal usage
![Page 14: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/14.jpg)
Properties Window
How to view Properties Window? Menu: View > Properties Window
The properties Window usually on the Bottom Right side
![Page 15: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/15.jpg)
Properties Window
Name of Control
Sort by category Sort from A to Z
Properties Event
Property page: available when solution or project is selected
![Page 16: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/16.jpg)
Properties Window
Properties Try changing the
Text property from “Form1” to “First WinForm App” Click on Form1
and type over
![Page 17: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/17.jpg)
Properties Window
Events Shows all the
events available for this control
Try add logic for Form1 Load event by double-clicking on “Load”
![Page 18: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/18.jpg)
Properties Window
Add the following codes into the Form1 Load event:
Build and run the application
![Page 19: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/19.jpg)
Adding Common Controls
Three types of Common Control Display : Eg Label Input : Eg Textbox, Button Output: Eg Label
![Page 20: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/20.jpg)
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
![Page 21: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/21.jpg)
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
![Page 22: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/22.jpg)
Button with its Click Event
Add the following codes into the button1 Click event:
Build and run the application, then click on the button
![Page 23: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/23.jpg)
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
![Page 24: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/24.jpg)
Next Lesson
More controls and problem solving exercises
![Page 25: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/25.jpg)
Recap
A new Windows Forms Application has 2 *.cs files ?.cs ?.cs What are these two
files?
![Page 26: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/26.jpg)
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?
![Page 27: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/27.jpg)
Recap
Form1 consisting of 3 views:
What does each use for: Form1.cs? Form1.cs [Design]? Form1.Designer.cs?
![Page 28: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/28.jpg)
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
![Page 29: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/29.jpg)
Recap
Exercise 3.1: Button with click event that output a message
![Page 30: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/30.jpg)
Code Behind
Microsoft invented “Code Behind” using Partial Class – allows a class to be split into more than 1 file
Prior to “Code Behind”- code for logic and design were placed in the same Class file: “Inline”. “Code Behind” allows logic and design code to be separated
Partial class Form1{ :}
Partial class Form1{ :}
![Page 31: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/31.jpg)
Where to output?
For Console Program: using Console.Write() or Console.WriteLine – may still use it for debugging => Output window
Two ways to output for Winform Apps Pop up a message box with the output
Display the output on controls like label, textbox
![Page 32: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/32.jpg)
How to input?
Get inputs from various controls TextBox: Text property (Eg textBox1.Text) CheckBox: Checked property (Eg
checkBox1.Checked) ListBox: SelectedIndex property
![Page 33: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/33.jpg)
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)
![Page 34: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/34.jpg)
Exercise 3.2
Create the following GUI for Exercise32
Set the TabIndex property from top to bottom and from left to right
![Page 35: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/35.jpg)
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”
![Page 36: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/36.jpg)
Containers Controls with Alignments
![Page 37: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/37.jpg)
tabControl vs tabPage
![Page 38: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/38.jpg)
Exercise 3.3
Create the GUI for Exercise33:
Multiline textbox
![Page 39: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/39.jpg)
Exercise 3.4
Create the following GUI for exercise34
ReadOnly Multiline textbox
![Page 40: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/40.jpg)
Where to go from here?
MSDN> Windows Forms Programming
> Controls to Use on Windows Forms
> By Function
URL: http://alturl.com/u63m
![Page 41: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/41.jpg)
MSDN: Controls to Use on Windows Forms > By Function
![Page 42: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/42.jpg)
MSDN: Controls to Use on Windows Forms > By Function
![Page 43: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/43.jpg)
MSDN: Controls to Use on Windows Forms > By Function
![Page 44: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/44.jpg)
MSDN: Controls to Use on Windows Forms > By Function
![Page 45: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/45.jpg)
An Example: Web BrowserExample:
Remarks The WebBrowser control lets you host Web pages
and other browser-enabled documents in your Windows Forms applications. You can use the WebBrowser control, for example, to provide integrated HTML-based user assistance or Web browsing capabilities in your application. Additionally, you can use the WebBrowser control to add your existing Web-based controls to your Windows Forms client applications.
![Page 46: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/46.jpg)
An Example: Web Browser Example The following code example demonstrates how to
implement an address bar for use with the WebBrowser control. This example requires that you have a form that contains a WebBrowser control called webBrowser1, a TextBox control called TextBoxAddress, and a Button control called ButtonGo. When you type a URL into the text box and press ENTER or click the Go button, the WebBrowser control navigates to the URL specified. When you navigate by clicking a hyperlink, the text box automatically updates to display the current URL.
![Page 47: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/47.jpg)
An Example: Web Browser
Create the GUI Program the code (code behind)
![Page 48: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/48.jpg)
Summary
Code Behind using Partial Class How to use the Form Designer How to find information on Controls
using MSDN
Next Lesson: problem solving
Next week: variables and conditional logic
![Page 49: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/49.jpg)
Recap
Code Behind using Partial Class How to use the Form Designer How to find information on Controls
using MSDN
![Page 50: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/50.jpg)
Problem Solving
Next part of the lesson focus on problem solving with the same set of questions from the console program
![Page 51: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/51.jpg)
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?
![Page 52: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/52.jpg)
Guided Handson: Exercise 3.5
Name: Form1Text: Exercise 3.5
Name: textBoxInputText: blankTabIndex: 0
Name: textBoxOutputMultiLine: TrueReadOnly: TrueTabIndex: 9
Name: buttonProcessText: ProcessTabIndex: 1
![Page 53: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/53.jpg)
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
![Page 54: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/54.jpg)
Guided Handson: Exercise 3.5
Output:
![Page 55: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/55.jpg)
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
![Page 56: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/56.jpg)
Exercise 3.6
Output:
![Page 57: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/57.jpg)
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
![Page 58: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/58.jpg)
Exercise 3.7
Output:
![Page 59: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/59.jpg)
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";
![Page 60: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/60.jpg)
Exercise 3.8
Output:
![Page 61: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/61.jpg)
Exercise 3.9
Using the information from MSDN: GUI and codes, design a simple but interesting application.
After you have completed, screen capture the application and paste into a word document. In the reference section, list the resources you have used.
MSDN> Windows Forms Programming > Controls to Use on Windows Forms > By Function
URL: http://alturl.com/u63m
![Page 62: Spf chapter 03 WinForm](https://reader033.vdocuments.us/reader033/viewer/2022061208/54886675b47959140d8b56f7/html5/thumbnails/62.jpg)
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