Chapter 4 Windows Forms GUI/EDP
description
Transcript of Chapter 4 Windows Forms GUI/EDP
![Page 1: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/1.jpg)
Chapter 4Windows Forms
GUI/EDP
Yingcai Xiao
![Page 2: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/2.jpg)
.NET GUIForms and Controls
![Page 3: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/3.jpg)
Concepts: GUI
Windows Forms—for 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 => Appearance (Layout Design)Feel => Response (Event Handling) User => Button Click => Event => Event Handler (a method).GUI-based application => Event-driven programming
![Page 4: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/4.jpg)
.NET GUI Classes (Event Generators)
GUI Items are defined in System.Windows.Forms.System.Windows.Forms.Form class: all forms derive from it.
Properties (can be treated as “public” data members): ClientRectangle (drawing area not including the borders)
ClientSizeBorderStyleText (Title Bar)
Methods: OnPaint (event handler for the PAINT event)
![Page 5: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/5.jpg)
System.Windows.Forms Control Classes
Controls (Windows GUI Items)
Class DescriptionButton 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
![Page 6: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/6.jpg)
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
![Page 7: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/7.jpg)
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
![Page 8: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/8.jpg)
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
![Page 9: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/9.jpg)
Programming a GUI APP using Notepad
1. Use Notepad to write the program2. Create your form (GUI) by sub-classing System.Windows.Forms.Form.3. Add controls (GUI items) to the form. 4. Code your program logic.5. Compile the program using csc.
Example:T:\Xiao\Windows Programming\Examples\C4\DialogDemo\DialogDemo.cs
![Page 10: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/10.jpg)
Programming a Control
1. Instantiate the corresponding control class.2. Initialize the control by setting its property values.3. Add the control to the form by calling
add on the form’s Controls collection.4. Map event handlers to the events.5. Implement the event handlers.
![Page 11: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/11.jpg)
Adding a Button to a Form
//Create and initialize the buttonButton MyButton = new Button ();MyButton.Location = new Point (16, 16);MyButton.Size = new Size (96, 24);MyButton.Text = "Click Me";
// add the button to the form’s Controls collection.Controls.Add (MyButton);
// Add event handlers to eventsMyButton.Click += new EventHandler (OnButtonClicked);
// Write the event handlers void OnButtonClicked (Object sender, EventArgs e){… }
T:\Xiao\Windows Programming\Examples\C4\DialogDemo\DialogDemo.cs
![Page 12: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/12.jpg)
Common Dialog Classes Defined in System.Windows.Forms
Dialog Boxes
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
![Page 13: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/13.jpg)
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;
DialogDemo.cs
![Page 14: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/14.jpg)
// 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;
DialogDemo.cs
![Page 15: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/15.jpg)
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);} }
DialogDemo.cs
![Page 16: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/16.jpg)
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 Invalidate (); // update the display of the parent
form }
![Page 17: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/17.jpg)
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: don’t 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_ihc2.htm
http://www.asktog.com/basics/firstPrinciples.html
![Page 18: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/18.jpg)
EDP
![Page 19: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/19.jpg)
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 window. The corresponding event handler(s) of the application is invoked to process the event.
![Page 20: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/20.jpg)
EventsA menu in C++:
char c;bool done = false;while(!done) {
cout << “Please make your selection, q to end:”cin >> c;switch(c) {case “+”:
add( );break;
case “-”:sub( ); break;
case “q”:done = true; break;
}}
Event Loop
Event Mapping
Event
Event Handler
![Page 21: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/21.jpg)
(1) Event generators: keyboard, GUI items (buttons, menus, …).
(2) Events / Messages (Mouse Click, Key Down, …)
(3) Event Loop (an infinite loop constantly waits for events)
(4) Event Mapping (dispatch events to corresponding event handlers)
(5) Event Handlers (methods for processing the events: OnMouseClick(), …)
(6) Event registration: inform event mapper which event an event hander is for.
Key Components of EDP
![Page 22: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/22.jpg)
(1) Event generators- commonly used GUI items are predefined.
(2) Events / Messages - commonly used ones predefined.
(3) Event Loop: - taken care of by .NET.
(4) Event Mapping: - taken care of by .NET.
(5) Event Handlers - to be implemented by programmers.
(6) Event Registration - code implemented by .NET. - to be used by programmers.
Key Components of EDP in .NET
![Page 23: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/23.jpg)
(1) GUI Items (Event Generators)System.Windows.Forms.FormButton, Dialog, ….
(2) Events: predefined Windows Messages:e.g. WM_KEYDOWN
(3) Event Loop:Built in System.Windows.Forms.Application Class: static Run( ) method starts an application’s event loop.
.NET EDP Classes
![Page 24: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/24.jpg)
(4) Event Mapping:System defined ones have their names fixed: e.g. OnPaint().Other event handlers need to be added to the handler list of the corresponding event.e.g. :
MyButton.Click += new EventHandler (OnButtonClicked); The Resource Editor will do this automatically
when the programmer double-clicks on a button. (5) Event Handlers:
void HandlerName (Object sender, EventArgs e) //sender can be omitted. HandlerName = “On” “EventName”e.g. OnKeyDown(Object sender, EventArgs e);
.NET EDP Classes
![Page 25: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/25.jpg)
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
![Page 26: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/26.jpg)
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
![Page 27: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/27.jpg)
WM_KEYDOWN protected override void OnKeyDown (KeyEventArgs e) { // from the form if (e.KeyCode == Keys.F1) // Function key F1 was pressed { … }}
WM_CHAR protected override void OnKeyPress (KeyPressEventArgs e){
if (e.KeyChar == 'C') { … } // Do something
}
Mouse and Keyboard Events/Handlers
![Page 28: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/28.jpg)
Other Form-Level EventsOnActivated 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 form’s background needs repainting
OnSizeChanged A form is resized
![Page 29: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/29.jpg)
// Create a MainMenu objectMainMenu menu = new MainMenu ();
// Add a File menu and populate it with itemsMenuItem 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, tooitem = menu.MenuItems.Add ("&Edit");item.MenuItems.Add ("Cu&t", new EventHandler (OnEditCut));
Processing Menu Commandsvoid HandlerName (Object sender, EventArgs e)
Main Menus: top-level menu.
![Page 30: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/30.jpg)
Context Menus: pop up context menus
ContextMenu menu = new ContextMenu ();menu.MenuItems.Add ("&Open", new EventHandler (OnOpen));menu.MenuItems.Add ("&Rename", new EventHandler (OnRename));menu.MenuItems.Add ("&Delete", new EventHandler (OnDelete));menu.Show (this, new Point (x, y));
Menu Item States: item.Checked = true;
Context Menus
![Page 31: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/31.jpg)
Shortcut keys: key combinations to directly invoke a commande.g. Control O to open a fileitem.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 fileitem.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(VS.85).aspx
Shortcuts and Accelerators
![Page 32: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/32.jpg)
.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.
Drawing in .NET
![Page 33: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/33.jpg)
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 GDI’s device context.
Example: DialogDemo.cs – OnPaint(PaintEventArgs e)
Dispose your GDI+ Objects to avoid running out of GDI+ resourses. e.g. brush.Dispose();
Drawing in .NET cont.
![Page 34: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/34.jpg)
The ImageView Application (System.Drawing.Bitmap)Bitmap MyBitmap = new Bitmap (FileName);
// BMPs, GIFs, JPEGsg.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 │ AnchorStyles.Right; // resize the control with the form
Animation through transformations: TranslateTransform, RotateTransform, ScaleTransform, Matrix Ops.
GDI and Beyond
![Page 35: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/35.jpg)
DirectX: Direct3D, DirectMusic, DirectSound. Xbox (based on DirectX): Video GameXNA (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
GDI and Beyond
![Page 36: Chapter 4 Windows Forms GUI/EDP](https://reader033.fdocuments.in/reader033/viewer/2022061617/5681679c550346895ddcdef5/html5/thumbnails/36.jpg)
Summary
GUI-based windows application development:
GUI-based programming. forms and controls, look and feelEDPevents and handlersGDI