Download C# UI Programming: Exploring Components, Events, Graphics, and Animation - Prof. Doug A. B and more Study notes Computer Science in PDF only on Docsity!
User Interface Programming in C#:
Basics and Events
Chris North
CS 3724: HCI
GUI Development: Goals
1. General GUI programming concepts
- GUI components, layouts
- Event-based programming
- Graphics
- Direct Manipulation, Animation
- MVC architectures
- Data-driven UIs
2. C#, .NET
- Windows Forms
- Events, delegates
- GDI+
- Threads
- ADO.net
Goal: learn other languages quickly, same concepts
C# Background
- C# = VB + Java (best of both!)
- Basic statements identical to C++, Java
- Object-oriented only!
- main( ) is inside a class
- No global variables
- āinterfacesā
- No pointers (object references only), safe
- No delete: automatic garbage collection
- Error Handling, exceptions (try, catch)
- GUI: Windows Forms
- Libraries: Data structs, databases, ā¦
- Component-based: (āassemblyā) reflection
- Visual Studio
- .NET: CLR, multi-language, web, XML, services, ā¦
C# Materials
ā¢ MS Visual Studio .Net (2005)
ā¢ MSDN (integrates with VS)
ā¢ VS Dynamic Help
ā¢ Books
- MS Visual C# .NET, MS Press
- C# language
- Window Forms, GDI+
ā¢ MSDN online
GUI Topics
ā¢ Components
ā¢ Events
ā¢ Graphics
ā¢ Manipulation
ā¢ Animation
ā¢ MVC
Components API
ā¢ Properties
- Like member fields
- Get, set
- E.g. Button1.Text = āPress Meā
ā¢ Methods
- Like member functions
- Tell component to do something
- E.g. Button1.Show( )
ā¢ Events
- Like callback functions
- Receive notifications from component
- E.g. Button1.Click(e)
GUI Tree Structure
Panel Button Form Label GUI Internal structure containers Panel Button Form Label
Typical command line program
ā¢ Non-interactive
ā¢ Linear execution
program:
main() { code; code; code; code; code; code; code; code; code; code; code; code; }
Delegates
1. Register with a control to receive events
- Give Control a function pointer to your callback function
- this.button1.Click += new EventHandler(this.button1_Click);
2. Receive events from control
- Control will call the function pointer
- private void button1_Click(object sender, EventArgs e){ Button1 Button1_click() callback click
- button1_Click( )
- button1.Click += button1_click( )
Graphics
ā¢ Screen is like a painterās canvas
ā¢ App must paint its window contents
- GUI components paint themselves
- Anything else: Programmer
1. How to paint?
2. When to paint?
Button
Pixels Coordinate System
ā¢ Upside-down Cartesian
ā¢ Ywindow = height - Ycartesian
(0,0) (^) (width,0) (0,height) (width, height)
Component Hierarchy
ā¢ Each component has its own subwindow
- Subwindow = rectangular area within parent component
- Has own coordinate system
ā¢ Clipping:
- Canāt paint outside its subwindow
- Canāt paint over child components? (0,0) (wp, hp)
(wb, hb) Panel Button Button
Painting Components
ā¢ Can paint any component
ā¢ Panel is good for custom graphics area
Button Panel
Painting in C#
1. The GDI+ graphics library:
using System.Drawing;
2. Get the āgraphics contextā of a component:
Graphics g = myPanel.CreateGraphics( );
3. Paint in it:
g.DrawLine(pen, x1,y1, x2,y2);
Graphics Primitives
Draw Fill
- Line (pt1,pt2)
- Lines (pt list)
- Arc (rect)
- Curves, Bezier (pt list)
- Ellipse (rect)
- Rectangle (rect)
- Polygon (pt list)
- Image (img, x,y)
- String (string, x,y) (^) label
MyApp Open WinExp, Notepad
Close WinExplorer
Repaint event sent to: Desktop, MyApp
Desktop gets repaint event
MyApp gets repaint event
MyApp Form gets repaint event
MyApp gets repaint event
MyApp Form forwards repaint event to Button
Repainting Static Graphics
ā¢ Repaint event:
- Erase (fill with background color) - usually automatically done by the control
- Draw graphics
In C#
ā¢ Receive āpaintā event:
(select the event in VisStudio)
this.Paint += new PaintEventHandler(this.Form1_Paint); private void Form1_Paint(object sender, PaintEventArgs e){ Graphics g = e.Graphics; g.DrawLine(new Pen(Color.Red,10), 10,10,300,300); }
ā¢ OR: Override the OnPaint method
override void OnPaint(PaintEventArgs e){ base.OnPaint(e); //preserve base class functionality Graphics g = e.Graphics; g.DrawLine(new Pen(Color.Red,10), 10,10,300,300); }
ā¢ Can call Refresh( ) to force a repaint
Typical interaction sequence
ā¢ select item by point-n-click: Hit testing
ā¢ act on item by drag: Dynamic update
ā¢ release item
MouseDown MouseMove MouseUp
1. Hit Testing
ā¢ Mouse down, mouse over
ā¢ Which dot did user click on?
ā¢ Using components:
- Make each dot a simple component, like a Button
- Hit testing automatic, each component is a subwindow
- Receive events from components, check event source
- rectangular items, not scalable, inherit from UserControl
ā¢ Using custom graphics:
- Get click (x,y) from MouseDown event
- Iterate through data structure, test for hit
- E.g: if rect.contains(x,y)
- Data structure for fast lookup?
2. Dynamic Updating
ā¢ Dragging, stretching, ā¦
ā¢ MouseMove events
ā¢ Using components:
- mouseDown store x,y click in component
- mouseMove
- Calculate x,y delta
- Move component by delta
ā¢ Using graphics:
- (need to erase it, repaint other graphics, repaint new item)
- Calculate delta, calculate new item location, store
- Call Refresh( )
- Draw new graphics in Paint event
Problem
ā¢ Dynamic manipulation on top of other graphics
- Need to preserve (redraw) other graphics
- Examples: MacDraw, powerpoint
ā¢ Simple solution:
- Call refresh( ) or invalidate( ) while dragging
- Paint( ) event restores other graphics
- But: if lots of graphics, too slow & flashing!
Problem: Flashing
ā¢ Ugly flashing when repaint:
- Paint background
- Redraw shapes
Solution: Double buffering
Solution: Double buffering
ā¢ Double buffered repaint:
- Draw all graphics in temporary off-screen image Ā» Paint background color Ā» Paint shapes
- Then paint image to Window
ā¢ Bonus: C# can do this for you!
- Form1.DoubleBuffered = true; //VS 2005
- control maintains off-screen image SetStyle(ControlStyles.DoubleBuffer | //VS 2003 ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, true);
Rubber Band (XOR painting)
ā¢ Want multi-selection by stretching a rubber band
ā¢ Draw rubber band by inverting pixel colors
- drawing with XOR once inverts background colors
- drawing with XOR twice returns to original look
- No need to refresh( ), fast! // in mouseMove event: // erase previous rect: (must use screen coords, not window coords) ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed); // <update rect here based on mouse x,y> // draw new rect: ControlPaint.DrawReversibleFrame(rect, Color.Black, FrameStyle.Dashed);
Model-View-Controller (MVC)
Program State -data structures Paint event -display data Interaction events -modify data
Model
View
Controller
Model-View-Controller (MVC)
Data model Data display User input
Model
View Controller
UI:
Data: refresh manipulate refresh events
Advantages?
ā¢ Multiple views for a model
- Multi-view applications (overview+detail, brushing,ā¦)
- Different users
- Different UI platforms (mobile, client-side, server-side,ā¦)
- Alternate designs
ā¢ Multiple models
ā¢ Software re-use of parts
ā¢ Plug-n-play
ā¢ Maintenance
Multiple Views
Model
View
Controller
View
Controller
E.g. C# TreeView Control
TreeView control Nodes collection treeView1.Nodes Java: model listeners
Model
View
Controller
C# DataBase Controls
DataSet class -tables -columns -rows DataGrid control -scroll, sort, edit, ā¦
Model
View
Controller
GUI Topics
ļ¼Components
ļ¼Events
ļ¼Graphics
ļ¼Manipulation
ļ¼Animation
ļ¼MVC
