Presentation is loading. Please wait.

Presentation is loading. Please wait.

Information System Design Lab 5&6. User Interface Design.

Similar presentations

Presentation on theme: "Information System Design Lab 5&6. User Interface Design."— Presentation transcript:

1 Information System Design Lab 5&6

2 User Interface Design

3 Microsoft Visual Studio is  an integrated development environment (IDE) from Microsoft.  It is used to develop console and graphical user interface (windows forms application,websites )  Visual Studio includes a code editor, debugger, forms designers ) for building GUI applications.  Visual Studio supports different programming language (Microsoft Visual Basic, Visual J#, Visual C#, and Visual C++) Microsoft Visual Studio

4 C reating VB /C# Application s Create the interface Set the properties Write the code

5 Forms: windows that contain application’s controls. – forms are used as display windows to gather info and return commands or instructions. Controls: check boxes, list boxes, etc. Properties: attributes of objects. Events: messages or requests for service. Procedures: operations or services. – include methods, functions, subroutines Creating VB/C# Applications Create the interface

6 How to get started in C# File  new  project

7 1 2 3 4 1:Toolbox 2:form window 3:properties window 4:projext explorer window How to get started in C#/VB

8 Toolbox display buttons that represent the controls that are are available for user to add to a form How to get started


10 properties window Whenever an object is active, the property window lists all of the properties that are associated with that object when you click a property item,there is a message area under the properties window that explains what effect the property has on its object How to get started



13 Add controls to a form Objects in the toolbox

14 Add controls to a form (label,textbox and button )

15 CheckBox and RadioButton What is the difference ? Add controls to a form ((CheckBox and RadioButton RadioButtonCheckBox

16 Add controls to a form (GroupBox) using GroupBox

17 ComboBox prosperities  Text  DropDownStyle Add controls to a form (ComboBox )

18 ComboBox prosperities  Item Add controls to a form (ComboBox ) Run screen

19 ChecckedListBox is  CheckBox  ListBox Add controls to a form (ChecckedListnBox)

20 ChecckedListnBox properities  Item  Checkonclick Add controls to a form (ChecckedListnBox)

21 Toolbox 1 2 Add controls to a form (menustrip)

22 Add standard items 1 2 Add controls to a form (menustrip)

23 Add separator Type – then enter separator Add controls to a form (menustrip)

24 Include menu shortcut keys : In most applications,you have some way of accessing the menu options without using the mouse. this is done by using shortcut keys. Properties windows (Image,Text,Shortcut kes) Add controls to a form (menustrip)

25 Add code to a menu option: Double click on a menu option Add controls to a form (menustrip)

26 Add controls to a form (toolstrip)

27 dateTimePicker control: is used to display the date to the user in a single textbox format. Add controls to a form (dateTimePicker)

28 TabControl :allows to user to place other controls on each of the tabs independently. When the user clicks a particular tab,only those controls on that tab are displayed automatically Add controls to a form (taps)

29 Object name : TabControl Most important object properties : text Add controls to a form (taps)

30 Windows properties for TabControl Add controls to a form (taps)

31 textbox control passwordChar property :use to protect the textbox. Multiline property: allow to user to enter multiple lines of text Add controls to a form

32 How to add a form Add new form Project  add windows form

33 Project Project  properties The most important item that you can change here is the Startup form This will tell VB which form should be run first at startup

34 How to run your project Run The Application : there are several ways to run or test your application.Either …. Return to the environment After executing or running a project,clicking the close button to return to code. End execution with an error : In some case, you may want to terminate the execution during an error massage. the end button on the toolbar will accomplish this.

35 Add code to your form Access the code window :3 ways Enter code

36 Use MSGBOX function Displays a message in a dialog box, waits for the user to click a button, and then returns an integer indicating which button the user clicked. Message title

37 Use MSGBOX function(cont…)


39 Question Critical Warning Use MSGBOX function

40 Project  properties Publish

41 Example of Design interface




45 شرح محتويات الشاشة

46 Practices

47 Open new project

48 Change background image

49 Status bar Web browser Tool strip

50 Edit item of tool strip 1


52 Edit item of status bar

53 Finally

Download ppt "Information System Design Lab 5&6. User Interface Design."

Similar presentations

Ads by Google