SPF WinForm Programs

1. Chapter 3 C# Windows Forms

2. Your first C# Windows Form

3. IDE: Code Editor and Property Window Code Editor Missing: how to get it back? Property Window Missing: how to get it back?

4. Your first C# Windows Form Program.cs Form1.cs

5. 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

6. Threaded Application

7. IDE: Form1.cs Form1.cs: code, design and design code Logic codes Form Designer Designer codes

8. 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]

9. 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

10. IDE: Form1.cs Contain the form design How to view this panel? In solution explorer: Double-click Form1.cs

11. 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

12. Toolbar Toolbar window is Context sensitive It will show the controls ONLY in the Design View: Eg Form1.cs [Design]

14. Common ControlsAnd others Use All Windows Forms to search for unknown Use Common Controls for normal usage

15. Properties Window How to view Properties Window? Menu: View > Properties Window The properties Window usually on the Bottom Right side

16. Properties Window Name of Control Sort by category Sort from A to Z Properties Event Property page: available when solution or project is selected

17. Properties Window Properties Try changing the Text property from “Form1” to “First WinForm App” Click on Form1 and type over

18. Properties Window Events Shows all the events available for this control Try add logic for Form1 Load event by double-clicking on “Load”

19. Properties Window Add the following codes into the Form1 Load event: Build and run the application

20. Adding Common Controls Three types of Common Control Display : Eg Label Input : Eg Textbox, Button Output: Eg Label

21. 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

22. 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

23. Button with its Click Event Add the following codes into the button1 Click event: Build and run the application, then click on the button

24. 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

25. Next Lesson More controls and problem solving exercises

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

27. 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?

28. Recap Form1 consisting of 3 views: What does each use for: Form1.cs? Form1.cs [Design]? Form1.Designer.cs?

29. 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

30. Recap Exercise 3.1: Button with click event that output a message

31. Exercise 3.2 Create the following GUI for Exercise32 Set the TabIndex property from top to bottom and from left to right

32. 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”

33. Containers Controls with Alignments

34. tabControlvstabPage

35. Exercise 3.3 Create the GUI for Exercise33: Multiline textbox

36. Exercise 3.4 Create the following GUI for exercise34 ReadOnly Multiline textbox

37. 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

38. 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

39. 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: EgbuttonSubmit, labelName (need not know what prefix for which control)

40. 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?

41. Guided Handson: Exercise 3.5 Name: Form1 Text: Exercise 3.5 Name: textBoxInput Text: blank TabIndex: 0 Name: textBoxOutput MultiLine: True ReadOnly: True TabIndex: 9 Name: buttonProcess Text: Process TabIndex: 1

42. 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

43. Guided Handson: Exercise 3.5 Output:

44. 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

45. Exercise 3.6 Output:

46. 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

47. Exercise 3.7 Output:

48. 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 + “";

49. Exercise 3.8 Output:

50. 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