BIM211 – Visual Programming

1. BIM211 – Visual Programming Introduction

2. Contents • Information about the course • Visual Studio 2008 Environment • Designing a Simple Visual C# Program

3. Course Information

4. About the course

5. Course Contents

6. Course Contents (continued)

7. Grading Plan • 1st MT: 25%, Homework: 50%,Final: 25%. • Curve will be applied to the grades • If your grade is below 80%, you cannot get the grade AA, but it is not certain that if you pass 80% then you get AA. • If your grade is below 35%, you certainly fail, but this does not mean that you’ll get at least DD if you pass 35%.

8. Sample Grading Plan

9. Attendances • You don’t have to attend the classes but recent experiences show that the students who attend the classes are more successful • All students are responsible for visiting the website of the course at least two times in each week • Announcements, assignments, grades, and project subjects will be published on the website.

10. Supplementary Software • In this course, you’ll need Visual Studio 2008 software • You can download it from a shared folder as explained in ceng.anadolu.edu.tr/msdn.aspx page • Our website requires user name and password to read and submit homeworks • If you don’t have an account, please go see Cüneyt AKINLARto get one

11. Creating a New Project

16. The First Changes • The Name property is the first property you should change when you add a new object to your project. • Change the filename of the form from the Solution Explorer too. • Note: When you change the filename, Visual Studio asks you to change the name of the form.

18. Changing the Title of the Form • Changing the filename and name of the form does not change the title of the form which is displayed at the top-left corner of the window. • You should change the title of the form using the Text property.

20. Giving the Form an Icon • Giving the Form an Icon • In the Properties windows, change the Icon property of the form. • Changing the Size of the Form • Change the Width and Height properties of the form under the Size property. • Both values are represented in pixels. • You can also size a form by dragging its border.

21. Adding Controls to the Form • Use the Toolbox window. • Some controls in the toolbox have visible interface, but some not. • You can make the toolbox visible always by clicking the pushpin picture at the top-right corner.

22. Designing an Interface • Design the form’s user interface • Write the code behind the interface. • This procedure is generally the best to design a form.

23. Adding a Visible Control to a Form • Visible controls can be added in two ways: • By double-clicking the control • By dragging the control and dropping on the form. • You can place the controls wherever you want by dragging them on the form. • Let’s add two buttons and a PictureBox control to the form…

25. Adding an Invisible Control to a Form • Not all controls have physical appearance. • They are not designed for user interactivity. • Examples: OpenFileDialog and SaveFileDialog controls • You can add them to the control by the same way as the visible controls. • They are shown below the form at design time but they are not shown at the runtime.

26. Adding an OpenFileDialog Control • Add an OpenFileDialog control to the form and change the following properties:

28. Executing the Program • Simply press Ctrl+F5 • Runs the program normally • You can press F5 or click the debug button on the toolbar instead • But this runs the program in debug mode and it is a bit slower. • Clicking the buttons does not do anything now because we didn’t write any code for them!

29. Writing the Code Behind an Interface • Visual C# is an event-driven language, which means that code is executed in response to events. • These events might come from users, such as a user clicking a button and triggering its Click event, or from Windows itself.

30. Letting a User Browse for a File • When you double-click a control on a form in Design view, the default event for that control is displayed in a code window. • The default event for a Button control is its Click event. • Double-click the Select Picture button now to access its Click event in the code window.

32. The Content of the Method private void btnSelectPicture_Click(object sender, EventArgs e) { // Show the open file dialog box. if (ofdSelectPicture.ShowDialog() == DialogResult.OK) { // Load the picture into the picture box. picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName); // Show the name of the file in the form’s caption. this.Text = "Picture Viewer (" + ofdSelectPicture.FileName + ")"; } }

33. Terminating a Program Using a Code • Write the following code into the Click event of the Quit button: // Close the window and exit the application this.Close();

35. Execution of the Program

36. Exercises • Change your Picture Viewer program so that the user can also locate and select GIF files. (Hint: Change the Filter property of the OpenFileDialog control.) • Change the background color of the form. • Change the background color of the buttons. • Change the color of the texts on the buttons. • What happens if you try to display a larger image? How can you solve this problem?