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• VB, Xwin, Java 49, …

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

• No .h files

• 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

Getting Started

• Visual Studio

• New Application

• Drag-n-drop GUI builder

• Code editor

• Properties

• Methods

• Events Examples: Pop-up,Run-away button

Visual Studio .Net

controls

designer

Properties,events

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)

Anatomy of a C# WinAppnamespace MyWindowsApplication1 {

public class MyForm1 : System.Windows.Forms.Form {// inherit from Form base class

public MyForm1( ) // constructor, calls InitializeComponent( )

private void InitializeComponent( ) // VS auto-generated GUI code

protected override void Dispose( bool disposing )// standard method to clean up resources

static void Main( ) { // App starts here!Application.Run(new MyForm1( ));

// create a new MyForm1 and run the main event loop }

Adding GUI Controlspublic class MyForm1 : System.Windows.Forms.Form {

private System.Windows.Forms.Button button1; … // member variables for each GUI control

private void InitializeComponent( ) // VS auto-generated GUI code

// create GUI controls:this.button1 = new System.Windows.Forms.Button( );

// set properties of GUI controls:this.button1.Text = "button1";

// add controls to their parent or Form:this.Controls.AddRange(

new System.Windows.Forms.Control[] {this.button1} );}

GUI Tree Structure

Panel

ButtonForm

Label

GUI Internal structure

containers

Panel Button

Form

Label

GUI Layout Management

• Fixed position:• X,Y location• W,H size

• Anchor:• Maintain distance to: Top, Left, Bottom, Right

• Dock:• Fill space in: Top, Left, Bottom, Right, Fill

• AutoScroll:• Scrolling control panels

• Z-Order:• Front to back order

Layout Combinations

Button Button

TextBox

Layout Combinations

Form

Panel

ButtonButton

TextBox

Dock: top

Dock: Fill

x,y

Java: Layout Managers

Left to right,Top to bottom

c

n

s

ew

FlowLayout GridLayout

BorderLayout

none, programmer sets x,y,w,h

null

One at a time

CardLayout GridBagLayout

JButton

Events

Typical command line program

• Non-interactive

• Linear execution

program:

main(){

code;code;code;code;code;code;code;code;code;code;code;code;

}

Interactive command line program

• User input commands

• Non-linear execution

• Unpredictable order

• Much idle time

program:

main(){

decl data storage;initialization code;

loop{

get command;switch(command){

command1:code;

command2:code;

…}

}}

Typical GUI programGUI program:

main(){

decl data storage;initialization code;

create GUI;register callbacks;

main event loop;}

Callback1() //button1 press{ code;}Callback2() //button2 press{ code;}…

• User input commands

• Non-linear execution

• Unpredictable order

• Much idle time

• Event callback procs

GUI Events

WindowSystem

eventloop

App1

OK

Cancel

App2 code:

OKbtn_click() { do stuff;}CancelBtn_click(){ do different stuff;}App2Form_click(){ do other stuff;}

mouseclick

inputdevice

App1

eventloop

App2

eventloop

whichapp?

whichcontrol?

App2

OK

Cancel

C# WinAppC# WinApp:

Class{ decl data storage;

constructor(){initialization code;create GUI controls;register callbacks;

} main(){

Run(new ) } callback1(){

do stuff; } callback2(){

do stuff; }…

• “delegates” = callbacks

• Function pointers

• Java: Listeners

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

2. button1_Click( )

1. button1.Click += button1_click( )

GUI Topics

ComponentsGUI layoutEvents

• Graphics

• Manipulation

• Animation

• Databases

• MVC