Graphical User Interfaces with Windows Forms Visual Studio

  • Slides: 20
Download presentation
Graphical User Interfaces with Windows Forms

Graphical User Interfaces with Windows Forms

Visual Studio Form Designer For designing forms, changing the properties or adding events to

Visual Studio Form Designer For designing forms, changing the properties or adding events to forms and form elements can be achieved with the Visual Studio Form Designer Toolbox Properties Let’s have a look!

Visual Studio Form Designer Design this form:

Visual Studio Form Designer Design this form:

Event Management In order to address handler methods we need a delegate and an

Event Management In order to address handler methods we need a delegate and an event defined form objects Event. Handler object is a pre-defined delegate for working with form events Every form element and the form itself have pre-defined events like Click, Mouse. Click, Keydown, Keypressed

Example: Button Click Event Adding an event handler to button first. Button = new

Example: Button Click Event Adding an event handler to button first. Button = new Button(); first. Button. Text = "Click Me!"; first. Button. Location = new Point(50, 50); first. Button. Size = new Size(150, 50); first. Button. Click += new Event. Handler(first. Button_Click); void first. Button_Click(object sender, Event. Args e) { Message. Box. Show("Button clicked!"); } Handler method for button click event

Examining Designer Generated Code All element initializations like buttons or the form itself occur

Examining Designer Generated Code All element initializations like buttons or the form itself occur under Initialize. Component() method Designer seperates the actual class and its design using the partial class declaration User class: Form 1. cs Designer generated class: Form 1. Designer. cs

Some of Common Controls Button Check. Box Combo. Box Date. Time. Picker Label List.

Some of Common Controls Button Check. Box Combo. Box Date. Time. Picker Label List. Box Radio. Button Text. Box Tool. Tip … Containers l Panel l Group. Box l Split. Container l Tab. Control l…

Some General Properties and Events for Form Controls Properties Location (Point) Text Name Tab.

Some General Properties and Events for Form Controls Properties Location (Point) Text Name Tab. Index Visible Enabled Dock … Events l Click l Mouse. Over l Mouse. Leave l Key. Down l Key. Press l Paint l Text. Changed l…

Message Boxes Can be used for giving info to users or getting input from

Message Boxes Can be used for giving info to users or getting input from them Returns a Dialogue. Result object when a button is clicked

Hands On - Coordinate Displayer Display the x and y locations of the mouse

Hands On - Coordinate Displayer Display the x and y locations of the mouse position on a tooltip

Hands On: Creating a Layout Create a layout with two columns and a Status.

Hands On: Creating a Layout Create a layout with two columns and a Status. Strip On the left column insert a List. Box On the right column insert a Text. Box As mouse enters a component show which component entered on the Status. Strip Add items to List. Box, when user clicks an item it should be added to the Text. Box

Hands On: Text Formatter Create a form with an editable text box Users should

Hands On: Text Formatter Create a form with an editable text box Users should be able to change the style of the text in the textbox using comboboxes, radiobuttons, etc

Working with Multiple Forms Multiple forms can be used in an application In order

Working with Multiple Forms Multiple forms can be used in an application In order to call another form we call Show() method of the Form class My. Form frm 2 = new My. Form(); frm 2. Show(); l As you have the reference to the new form you can change the properties of it using that reference frm 2. label 1. Text = "New form opened"; frm 2. Text = "This is a new form";

Working with Multiple Forms - MDI Forms MDI forms can show other form instances

Working with Multiple Forms - MDI Forms MDI forms can show other form instances inside themselves In order to create an mdi form: Set the “is. Mdi. Container” property of the main form to true Then create a new form as usual and set its “Mdi. Parent” property to true and show the form Frm. Child frm. Child = new Frm. Child(); frm. Child. Mdi. Parent = this; frm. Child. Show();

Hands On : Multiple Forms Get the name and surname of the user via

Hands On : Multiple Forms Get the name and surname of the user via a form and show the information with the date and time in a new form When main form is closing ask the user if he/she is sure to exit

Menus Two types of menu: Menu. Strip Menu residing at the top of forms,

Menus Two types of menu: Menu. Strip Menu residing at the top of forms, contains Menu. Item objects Context. Menu appears when mouse right clicked on a component

Best Practices: Forms and Events In order to reach fields of a child form

Best Practices: Forms and Events In order to reach fields of a child form from the main form, just use child form’s reference If a message will be sent from the child form to the main form, use events Child form will have an event to fire In the main form an event handler should be registered to the child form

Hands On: Customer Registration Create one main form and a child form In the

Hands On: Customer Registration Create one main form and a child form In the main form insert a menu with an “Add Customer” menu item The child form will include text boxes for name and surname of the customer When a new customer is saved it should be listed in a list box in your main form

Hands On (Cont’d)

Hands On (Cont’d)

Timer Control It is for calling methods in pre-defined time intervals (so are like

Timer Control It is for calling methods in pre-defined time intervals (so are like threads) Properties: Interval : time intervals for methods to be executed in milliseconds Enabled: for timer to execute, this property should be set True Tick Event: Event fired when an interval is complete