michael olivero microsoft student ambassador for fiu mike@mike95

Michael OliveroMicrosoft Student Ambassador for [email protected]

Pick up your free drink below to your left. 1 per person please.

Pre-Lecture TopicsPre-Lecture Topics

Web site resourcesWeb site resources Lecture & MaterialsLecture & Materials

http://microsoft.mike95.comhttp://microsoft.mike95.com MSDN AA programMSDN AA program

http://www.cs.fiu.edu/MSDNAA/http://www.cs.fiu.edu/MSDNAA/ Clarification / Questions from Previous Clarification / Questions from Previous

LectureLecture ““out” parameterout” parameter VB.NET vs. C#VB.NET vs. C# Lab #1?Lab #1?

Topics Covered TodayTopics Covered Today

Basic User Interface Design Principles Basic User Interface Design Principles .NET Forms .NET Forms Controls & Components Controls & Components Menus Menus ValidationValidation Give AwayGive Away

Basic UI ElementsBasic UI Elements FormsForms

Generally contain information or options in order to Generally contain information or options in order to proceed.proceed.

A Form is a class inherited fromA Form is a class inherited fromSystem.Windows.Forms.FormSystem.Windows.Forms.Form

ControlsControls make information and options accessible to usersmake information and options accessible to users

Some are display only such as labels and picture Some are display only such as labels and picture boxesboxes

Some display and receive input such as text Some display and receive input such as text boxes.boxes.

MenusMenus Expose available commands to the users of your Expose available commands to the users of your

application application

Things to keep in mind when designingThings to keep in mind when designing

SimplicitySimplicity Grouping Related Controls & Default ValuesGrouping Related Controls & Default Values Common mistake: reproducing real world formCommon mistake: reproducing real world form

Position of controlsPosition of controls Position of Required vs. OptionalPosition of Required vs. Optional Submit below informationSubmit below information

ConsistencyConsistency Forms should follow a patternForms should follow a pattern

.NET Forms.NET Forms

After this lesson, you will be able to:After this lesson, you will be able to: State the role of forms in an applicationState the role of forms in an application Explain how to add forms to your Explain how to add forms to your

applicationapplication Explain how to set the start-up form and Explain how to set the start-up form and

the start-up locationthe start-up location Explain how to set the visual appearance Explain how to set the visual appearance

of your formof your form Explain how to use form eventsExplain how to use form events

.NET Forms.NET Forms

Enable interaction between user Enable interaction between user and applicationand application

A way to prompt for or display A way to prompt for or display information without cluttering main information without cluttering main UI.UI.

Modal & Non Modal forms.Modal & Non Modal forms.

Common Form MethodsCommon Form Methods Form.Show()Form.Show()

Loads an instance into memory and makes it visible.Loads an instance into memory and makes it visible.

Form.ShowDialog()Form.ShowDialog() Same as Show() except must be closed before control returns to Same as Show() except must be closed before control returns to

main Form.main Form.

Form.Activate()Form.Activate() Brings form to the front and gives it focus.Brings form to the front and gives it focus. Flashes task bar if app doesn’t have focus.Flashes task bar if app doesn’t have focus.

Form.Hide()Form.Hide() Hides the form from view. Form still is loaded though.Hides the form from view. Form still is loaded though.

Form.Close()Form.Close() Removes form from memory and all related resources.Removes form from memory and all related resources.

Events in FormsEvents in Forms

Something interesting happensSomething interesting happens Think of it as verbs or actionsThink of it as verbs or actions

Form -> ActivatedForm -> Activated Form -> VisibleChangedForm -> VisibleChanged Form -> MoveForm -> Move

You can write custom code for any You can write custom code for any event.event.

Typical Lifetime EventsTypical Lifetime Events LoadLoad

Fired when form is loaded into memoryFired when form is loaded into memory Activate / DeactivateActivate / Deactivate

Fired when form receives focus or looses focus Fired when form receives focus or looses focus respectively – only among within the current respectively – only among within the current Application.Application.

VisibleChangedVisibleChanged Fired when form is hidden or shown.Fired when form is hidden or shown.

ClosingClosing Fired when form is closingFired when form is closing

ClosedClosed Fired after form is closed.Fired after form is closed.

DemoDemo

Adding forms to a projectAdding forms to a project Inheriting existing formsInheriting existing forms Setting Start-up FormSetting Start-up Form

Startup location attributeStartup location attribute

Appearance SettingsAppearance Settings OpacityOpacity Show() vs. ShowDialog()Show() vs. ShowDialog() Handling an EventHandling an Event


Basic User Interface Design Basic User Interface Design Principles Principles

.NET Forms .NET Forms Controls & Components Controls & Components Menus Menus ValidationValidation Give AwayGive Away

Controls & ComponentsControls & ComponentsAfter this lesson, you will be able to:After this lesson, you will be able to: Explain the difference between controls and componentsExplain the difference between controls and components Explain how to set the control tab orderExplain how to set the control tab order Describe which controls can contain other controls and Describe which controls can contain other controls and

how they are usedhow they are used Describe docking and anchoring, and explain their use Describe docking and anchoring, and explain their use

with controlswith controls Describe the process for adding controls to the ToolboxDescribe the process for adding controls to the Toolbox Describe how to create event handlers for controlsDescribe how to create event handlers for controls Explain what an extender is and how to use oneExplain what an extender is and how to use one

Controls & ComponentsControls & Components

Are used to enhance functionality of form.Are used to enhance functionality of form. Component vs. Control?Component vs. Control?

Control has a Visual InterfaceControl has a Visual Interface Ex. ButtonEx. Button

Component has no Visual InterfaceComponent has no Visual Interface Ex. TimerEx. Timer

Components are added to the Components are added to the Components TrayComponents Tray

Container ControlsContainer Controls

Allows you to include other controls Allows you to include other controls within them.within them.

Ex. Group Box, Panel, etc.Ex. Group Box, Panel, etc. You can manipulate all the controls You can manipulate all the controls

together via the container controltogether via the container control Ex. Container.Visible = falseEx. Container.Visible = false

Docking & AnchoringDocking & Anchoring

Specifies behavior of contained Specifies behavior of contained controls when form is resized.controls when form is resized.

DockingDocking Control is bound to a section of the Control is bound to a section of the

form: Top, Bottom, Middle, etc.form: Top, Bottom, Middle, etc.

AnchorAnchor Control is bound by specific distance Control is bound by specific distance

to edge.to edge.

Extender Property ComponentsExtender Property Components

Components which extend the Components which extend the properties of existing components.properties of existing components.

Ex. ToolTip & ErrorProviderEx. ToolTip & ErrorProvider Once added to Form, all controls on Once added to Form, all controls on

form have a new property for form have a new property for definition.definition.

DemoDemo

Component TrayComponent Tray Tab OrderTab Order Docking / AnchoringDocking / Anchoring Adding Controls to ToolBoxAdding Controls to ToolBox ErrorProvider Extender ControlErrorProvider Extender Control



.NET Forms .NET Forms Controls & ComponentsControls & Components MenusMenus ValidationValidation Give AwayGive Away

Using MenusUsing MenusAfter this lesson, you will be able to:After this lesson, you will be able to: Describe the process of creating a menu using the Describe the process of creating a menu using the

MainMenu componentMainMenu component Describe the process of creating a context menu using Describe the process of creating a context menu using

the ContextMenu componentthe ContextMenu component Explain how to enable or disable a menu itemExplain how to enable or disable a menu item Explain how to create shortcut keys for menu itemsExplain how to create shortcut keys for menu items Explain how to display a check mark or a radio button on Explain how to display a check mark or a radio button on

a menu itema menu item Explain how to make menu items invisibleExplain how to make menu items invisible Explain how to dynamically add items to a menuExplain how to dynamically add items to a menu Explain how to dynamically clone a menuExplain how to dynamically clone a menu

Creating Menus in DesignCreating Menus in Design

Use the MainMenu from the toolboxUse the MainMenu from the toolbox Create new menusCreate new menus Set the properties of each menuSet the properties of each menu Assign event handler to each menuAssign event handler to each menu

HintsHints To create a separator, use the hyphenTo create a separator, use the hyphen Modify other options through the Modify other options through the

property window while the menu is property window while the menu is selectedselected

Creating Menus in DesignCreating Menus in Design

Access Key (i.e. ALT-F for File)Access Key (i.e. ALT-F for File) Other properties through property Other properties through property

windowwindow Checked – displays checkmark next Checked – displays checkmark next

to menuto menu Radio – displays bullet next to Radio – displays bullet next to

menumenu

Modifying Menus DynamicallyModifying Menus Dynamically

Adding Menu ProgramaticallyAdding Menu Programatically MenuItem myItem;MenuItem myItem;

myItem = new MenuItem("Item 1", new EventHandler(ClickHandler));myItem = new MenuItem("Item 1", new EventHandler(ClickHandler));

fileMenuItem.MenuItems.Add(myItem);fileMenuItem.MenuItems.Add(myItem);

Merging Menus into OneMerging Menus into One fileMenuItem.MergeMenu(myContextMenu); fileMenuItem.MergeMenu(myContextMenu);

Context MenusContext Menus

Special menu that appears as a pop-up menu Special menu that appears as a pop-up menu when the right mouse button is clicked.when the right mouse button is clicked.

Can be created similar to a MainMenu using Can be created similar to a MainMenu using ContextMenu component.ContextMenu component.

Can be assigned to any Control via Can be assigned to any Control via ContextMenu property.ContextMenu property.

Context menu can be cloned from an existing Context menu can be cloned from an existing Menu to avoid duplicating code.Menu to avoid duplicating code. myContextMenu.MenuItems.Add(fileMenuItem.CloneMenu());myContextMenu.MenuItems.Add(fileMenuItem.CloneMenu());

Things to KnowThings to Know

Menus are like regular controls:Menus are like regular controls: Can make: Visible, Disabled, Can make: Visible, Disabled,

You can Merge a menuYou can Merge a menu

DemoDemo

Adding MenuAdding MenuAdding a Context MenuAdding a Context MenuReusing a existing Menu for a Reusing a existing Menu for a

Context MenuContext MenuHandling an Event for a menuHandling an Event for a menu



.NET Forms .NET Forms Controls & ComponentsControls & Components Menus Menus ValidationValidation Give AwayGive Away

Validating User InputValidating User Input

After this lesson, you will be able to:After this lesson, you will be able to: Explain the difference between form-level Explain the difference between form-level

and field-level validationand field-level validation Direct the focus using control methods Direct the focus using control methods

and eventsand events Implement form-level validation for your Implement form-level validation for your

formform Implement field-level validation for your Implement field-level validation for your

formform

Form & Field Level ValidationForm & Field Level Validation

Form LevelForm Level Validates all data at once.Validates all data at once. Ex. User fills out entire form and clicks Ex. User fills out entire form and clicks

Submit. Validation occurs at the Submit. Validation occurs at the moment of submission.moment of submission.

Field LevelField Level Validates as user enters dataValidates as user enters data

Common Validation PropertiesCommon Validation Properties

MaxLengthMaxLength Maximum length textbox can have.Maximum length textbox can have.

PasswordCharPasswordChar The character shown to hide actual The character shown to hide actual

password characterspassword characters

ReadOnlyReadOnly Cannot make changes to controlCannot make changes to control

Common Validation EventsCommon Validation Events

KeyDown, KeyUp, KeyPress EventsKeyDown, KeyUp, KeyPress Events Raised when key is pressed.Raised when key is pressed. KeyPress is fired only if key pressed can be KeyPress is fired only if key pressed can be

represented in by ASCII character.represented in by ASCII character. Ex. ( a-z, A-Z, 0-9, Enter, Backspace )Ex. ( a-z, A-Z, 0-9, Enter, Backspace )

KeyEventArgsKeyEventArgs Parameter passed to EventsParameter passed to Events Has properties to determine all possible Has properties to determine all possible

combination of a key event.combination of a key event.

Typical Validation Event HandlerTypical Validation Event Handler

private void textBox1_KeyUp(object sender, KeyEventArgs e)private void textBox1_KeyUp(object sender, KeyEventArgs e){{

if (e.Alt == true) if (e.Alt == true)

MessageBox.Show("The ALT key is down");MessageBox.Show("The ALT key is down");

} }

Character ValidationCharacter Validation

Char data type can be used to inspect Char data type can be used to inspect character pressed in KeyPress Eventcharacter pressed in KeyPress Event

Char.IsDigitChar.IsDigit Char.IsLetterChar.IsLetter Char.IsLetterOrDigitChar.IsLetterOrDigit Char.IsPunctuationChar.IsPunctuation Char.IsLowerChar.IsLower Char.IsUpperChar.IsUpper

Validating & Validated EventsValidating & Validated Events

ValidatingValidating Fired before control looses focus.Fired before control looses focus.

ValidatedValidated Fired after successfully firing Fired after successfully firing

ValidatingValidating

The Validation can be canceled byThe Validation can be canceled by e.Cancel = true inside of the handler.e.Cancel = true inside of the handler.

Form Level ValidationForm Level Validation

All fields are validated at onceAll fields are validated at once Simpler than one may expectSimpler than one may expect Submit Button Event Handler simply Submit Button Event Handler simply

checks controls individually or checks controls individually or iteratively.iteratively.

If one fails the check, then can use If one fails the check, then can use ErrorProvider and give it focus.ErrorProvider and give it focus.



.NET Forms .NET Forms Controls & ComponentsControls & Components Menus Menus ValidationValidation Give AwayGive Away

michael olivero microsoft student ambassador for fiu mike@mike95

Documents