1. Object Oriented Programming
Graphical User Interfaces
Dr. Mike Spann

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
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
using System.Windows.Forms;
class App {
public static void Main()
Application.Run(new Form()); }

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, EventArgs args)
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 ImageForm imageForm = 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 PictureBox to 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 MouseEventArgs or 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, MouseUp and MouseMove events
With the ImageForm in 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 MouseMove event 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 bool shouldPaint = 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 int startX=-1;
private int startY, 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.Drawing namespace 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