Spf chapter 03 WinForm

1,468 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,468
On SlideShare
0
From Embeds
0
Number of Embeds
226
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Spf chapter 03 WinForm

  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. Code Behind<br />Microsoft invented “Code Behind” using Partial Class – allows a class to be split into more than 1 file<br />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<br />Partial class Form1<br />{<br /> :<br />}<br />Partial class Form1<br />{<br /> :<br />}<br />
  32. 32. Where to output?<br />For Console Program: using Console.Write() or Console.WriteLine – may still use it for debugging => Output window<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 />
  33. 33. How to 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 />
  34. 34. 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 />
  35. 35. 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 />
  36. 36. 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 />
  37. 37. Containers Controls with Alignments<br />
  38. 38. tabControlvstabPage<br />
  39. 39. Exercise 3.3<br />Create the GUI for Exercise33:<br />Multiline textbox<br />
  40. 40. Exercise 3.4<br />Create the following GUI for exercise34<br />ReadOnly Multiline textbox<br />
  41. 41. Where to go from here?<br />MSDN> Windows Forms Programming <br /> > Controls to Use on Windows Forms <br /> > By Function<br /> URL: http://alturl.com/u63m<br />
  42. 42. MSDN: Controls to Use on Windows Forms > By Function <br />
  43. 43. MSDN: Controls to Use on Windows Forms > By Function <br />
  44. 44. MSDN: Controls to Use on Windows Forms > By Function <br />
  45. 45. MSDN: Controls to Use on Windows Forms > By Function <br />
  46. 46. An Example: Web Browser<br />Example:<br />Remarks<br /> 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.<br />
  47. 47. An Example: Web Browser<br />Example<br /> 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.<br />
  48. 48. An Example: Web Browser<br />Create the GUI<br />Program the code (code behind)<br />
  49. 49. Summary<br />Code Behind using Partial Class<br />How to use the Form Designer<br />How to find information on Controls using MSDN<br />Next Lesson: problem solving<br />Next week: variables and conditional logic<br />
  50. 50. Recap<br />Code Behind using Partial Class<br />How to use the Form Designer<br />How to find information on Controls using MSDN<br />
  51. 51. Problem Solving<br />Next part of the lesson focus on problem solving with the same set of questions from the console program<br />
  52. 52. 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 />
  53. 53. 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 />
  54. 54. 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 />
  55. 55. Guided Handson: Exercise 3.5<br />Output:<br />
  56. 56. 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 />
  57. 57. Exercise 3.6<br />Output:<br />
  58. 58. 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 />
  59. 59. Exercise 3.7<br />Output:<br />
  60. 60. 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 />
  61. 61. Exercise 3.8<br />Output:<br />
  62. 62. Exercise 3.9<br />Using the information from MSDN: GUI and codes, design a simple but interesting application. <br />After you have completed, screen capture the application and paste into a word document. In the reference section, list the resources you have used.<br /> MSDN> Windows Forms Programming <br /> > Controls to Use on Windows Forms <br /> > By Function<br /> URL: http://alturl.com/u63m<br />
  63. 63. 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 />

×