Object Oriented Programming

1. Object Oriented Programming Graphical User Interfaces Dr. Mike Spann m.spann@bham.ac.uk

2. Contents • Introduction • Creating a simple GUI • Visual programming • Example – A simple image viewer • Mouse event handling • Using Help • Summary

3. Introduction • Most modern applications come with a sophisticated user interface comprising • Push buttons • Selection boxes • Dialog boxes • Pull down menus • etc • This lecture focuses on the use of the classes found in the System.Windows.Forms namespace in the FCL to create these user interfaces • These are the classes that you will use if you are writing client-side GUI applications with the .NET Framework

4. Introduction • For even moderately sophisticated GUI’s, it is advisable to use visual programming techniques under Visual Studio • A lot of code is automatically generated • Easy placement of GUI components • Extensive use of properties to customize our GUI components • Essentially all we need to do is write the event handlers • However, it is important to understand how it all works and how we could write GUI’s ourselves from scratch

5. Introduction using System.Windows.Forms; class App { public static void Main() { Application.Run(new Form()); } } The Form class is a basic outer container which then holds GUI components such as menus, buttons and checkboxes Usually GUI’s comprise a class derived from Form to create a specialization that fits the need of the application

6. Introduction • This programs produces a simple outer container with basic windows functionality that we are familiar with • Maximize button • Minimize button • etc • We can easily add components to this to specialize its behaviour

7. Creating a simple GUI • We can create a GUI containing a button and add an event handler to provide some functionality • Normally much of this code would be generated automatically using visual programming techniques • We would just have to add the event handling code to specify the behaviour we require • In this case a simple pop up message box is displayed

8. Creating a simple GUI using System; using System.Windows.Forms; class App { public static void Main() { Application.Run(new MySimpleForm()); } } class MySimpleForm : Form { public MySimpleForm() { Button button = new Button(); button.Text = "My Button"; button.Click += new EventHandler(OnClick); this.Controls.Add(button); } void OnClick(Object sender, EventArgsargs) { MessageBox.Show("The Button Was Clicked!"); } }

9. Creating a simple GUI Demos\Simple Form\MySimpleForm.exe

10. Visual programming Visual programming allows us to create GUI’s in designer view using Visual Studio It involves dragging and dropping GUI components from a toolbox onto an outer Form container If we select the Windows Application project template, we automatically get the project up in designer view with a small amount of pre-generated code We can drag GUI components from the toolbox onto our form and position them as we wish Clicking on a component (eg a button), adds an event handler for that component and the view changes from designer view to code view allowing us to add code for the event handler

12. Visual programming • For example we can re-create our simple GUI and only have to write 1 line of code!! • Also we can easily customize the look of the GUI by updating the properties • Button text • Background colour • Button placement • etc

14. Visual programming using System; using System.Windows.Forms; namespace MySimpleForm_VP { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { // User code here!! MessageBox.Show("The Button Was Clicked!"); } } }

15. Visual programming • Automatically generated code is put in the xxxx.Designer.cs file • The InitializeComponent method involves creating the GUI components and their properties and registering event handlers • Also a main method is automatically generated which calls Application.Run(...)

16. namespace MySimpleForm_VP { partial class Form1 { . . . #region Windows Form Designer generated code private void InitializeComponent() { this.button1 = new System.Windows.Forms.Button(); this.SuspendLayout(); // // button1 // this.button1.Location = new System.Drawing.Point(-1, 0); this.button1.Name = "button1"; this.button1.Size = new System.Drawing.Size(75, 23); this.button1.TabIndex = 0; this.button1.Text = "My button"; this.button1.UseVisualStyleBackColor = true; this.button1.Click += new System.EventHandler(this.button1_Click); // // Form1 // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.ClientSize = new System.Drawing.Size(292, 266); this.Controls.Add(this.button1); this.Name = "Form1"; this.Text = "Form1"; this.ResumeLayout(false); } #endregion private System.Windows.Forms.Button button1; } }

17. using System; using System.Windows.Forms; namespace MySimpleForm_VP { static class Program { /// <summary> /// The main entry point for the application. /// </summary> [STAThread] static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run(new Form1()); } } }

18. Visual programming • The code is automatically updated when we customize our GUI appearance using the VS properties window

20. Visual Designer demo

21. Example – A simple image viewer • We can create a simple image viewer for loading and displaying images • We will use visual programming and write a small amount of code • This example will introduce the following GUI components • Menus • File dialogue boxes

22. Example – A simple image viewer • Menus can be easily added to a Form in design view • A MenuStrip is dragged across from the toolbox to create the menu bar • Textboxes are then available to type in the names of the menu’s and menu items • This can be repeated for sub menu’s • Shortcuts can be added by entering an & before the name

23. menu menu items menustrip icon

24. Example – A simple image viewer • We can add an OpenFileDialog box by dragging it from the toolbox • We also automatically add function headers for each event handler by clicking on the menu items and the OpenFileDialog icon • The only code we need are the function bodies of the event handlers

26. public partial class Form1 : Form { private readonly string initialImageDirectory= "C:\\Documents and Settings\\spannm\\Desktop\\Personal Stuff\\Images"; private Image loadedImage = null; public Form1() { InitializeComponent(); openFileDialog1.InitialDirectory=initialImageDirectory; } private void openToolStripMenuItem_Click(object sender, EventArgs e) { // Open image file dialog box and load an image openFileDialog1.ShowDialog(); } private void exitToolStripMenuItem_Click(object sender, EventArgs e) { // Exit application Application.Exit(); } private void closeToolStripMenuItem_Click(object sender, EventArgs e) { // Close the image } private void openFileDialog1_FileOk(object sender, CancelEventArgs e) { string fileName = openFileDialog1.FileName; if (fileName.Length != 0) { // Load the image } } }

27. Example – A simple image viewer • We need to decide how we wish to display the image • We could drag a PictureBox component inside the form • This then displays the image inside the Form container • It’s much more realistic to have the image in a completely independent window • This requires us to build a separate ImageForm class

28. Example – A simple image viewer • We can create a separate windows application comprising a Form containing a PictureBox • The PictureBox class has an Image property which is the image it is displaying • The Load() event handler displays the image when the form is created • All very easy to do in design view of VS

30. Example – A simple image viewer public partial class ImageForm : Form { private Image image; public ImageForm(Image im) { image = im; InitializeComponent(); } private void ImageForm_Load(object sender, EventArgs e) { pictureBox1.Image = image; } }

31. Example – A simple image viewer • The only real code we have to write is the event handler for loading and displaying an image from file • This appears in the openFileDialog1_FileOk() event handler which is called when the open file dialog box ‘OK’ button is pressed • An ImageForm object is created and the loaded image passed to its constructor • Minimal code for a fairly sophisticated application

32. Example – A simple image viewer public partial class Form1 : Form { private Image loadedImage = null; private ImageFormimageForm = null; . . private void closeToolStripMenuItem_Click(object sender, EventArgs e) { // Close the image if (imageForm != null) imageForm.Close(); } private void openFileDialog1_FileOk(object sender, CancelEventArgs e) { string fileName = openFileDialog1.FileName; if (fileName.Length != 0) { // Display the loaded image loadedImage = Image.FromFile(fileName); imageForm = new ImageForm(loadedImage); imageForm.Show(); } } }

33. Example – A simple image viewer Demos\Basic Image Viewer\Image Viewer Basic.exe

34. Example – A simple image viewer • It’s easy to change both the look and the behaviour of the tool without additional code • We simply change properties • For example, we can change how the image is displayed by altering the SizeMode property of the PictureBox • SizeMode=Normal - displays image without scaling in the top left hand corner of the PictureBox • SizeMode=AutoSize – resizes the PictureBoxto hold the image • etc

35. Example – A simple image viewer SizeMode=AutoSize SizeMode=Normal

36. Mouse event handling • Mouse events occur when the user clicks, presses and moves the mouse • Being able to handle mouse events can lead to highly interactive applications • Information about the mouse event is passed to an event handling method through an object of class MouseEventArgsor EventArgs • Typically this might be the x and y coordinates of the position of the mouse cursor • The delegate used to create the event handlers is MouseEventHandler

37. Mouse event handling • We can summarise mouse events and event properties as follows:

38. Mouse event handling • For example, we can paint graphics on the image as displayed in our image viewer • We make use of the MouseDown, MouseUpand MouseMove events • With the ImageFormin design view, we click on the mouse events for which we wish to add event handlers • Automatic code is generated for the empty functions • We need to fill in the function bodies

40. Mouse event handling • For example, we can combine the MouseDown and MouseMoveevent handler to draw freehand graphics as we move the mouse • Or we can just select coordinates on the image using MouseDown and draw the rectangle through opposing vertices • Useful in selecting a region of interest in an image processing application

41. Mouse event handling public partial class ImageForm : Form { private Image image; private boolshouldPaint = false; public ImageForm(Image im) { image = im; InitializeComponent(); } private void ImageForm_MouseMove(object sender, MouseEventArgs e) { if (shouldPaint) { Graphics graphics = CreateGraphics(); graphics.FillEllipse(new SolidBrush(Color.Blue), e.X, e.Y, 4, 4); graphics.Dispose(); } } private void ImageForm_MouseDown(object sender, MouseEventArgs e){shouldPaint = true;} private void ImageForm_MouseUp(object sender, MouseEventArgs e) {shouldPaint = false;} private void ImageForm_Paint(object sender, PaintEventArgs e) { Graphics graphics = e.Graphics; graphics.DrawImage(image, new Point(20,20)); } }

42. Mouse event handling Demos\Image Viewer Free Draw\Image Viewer.exe

43. Mouse event handling public partial class ImageForm : Form { private Image image; private intstartX=-1; private intstartY, endX, endY; public ImageForm(Image im) { image = im; InitializeComponent(); } private void ImageForm_MouseDown(object sender, MouseEventArgs e) { if (startX < 0) { startX = e.X; startY = e.Y; } else { endX = e.X; endY = e.Y; Graphics graphics = CreateGraphics(); Pen whitePen = new Pen(Color.White, 2); graphics.DrawRectangle(whitePen, new Rectangle(startX,startY,endX-startX,endY-startY)); } } private void ImageForm_Paint(object sender, PaintEventArgs e) { Graphics graphics = e.Graphics; graphics.DrawImage(image, new Point(20,20)); } }

44. Mouse event handling Demos\Image Viewer ROI\Image Viewer.exe

45. Mouse event handling • Both these examples use the Graphics object and other objects in the System.Drawingnamespace such as Pen and SoilidBrush • More about these concepts in the lecture on graphics and multimedia • We use the Graphics.DrawImage() method to draw the image in the Paint() event handler • Paint() is called automatically whenever the form needs repainting • For example when the form is moved or resized

46. Summary We have seen how we can create a simple GUI and add an event handler to determine the behaviour of the GUI We have also seen how we can do the same thing much simpler using visual programming techniques We have looked at a simple image viewer application which uses a menu and a file input dialog box We have looked at how we can handle mouse events