Chapter 4 Windows Forms GUI/EDP

1
Chapter 4Windows FormsGUI/EDP

• Yingcai Xiao

2
.NET GUI Forms and Controls
3
Concepts GUI

• Windows Formsfor writing GUI based applications
  (Windows Applications).
• GUI Graphical User Interface, to make programs
  easy to use, WYSIWYG (What you see is what you
  get).
• Designing GUI-based Applications Look Feel
• Look gt Appearance (Layout Design)
• Feel gt Response (Event Handling)
• User gt Button Click gt Event gt Event Handler
  (a method).
• GUI-based application gt Event-driven
  programming
• Two main tasks of GUI-based EDP
• Design interface appearance (look)
• Implement even handlers (feel).

4
Concepts GUI Design Principles

• Users first let users control the program not
  the other way around.
• Elegant simple but powerful. E.g. iPot, iPhone,
  Google
• Intuitive dont need too much training to use
  it. Compare operating interfaces of cars and
  airplanes.
• Clarity use icons and keywords that are
  standardized or clearly defined. (AWK?). Give
  users hints when they hesitating.
• Hierarchical only put the most frequently used
  and most important controls at the top level.
• Speedy users do not have patience to wait for
  too long.
• Forgiving allow users to make mistakes. Undo and
  redo.
• Alignment use tables.
• Internationalization use symbols.
• More http//www.iie.org.mx/Monitor/v01n03/ar_ihc
  2.htm
• http//www.asktog.com/basics/firstPrinciples.ht
  ml

5

• .NET GUI Classes (Event Generators)

GUI Items are defined in System.Windows.Forms. Sys
tem.Windows.Forms.Form class all forms derive
from it. Properties (can be treated as public
data members) ClientRectangle (drawing area
not including the borders) ClientSize BorderStyle
Text (Title Bar) Methods OnPaint (event
handler for the PAINT event)
6

• Controls (Windows GUI Items)

System.Windows.Forms Control Classes 
Class Descriptions
Button Push buttons
CheckBox Check boxes
CheckedListBox List boxes whose items include check boxes
ComboBox Combo boxes
DataGrid Controls that display tabular data
DataGridTextBox Edit controls hosted by DataGrid controls
DateTimePicker Controls for selecting dates and times
7

• Controls (Windows GUI Items) Cont.

System.Windows.Forms Control Classes 
GroupBox Group boxes
HScrollBar Horizontal scroll bars
Label Label controls that display static text
LinkLabel Label controls that display hyperlinks
ListBox List boxes
ListView List views (display flat lists of items in a variety of styles)
MonthCalendar Month-calendar controls
8

• Controls (Windows GUI Items) Cont.

System.Windows.Forms Control Classes 
NumericUpDown Spinner buttons (up-down controls)
PictureBox Controls that display images
PrintPreviewControl Controls that display print previews
ProgressBar Progress bars
PropertyGrid Controls that list the properties of other objects
RadioButton Radio buttons
RichTextBox Rich-edit controls
9

• Controls (Windows GUI Items) Cont.

System.Windows.Forms Control Classes 
StatusBar Status bars
TabControl Tab controls
TextBox Edit controls
ToolBar Toolbars
ToolTip Tooltips
TrackBar Track bars (slider controls)
TreeView Tree views (display hierarchical lists of items)
VScrollBar Vertical scroll bars
10

• Programming a GUI APP using VS

• Start Visual Studio
• New project
• Windows Forms Application
• Toolbox-gtAll Windows Forms-gtCommon
  Controls-gtButton
• drag it to Form1
• Double click on button1 in Form1
• Add to button1_Click
• Text "Hello!"
• Build and run

11

• Programming a GUI APP using Notepad

• Use Notepad to write the program
• Create your form (GUI) by sub-classing
  System.Windows.Forms.Form.
• Add controls (GUI items) to the form.
• Code your program logic.
• Compile the program using csc.
• Example
• T\Xiao\Windows Programming\Examples\C4\DialogDemo
  \DialogDemo.cs

12

• Programming a Control

• 1. Instantiate the corresponding control class.
• 2. Initialize the control by setting its property
  values.
• Add the control to the form by calling
• the Add method of the forms Controls
  collection.
• 4. Map event handlers to the events.
• 5. Implement the event handlers.

13

• Adding a Button to a Form

//Create and initialize the button Button
MyButton new Button () MyButton.Location new
Point (16, 16) MyButton.Size new Size (96,
24) MyButton.Text "Click Me" // add the
button to the forms Controls collection. Controls
.Add (MyButton) // Add event handlers to
events MyButton.Click new EventHandler
(OnButtonClicked) // Write the event handlers
void OnButtonClicked (Object sender, EventArgs
e) T\Xiao\Windows Programming\Examples\C4\Di
alogDemo\DialogDemo.cs
14

• Dialog Boxes

Common Dialog Classes Defined in
System.Windows.Forms
Class Dialog Type
ColorDialog Color dialog boxes for choosing colors
FontDialog Font dialog boxes for choosing fonts
OpenFileDialog Open File dialog boxes for choosing files
PageSetupDialog Page Setup dialog boxes for entering page setup parameters
PrintDialog Print dialog boxes for entering print parameters
SaveFileDialog Save File dialog boxes for entering file names
15

• DialogDemo.cs

class MyDialog Form Label WidthLabel
TextBox WidthBox Button OKButton
public int UserWidth get return
Convert.ToInt32 (WidthBox.Text) set
WidthBox.Text value.ToString ()
public MyDialog () // Initialize the
dialog's visual properties ClientSize
new Size (296, 196) StartPosition
FormStartPosition.CenterParent
FormBorderStyle FormBorderStyle.FixedDialog
Text "Edit Ellipse" ShowInTaskbar
false
16

• DialogDemo.cs

// Create the dialog's controls
WidthLabel new Label ()
WidthLabel.Location new Point (16, 16)
WidthLabel.Size new Size (48, 24)
WidthLabel.Text "Width" WidthBox
new TextBox () WidthBox.Location new
Point (64, 12) WidthBox.Size new Size
(96, 24) WidthBox.TabIndex 1
17

• DialogDemo.cs

OKButton new Button ()
OKButton.Location new Point (184, 12)
OKButton.Size new Size (96, 24)
OKButton.TabIndex 3 OKButton.Text
"OK" OKButton.DialogResult
DialogResult.OK AcceptButton
OKButton // Add the controls to the
dialog Controls.Add (WidthLabel)
Controls.Add (WidthBox) Controls.Add
(OKButton)
18

• DialogDemo.cs

// In the parent form who starts the
dialog MyDialog dlg new MyDialog () if
(dlg.ShowDialog (this) DialogResult.OK)
MyWidth dlg.UserWidth // get the input from
the form Invalidate () // update the display of
the parent form
19
EDP
20
Concepts EDP

• Event-Driven Programming (EDP) Application waits
  (idles) after initialization until the user
  generates an event trough an input device
  (keyboard, mouse, ). The OS dispatches the event
  to the application who owns the active window.
  The corresponding event handler(s) of the
  application is invoked to process the event.

21

• Events

A menu in C char c bool done
false while(!done) cout ltlt Please make your
selection, q to end cin gtgt c switch(c)
case add( ) break case - sub(
) break case q done true
break
Event Loop
Event
Event Mapping Even Dispatching
Event Handler
22
Key Components of EDP
(1) Event Generators keyboard, GUI items
(buttons, menus, ), NUI devices. (2) Events /
Messages MouseClick, KeyDown, (3) Event
Loop an infinite loop constantly waits for
events. (4) Event Mapping / Event
Registration inform event dispatcher which
event an event hander is for. (5) Event
Dispatcher dispatch events to the
corresponding event handlers. (6) Event
Handlers methods for processing
events. OnMouseClick(),
23
Key Components of EDP in .NET
(1) Event Generators - commonly used GUI
items are predefined. - used by programmers /
GUI designers. (2) Events / Messages -
commonly used ones predefined. (3) Event Loop
- taken care of by .NET. (4) Event Mapping /
Registration - implemented by .NET. -
to be used by the programmers with
appropriate matching event delegate even
handler (5) Event Dispatching - taken care of
by .NET. (6) Event Handlers - to be
implemented by programmers.
24

• .NET EDP Classes

(1) GUI Items (Event Generators) System.Windows.F
orms.Form Button, Dialog, . (2) Events
predefined Windows Messages e.g. WM_KEYDOWN
(3) Event Loop Built in System.Windows.Forms.A
pplication Class static Run( ) method starts
an applications event loop.
25

• .NET EDP Classes

(4) Event Mapping / Registration System defined
ones have their names fixed e.g.
OnPaint(). Other handlers need to be registered
to the events with their corresponding
delegates by the programmer. e.g.
MyButton.Click  new EventHandler (OnButtonClick
ed) The Resource Editor will do this
automatically when the programmer
double-clicks on a button. (5) Event
Dispatching Built in HW-gtOS-gtActive
Application-gtEvent Object-gt DelegateInvoke-gtHa
ndlers. .
26

• .NET EDP Classes

• (6) Event Handlers
• Programmers work.
• void HandlerName (Object sender, EventArgs e)
• //sender can be omitted.
• HandlerName On EventName
• e.g. OnKeyDown(Object sender, EventArgs e)
• .NET based GUI EDP
• Identify needed GUI items code or visually
  design GUI.
• Identify related event register event handlers
  with the events via their delegates.
• Implement event handlers.

27

• Mouse and Keyboard Events/Handlers

OnKeyDown A key is pressed KeyEventArgs
OnKeyPress A character is typed on the keyboard KeyPressEventArgs
OnKeyUp A key is released KeyEventArgs
OnMouseDown A mouse button is pressed MouseEventArgs
OnMouseEnter The mouse cursor enters a form EventArgs
OnMouseOver The mouse cursor pauses over a form EventArgs
28

• Mouse and Keyboard Events/Handlers

OnMouseLeave The mouse cursor leaves a form EventArgs
OnMouseMove The mouse cursor moves over a form MouseEventArgs
OnMouseUp A mouse button is released MouseEventArgs
OnMouseWheel The mouse wheel is rolled MouseEventArgs
29

• Mouse and Keyboard Events/Handlers

• WM_KEYDOWN
• protected override void OnKeyDown (KeyEventArgs e)
  
• // from the form     
• if (e.KeyCode  Keys.F1) // Function key F1 was p
  ressed
• WM_CHAR protected override void OnKeyPress (KeyPr
  essEventArgs e)     
• if  (e.KeyChar  'C')  // Do something

30

• Other Form-Level Events

OnActivated A form is activated
OnClosed A form is closed
OnClosing A form is about to close
OnDeactivate A form is deactivated
OnGotFocus A form receives the input focus
OnLoad A form is created
OnLocationChanged A form is moved
OnLostFocus A form loses the input focus
OnPaintBackground A forms background needs repainting
OnSizeChanged A form is resized
31

• Main Menus top-level menu.

// Create a MainMenu object MainMenu menu new
MainMenu () // Add a File menu and populate it
with items MenuItem item menu.MenuItems.Add
("File") item.MenuItems.Add ("New", new
EventHandler (OnFileNew)) item.MenuItems.Add
("Open...", new EventHandler (OnFileOpen)) //
Add an Edit menu and populate it, too item
menu.MenuItems.Add ("Edit") item.MenuItems.Add
("Cut", new EventHandler (OnEditCut)) Processin
g Menu Commands void HandlerName (Object sender,
EventArgs e)
32

• Context Menus

Context Menus pop up context menus ContextMenu m
enu  new ContextMenu () menu.MenuItems.Add ("Op
en", new EventHandler (OnOpen)) menu.MenuItems.Ad
d ("Rename", new EventHandler (OnRename)) menu.M
enuItems.Add ("Delete", new EventHandler (OnDelet
e)) menu.Show (this, new Point (x, y)) Menu
Item States item.Checked  true
33

• Shortcuts and Accelerators

• Shortcut keys
• key combinations to directly invoke a command
• e.g. Control O to open a file
• item.MenuItems.Add (new MenuItem ("Open...",
  new EventHandler (OnFileOpen), Shortcut.CtrlO))
  
• http//www.computerhope.com/shortcut.htm
• Keyboard Accelerators to help accessing a menu
  item without using the mouse. An accelerator key
  related to a menu item is preceded with an
  and is displayed underlined.
• e.g. Alt F to access the File menus, then O to
  open a file
• item.MenuItems.Add (new MenuItem ("Open...",
  new EventHandler (OnFileOpen), Shortcut.CtrlO))
  
• Microsoft defines Keyboard Accelerators the same
  as Shortcuts.
• http//msdn.microsoft.com/en-us/library/ms645526(V
  S.85).aspx

34

• Drawing in .NET

• .NET Drawing Classes in System.Drawing.
• Graphics Device Interface (GDI) software to
  interface with the graphics hardware.
• GDI Graphics Primitives (System.Drawing.Drawing2D
  ) Bitmap, Font, HatchBrush, LinearGradientBrush,
  Pen, SolidBrush, TextureBrush, DrawArc,
  DrawCurve, DrawEllipse, DrawIcon, DrawImage,
  DrawLine, DrawPie, DrawPolygon, DrawString,
  FillEllipse, FillPie, FillPolygon,
  FillRectangle.

35

• Drawing in .NET cont.

• GDI stateless, a form passes parameters
  detailing output characteristics to every
  Graphics method it calls. For (stateless)
  Internet use.
• Old Windows GDI stateful, drawing parameters are
  stored as state variables in the GDIs device
  context.
• Example DialogDemo.cs OnPaint(PaintEventArgs
  e)
• Dispose your GDI Objects to avoid running out of
  GDI resourses. e.g. brush.Dispose()

36

• GDI and Beyond

• The ImageView Application (System.Drawing.Bitmap
  )
• Bitmap MyBitmap  new Bitmap (FileName)
• // BMPs, GIFs, JPEGs
• g.DrawImage (MyBitmap, ClientRectangle)
  ImageView.cs // How to write a Form Application
• Anchoring enables controls to be moved and
  resized as the form is resized
• MyControl.Anchor  AnchorStyles.Left  AnchorStyl
  es.Right // resize the control with the form
• Animation through transformations
• TranslateTransform, RotateTransform,
  ScaleTransform, Matrix Ops.

37

• GDI and Beyond

• DirectX Direct3D, DirectMusic, DirectSound.
• Xbox (based on DirectX) Video Game
• XNA (Xbox New Architecture, XNA is Not an
  Acronym)
• Video Game development and management
• WPF Windows Presentation Foundation
• Introduced in .NET 3.0
• Based on DirectX, not GDI
• 2D and 3D

38

• Summary

GUI-based windows application development GUI-b
ased programming. forms and controls, look
and feel EDP events and handlers GDI