SPF WinForm Programs


Published on

SPF WinForm Programs

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

SPF WinForm Programs

  1. 1. Chapter 3<br />C# Windows Forms<br />
  2. 2. Your first C# Windows Form<br />
  3. 3. IDE: Code Editor and Property Window<br />Code Editor Missing: how to get it back?<br />Property Window Missing: how to get it back?<br />
  4. 4. Your first C# Windows Form<br />Program.cs<br />Form1.cs<br />
  5. 5. Program.cs<br />Window Applications allow multi-threading<br />Single Threaded Apartment [STAThread]<br />Multi Thread Apartment [MTAThread]<br />[STAThread] // Attribute for Main() method<br /> static void Main()<br />Application.Run(new Form1());<br />// Begins running a standard <br /> // application on the current <br /> // thread<br />
  6. 6. Threaded Application<br />
  7. 7. IDE: Form1.cs<br />Form1.cs: code, design and design code<br />Logic codes<br />Form Designer<br />Designer codes<br />
  8. 8. IDE: Form1.cs<br />Contain the logic you put in<br />How to view this panel?<br />In solution explorer: Double-click Form1.cs<br />Menu: View > code OR click on [view code icon]<br />
  9. 9. IDE: Form1.cs<br />Contain the code representing the form design<br />Normally, do NOT modify<br />How to view this panel?<br />In solution explorer: Double-click on Form1.Designer.cs<br />
  10. 10. IDE: Form1.cs<br />Contain the form design<br />How to view this panel?<br />In solution explorer: Double-click Form1.cs<br />
  11. 11. Toolbar<br />How to find this window?<br />Menu: View > Toolbar<br />If AutoHide is set<br /> Then Toolbar is usually hide on the left<br /> Just hover your mouse over the hidden<br />Tooblar and reset AutoHide<br />
  12. 12. Toolbar<br />Toolbar window is Context sensitive<br />It will show the controls ONLY in the Design View: Eg Form1.cs [Design] <br />
  13. 13. Toolbar<br />Categories:<br /><ul><li>All Windows Forms
  14. 14. Common Controls</li></ul>And others<br />Use All Windows Forms<br />to search for unknown<br />Use Common Controls<br />for normal usage<br />
  15. 15. Properties Window<br />How to view Properties Window?<br />Menu: View > Properties Window<br />The properties Window usually on the Bottom Right side<br />
  16. 16. Properties Window<br />Name of Control<br />Sort by category<br />Sort from A to Z<br />Properties<br />Event<br />Property page: available when solution or project is selected<br />
  17. 17. Properties Window<br />Properties<br /> Try changing the Text property from “Form1” to “First WinForm App”<br />Click on Form1 and type over<br />
  18. 18. Properties Window<br />Events<br /> Shows all the events available for this control<br />Try add logic for Form1 Load event by double-clicking on “Load” <br />
  19. 19. Properties Window<br />Add the following codes into the Form1 Load event:<br />Build and run the application<br />
  20. 20. Adding Common Controls<br />Three types of Common Control<br />Display : Eg Label<br />Input : Eg Textbox, Button<br />Output: Eg Label<br />
  21. 21. Button with its Click Event<br />In Form1.cs [Design] view<br />From the Toolbar, drag a button onto the form OR double-click on button<br />Drag the button to the centre of the form<br />
  22. 22. Button with its Click Event<br />Go to Button Click event code:<br />Double-click on OR<br />Select button1, Click on Icon, then double-clicking on Click event<br />
  23. 23. Button with its Click Event<br />Add the following codes into the button1 Click event:<br />Build and run the application, then click on the button<br />
  24. 24. Exercise 3.1<br />Make use of Button control, its Click event and output to Message Box<br />For those with textbook: page 28 - 51<br />For those without textbook<br /> http://alturl.com/uiak <br /> Your First C# Windows Form<br /> Adding Controls to a Blank C# Form<br /> Properties of a C# Control<br /> Adding C# Code to a Button<br />
  25. 25. Next Lesson<br />More controls and problem solving exercises <br />
  26. 26. Recap<br />A new Windows Forms Application has 2 *.cs files<br />?.cs<br />?.cs<br />What are these two files?<br />
  27. 27. Recap<br />Program.cs<br />Different from Console Program: threaded and use Application.Run() method to start a new Form<br />Form1.cs<br />Consists of 3 parts<br />What does each part consist of?<br />
  28. 28. Recap<br />Form1 consisting of 3 views:<br />What does each use for:<br />Form1.cs?<br />Form1.cs [Design]?<br />Form1.Designer.cs?<br />
  29. 29. Recap<br />Windows application with at least one form<br />A form may contain<br />Button<br />TextBox<br />Label<br />… Etc<br />Event driven/activated : program responses to<br />Button Click<br />Mouse Move<br />Keypress<br />
  30. 30. Recap<br />Exercise 3.1: Button with click event that output a message<br />
  31. 31. Exercise 3.2<br />Create the following GUI for Exercise32<br />Set the TabIndex property<br /> from top to bottom<br /> and from left to right<br />
  32. 32. Containers Controls with Alignments<br />Drag and drop a Container > TabControl to the form<br />Move the tabcontrol to align with the top and left side of form<br />Resize the tabcontrol to align with the bottom and right side of form<br />Set the Anchor property to “Top, Bottom, Left, right” <br />
  33. 33. Containers Controls with Alignments<br />
  34. 34. tabControlvstabPage<br />
  35. 35. Exercise 3.3<br />Create the GUI for Exercise33:<br />Multiline textbox<br />
  36. 36. Exercise 3.4<br />Create the following GUI for exercise34<br />ReadOnly Multiline textbox<br />
  37. 37. Output<br />Try relating to console program using Console.Write() or WriteLine()<br />Two ways to output for Winform Apps<br />Pop up a message box with the output<br />Display the output on controls like label, textbox<br />
  38. 38. Input<br />Get inputs from various controls<br />TextBox: Text property (Eg textBox1.Text)<br />CheckBox: Checked property (Eg checkBox1.Checked)<br />ListBox: SelectedIndex property <br />Where to find more information:<br /> http://alturl.com/e94q<br />
  39. 39. Naming Convention for WinForm<br />Underscore is used only with events: eg Form1_Load, button1_Click<br />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<br />Alternatively, spell in full: EgbuttonSubmit, labelName (need not know what prefix for which control)<br />
  40. 40. Problem solving<br />Recall Console Program for Exercise 2.1<br /> Your Input: 3<br /> Output: 3 3 3 3 3<br />How do we do for WinForm App?<br />
  41. 41. Guided Handson: Exercise 3.5<br />Name: Form1<br />Text: Exercise 3.5<br />Name: textBoxInput<br />Text: blank<br />TabIndex: 0<br />Name: textBoxOutput<br />MultiLine: True<br />ReadOnly: True<br />TabIndex: 9<br />Name: buttonProcess<br />Text: Process<br />TabIndex: 1<br />
  42. 42. Guided Handson: Exercise 3.5<br />Double click on [Process] button and add code to buttonProcess_Click event:<br />string input; // Declare 2 string var<br /> string output;<br /> input = textBoxInput.Text; // Get input string<br /> // Set output string<br /> output = input + “ “ + input + “ “ + input + “ “ +<br /> input + “ “ + input ;<br />textBoxOutput.Text = output; // Set onto screen<br />
  43. 43. Guided Handson: Exercise 3.5<br />Output:<br />
  44. 44. Exercise 3.6<br /> 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.<br /> Hint: 1) Assume that the width and length <br /> are integers<br /> 2) Convert from string to integer: <br /> use int.Parse( … )<br /> 3) Convert from integer to string:<br /> use .ToString()<br />=> Next page for screen output<br />
  45. 45. Exercise 3.6<br />Output:<br />
  46. 46. Exercise 3.7<br /> 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.<br /> Hint:1) To swop 2 variable, you need another <br /> variable (n3) to store one of the value<br /> 2) Eg<br /> if (n1 > n2)<br /> {<br />n3 = n2;<br /> n2 = n1;<br /> n1 = n3;<br /> } <br />“then” processing<br />
  47. 47. Exercise 3.7<br />Output:<br />
  48. 48. Exercise 3.8<br />Prompt user to key in 3 integers.<br />Sort the integers in ascending order.<br />Print the 3 integers as you sort.<br />Prompt user to key in 3 integers.<br />Sort the integers in ascending order.<br />Print the 3 integers as you sort.<br /> Input1: 2<br /> Input2: 1<br /> Input3: 0<br /> 210<br /> 120<br /> 102<br /> 012<br />if (n1 > n2) { … }<br />if (n2 > n3) { … }<br />if (n1 > n2) { … }<br />Use this to append output:<br />output = output + n1 + " " + n2 + " " + n3 + “ ";<br />
  49. 49. Exercise 3.8<br />Output:<br />
  50. 50. Summary<br />WinForm App<br />Form1.cs and<br />Program.cs (main() is threaded and use Application.Run to start FORM1)<br />GUI design using Toolbar Controls<br />Event activation – eg Button Click<br />Problem solving – same as what we did in console program<br />