Introduction to Windows Forms Applications

Содержание

Слайд 2

The following slides are courtesy of Ms. Stephany Coffman-Wolph (2/9/09) NOTE:

The following slides are courtesy of Ms. Stephany Coffman-Wolph (2/9/09) NOTE: Formatting changed,

some other changes made by L. Lilien
Слайд 3

1. GUI Introduction GUI = Graphical User Interface Allows the user

1. GUI Introduction

GUI = Graphical User Interface
Allows the user to interact

visually with a program
This is the “make it pretty” part
Слайд 4

Building GUI GUI's are built from GUI controls Also known as

Building GUI

GUI's are built from GUI controls
Also known as components or

widgets
They are objects that can:
Display information on the screen, or
Enable users to interact with an application via the mouse, keyboard or other form of input
Examples - commonly used types of GUI controls
Label, TextBox, Button, CheckBox ComboBox, ListBox
Слайд 5

GUI in MS Visual Studio for C#: Windows Forms Windows Forms

GUI in MS Visual Studio for C#: Windows Forms

Windows Forms (or

“Forms”) - used to create GUI's for C# programs
Create graphical elements that appear on the desktop (dialog, window, etc.)
Слайд 6

Components for GUI For future use: Component is an instance of

Components for GUI

For future use:
Component is an instance of

a class that implements the IComponent interface
We’ll cover interfaces later – they define what operations can happen but not how they are performed
GUI controls are components
Some have graphical representation
E.g., Form, Button, Label
Others do not
E.g., Timer
Слайд 7

2. Using Toolbox in Visual Studio to Create GUIs The controls

2. Using Toolbox in Visual Studio to Create GUIs

The controls and

components of C# are found in the C# Toolbox in Visual Studio
Organized by functionality
To open Toolbox (takes time!):
Menu/Item: View>>Toolbox:
To add a component to a Form:
Select that component in Toolbox
Drag it onto the Form
Слайд 8

Using the Toolbox - Basics (After you open it with: View>>Toolbox),

Using the Toolbox - Basics

(After you open it with: View>>Toolbox), the

toolbox is located on the left-hand side of the VS screen
Click on the control you want to add and drag it to the form
Слайд 9

3. Properties and Methods for GUI Controls Each control has properties

3. Properties and Methods for GUI Controls

Each control has properties (and

some methods)
Example properties:
Enable
Font
Text
Visible
Example methods:
Hide
Select
Show
Слайд 10

Editing the Properties Click on the control for which you want

Editing the Properties

Click on the control for which you want to

change the properties
E.g., click on form, button, label, etc.
You can make these changes in the Properties window located on the bottom right
Слайд 11

4. Naming Controls In C#, default names for controls/components are: button1,

4. Naming Controls

In C#, default names for controls/components are:
button1, label1,

textbox1, etc.
not very descriptive (“generic”)
Use better, descriptive names
Names to have meanings that make sense
Слайд 12

Conventions for Naming Controls - Start the control name with... Control

Conventions for Naming Controls - Start the control name with...

Control
Button
TextBox
ListBox
Label
SaveFileDialog

Begin name

with
btn
txt
lbox
lbl
sfd

Examples of Naming Controls
A button used to calculate a total:
btnCalcTotal
A textbox that allows a user to enter her name:
txtEnterName

Слайд 13

The following slides are based on textbook slides NOTE: Formatting changed,

The following slides are based on textbook slides NOTE: Formatting changed,

some other changes made by L. Lilien
Слайд 14

5. In-class Exercise: Using Visual Programming to Create a Simple Program

5. In-class Exercise: Using Visual Programming to Create a Simple Program that

Displays Text and an Image

This section based on textbook slides for Section 2.6 (p. 40-ed.4; p.51-ed.3)
We will follow (most of) the steps shown on the following slides for this lecture section

Слайд 15

Using Visual Programming to Create a Simple Program that Displays Text

Using Visual Programming to Create a Simple Program that Displays Text

and an Image (Cont.)

This program just displays such window:
Controls that will be used for this programs;
A Label — contains the descriptive text
A PictureBox — displays the image
Such as the Deitel bug mascot

Fig. 2.25 | Output of the simple program.

Слайд 16

Using Visual Programming to Create a Simple Program that Displays Text

Using Visual Programming to Create a Simple Program that Displays Text and

an Image (Cont.)

Start your Visual Studio.

Слайд 17

Using Visual Programming to Create … (Cont.) Select File > New

Using Visual Programming to Create … (Cont.)

Select File > New Project… and select

Windows Forms Application template (Fig. 2.27)
Name the project ASimpleProgram
Click Browse to select directory for saving this project.

Fig. 2.27-ed.3 | New Project dialog (updated by LL).

Type the project name

Template types

Слайд 18

Using Visual Programming to Create a Simple Program that …(Cont.) The

Using Visual Programming to Create a Simple Program that …(Cont.)

The following Project

Location dialog shows up (Fig. 2.28).

Fig. 2.28-ed.3 | Project Location dialog (updated by LL).

Select (or create) folder for the project.
Click OK when done.

Слайд 19

Using Visual Programming to Create a Simple Program that … (Cont.)

Using Visual Programming to Create a Simple Program that … (Cont.)

Click OK

again when the New Project dialog shows up

Fig. 2.27-ed.3 | New Project dialog (updated by LL).

Type the project name

Template types

Слайд 20

Using Visual Programming to Create … (Cont.) Right-click anywhere on the

Using Visual Programming to Create … (Cont.)

Right-click anywhere on the Form

to display the Form’s properties in the Properties window.
Click in the textbox to the right of the Text property box and type “A Simple Program” (Fig. 2.30)
Press Enter
See the Form’s title
bar updated immedia-
tely (Fig. 2.31-ed.3).

Fig. 2.30-ed.3 | Setting the Form’s Text property in the Properties window.

Fig. | Form with the updated Text property.

Слайд 21

Using Visual Programming to Create … (Cont.) Resize the Form by

Using Visual Programming to Create … (Cont.)

Resize the Form by clicking

and dragging one of the enabled sizing handles (Fig. 2.31).

Fig. 2.31 | Form with enabled sizing handles.

Enabled sizing
handles

Слайд 22

Using Visual Programming to Create a Simple Program that … (Cont.)

Using Visual Programming to Create a Simple Program that … (Cont.)

Make the

Form larger
Select the bottom-right sizing handle and drag it down and to the right to (Fig. 2.32).
Watch that the Size property changes after dragging
Note: You can also resize a Form by typing new value for the Size property.

Fig. 2.32 | Resized Form.

Слайд 23

Using Visual Programming to Create a Simple Program Program that …(Cont.)

Using Visual Programming to Create a Simple Program Program that …(Cont.)

In

the Properties window, click BackColor
A down-arrow button to appears to the right of BackColor(Fig. 2.33).
Click on the down-arrow button
The arrow displays for Custom, Web and System tabs
For Custom, Web and System colors
Click the Custom tab
Displays the palette
Select light blue (in the top row).

Fig. 2.33 | Changing the Form’s BackColor property.

Слайд 24

Using Visual Programming to Create a Simple Program that Displays Text

Using Visual Programming to Create a Simple Program that Displays Text and

an Image (Cont.)

Once you select the color, the Form’s background changes to light blue (Fig. 2.34).

Fig. 2.34-ed.3 | Form with new BackColor property applied.

New background color

Слайд 25

Using Visual Programming to Create a Simple Program that Displays Text

Using Visual Programming to Create a Simple Program that Displays Text and

an Image (Cont.)

If the toolbox is not open, open it
View>>Toolbox (might be slooow, be patient)
Add a Label (will contain “Welcome to Visual C#!”)
Find and drag the Label control from the Toolbox to the Form (Fig. 2.35)
OR:
Double click the
Label control
in the Toolbox

Fig. 2.35 | Adding a Label to the Form.

Label control

Слайд 26

Using Visual Programming to Create … (Cont.) Click on the Label

Using Visual Programming to Create … (Cont.)

Click on the Label to

make its properties appear in the Properties window (Fig. 2.36).
Click on the Label’s Text property, then on the down-arrow that shows up.
Replace the text label1 with the text Welcome to Visual C#!
See new text showing up in the label
Слайд 27

Using Visual Programming to Create … (Cont.) Move the Label by

Using Visual Programming to Create … (Cont.)

Move the Label by dragging

it
OR: by selecting it, and then using the left and right arrow keys
Select the Label and center it
Format>>Center in Form >> Horizontally
Now the form looks like this:

Fig. 2.37 | GUI after the Form and Label have been customized.

Label centered with updated Text property

Sizing handles

Слайд 28

Using Visual Programming to Create … (Cont.) Set the AutoSize property

Using Visual Programming to Create … (Cont.)
Set the AutoSize property to

False
If the AutoSize property is set to True, it automatically resizes the Label to fit its text
We will change it, and we don’t want automatic resizing

Fig. 2.36 | Changing the label1’s AutoSize property to False.

Слайд 29

Using Visual Programming to Create … (Cont.) Change the font of

Using Visual Programming to Create … (Cont.)

Change the font of the

Label’s text
Click on the Font property (Fig. 2.38).
The ellipsis button appears
Click on the ellipsis button
The Font dialog appears (next slide)

Fig. 2.38 | Properties window displaying the Label’s properties.

Слайд 30

Using Visual Programming to Create a Simple Program that … (Cont.)

Using Visual Programming to Create a Simple Program that … (Cont.)

The Font

dialog (Fig. 2.39) allows you to select the font name, style and size.
Under Font, select Segoe UI.
Under Size, select 24 points
Click OK.
Resize the Label if it’s not large enough to hold the text.

Fig. 2.39 | Font dialog for selecting fonts, styles and sizes.

Font sample

Current font

Слайд 31

Using Visual Programming to Create a Simple Program that Displays Text

Using Visual Programming to Create a Simple Program that Displays Text and

an Image (Cont.)

Select the Label’s TextAlign property (Fig. 2.40)
Set it to MiddleCenter

Fig. 2.40 | Centering the Label’s text.

Text alignment options

MiddleCenter
alignment option

Слайд 32

Using Visual Programming to Create …(Cont.) Make sure that text in

Using Visual Programming to Create …(Cont.)

Make sure that text in the

label is in two rows (see Fig. below).
If not, adjust label size to have text in 2 rows as shown
Drag PictureBox from the Toolbox to the Form (Fig. 2.41).

Fig. 2.41 | Inserting and aligning a PictureBox.

Updated Label

PictureBox

Слайд 33

Using Visual Programming to Create a Simple Program that Displays Text

Using Visual Programming to Create a Simple Program that Displays Text and

an Image (Cont.)

Click the PictureBox to display its properties in the Properties window (Fig. 2.42).
The Image property displays a preview of the image, if one exists.

Fig. 2.42 | Image property of the PictureBox.

Image property value (no image selected)

Слайд 34

Using Visual Programming to Create … (Cont.) From the instructor’s web

Using Visual Programming to Create … (Cont.)

From the instructor’s web page,

get the file with the image of the happy bug
Lect.5b--bug Fig 2.44 for Sect.2.6__ bug.PNG file
.
Save it (e.g., on the desktop).
Слайд 35

Using Visual Programming to Create … (Cont.) Click the Image property.

Using Visual Programming to Create … (Cont.)

Click the Image property.
The ellipsis

button appears
Click the ellipsis button
The Select Resource dialog appears (Fig. 2.43)
Select Local resource radio button
Click the Import… button

Fig. 2.43 | Select Resource dialog to select an image for the PictureBox.

Слайд 36

Using Visual Programming to Create … (Cont.) In the dialog that

Using Visual Programming to Create … (Cont.)

In the dialog that appears,

locate the image file, select it and click Open ( or OK).
The image should show up in the Select Resource dialog (Fig. 2.44).
Click OK
The image (or its part) shows up in your program window.

Fig. 2.44 | Select Resource dialog displaying a preview of selected image.

Слайд 37

Using Visual Programming to Create … (Cont.) Size the image to

Using Visual Programming to Create … (Cont.)

Size the image to the

PictureBox:
Click on the SizeMode property
Down-arrow shows up to the right
Use the down-arrow to select StretchImage (Fig. 2.45).

Fig. 2.45 | Scaling an image to the size of the PictureBox.

Слайд 38

Using Visual Programming to Create … (Cont.) Adjust the size of

Using Visual Programming to Create … (Cont.)

Adjust the size of the

image to visually match the following figure
Use the sizing handles of the PictureBox

Fig. 2.46 | PictureBox displaying an image.

Слайд 39

Using Visual Programming to Create … (Cont.) We have created form

Using Visual Programming to Create … (Cont.)

We have created form not

by programming, but by drawing it
But code exists!
Code has been generated for you automatically
How to see the code generated for the form you drew?
Go to Solution Explorer window
Click on small triangle next
to Form1.cs
Double-click on Form1.Designer.cs
Detailed code for Form1 shows up
Slide added by L. Lilien
Слайд 40

Using Visual Programming to Create … (Cont.) How to see the

Using Visual Programming to Create … (Cont.)
How to see the

rest of the code generated for the form you drew?
You are in the Design View -------->
It is the Form1.cs [Design] window
You used it to draw the form
Switch from the Design View to
the Code View as follows:
View >> Code
(or use F7)
You will be shown the Form1.cs window (next slide)
Not the Form1.cs [Design] window
Slide added by L. Lilien
Слайд 41

Using Visual Programming to Create …(Cont.) You are now in the

Using Visual Programming to Create …(Cont.)

You are now in the Code

View -------->
It is the Form1.cs window
It shows the rest of the code
automatically generated for Form1
You can switch from Code View to Design(er) View as follows:
View >> Designer
(or use SHIFT+F7)
Slide added by L. Lilien
Слайд 42

Using Visual Programming to Create … (Cont.) Select File >> Save

Using Visual Programming to Create … (Cont.)

Select File >> Save All to save

the entire solution
Select Build>>Build Solution
Слайд 43

Using Visual Programming to Create … (Cont.) Select Debug >> Start

Using Visual Programming to Create … (Cont.)

Select Debug >> Start Debugging to compile

and execute the program (Fig. 2.48).

Fig. 2.48 | IDE in run mode, with the running program in the foreground.

Running program

Form

IDE displays text Running, which signifies that the program is executing

Close box

Слайд 44

The following slides are again courtesy of Ms. Stephany Coffman-Wolph (2/9/09)

The following slides are again courtesy of Ms. Stephany Coffman-Wolph (2/9/09) NOTE: Formatting

changed, some other changes made by L. Lilien
Слайд 45

6. Event Handling When a user interacts with a form, this

6. Event Handling

When a user interacts with a form, this causes

an event to occur
E.g., clicking a button, typing in a textbox, etc. are events
Events signal that certain code should be run
To perform some actions
Event Handler = method that runs after an event occurs
Event Handling = the overall process of responding to events
All GUI controls have associated events
Слайд 46

Event Handler for Clicking a Button The following code is for

Event Handler for Clicking a Button

The following code is for a

button named btnQuit
Function: When the button is clicked, the form closes
private void btnQuit_Click(object sender, EventArgs e)
{
this.Close();
}
Слайд 47

How to write code for an event... Suppose that you are

How to write code for an event...

Suppose that you are working

on
the design of Form1 (see Fig)
You are in the Design View
You have edited form properties
Double-click on the Quit button
You will be switched to the Code View
The following method appears in the code generated for the form:
private void btnQuit_Click(object sender, EventArgs e)
{
code to be written by you can be added here (to be shown later)
}
Слайд 48

7. Fun with Textboxes A textbox is an area in which

7. Fun with Textboxes

A textbox is an area in which text

can be displayed or users can type in text
A password textbox is a textbox that hides the information entered by the user (masking it with a black dot)
Password textbox is a textbox in which the property UseSystemPasswordChar is set to True
(False is the default setting)
Слайд 49

Example: Log-in Screen Drag two Label controls from Toolbox onto the

Example: Log-in Screen

Drag two Label controls from Toolbox onto the form
Use

the properties to change the default names to User Name and Password
Drag two Textbox controls onto the form
Слайд 50

Example: Log-in Screen (Cont.) Making the Textbox for Typing in Passwords

Example: Log-in Screen (Cont.) Making the Textbox for Typing in Passwords

Click on

the second of the two textboxes
Find the UseSystemPasswordChar property in Properties for the 2nd textbox and change to True
NOTE: In the figure, “Char” is truncated from the property name “UseSystemPasswordChar “due to small window size
Слайд 51

How to Get Info From/ToTextbox Suppose that your textbox is named

How to Get Info From/ToTextbox

Suppose that your textbox is named txtUserName
To

get information typed into a textbox by a user , use the following code:
string userName = txtUserName.Text;
To display “Hello!” in the textbox, use:
txtUserName.Text = “Hello!”;
To empty the textbox, use:
txtUserName.Text = “”;
Слайд 52

8. Using Multiple Forms Can a program have multiple forms? Yes!

8. Using Multiple Forms

Can a program have multiple forms?
Yes!
How is this

accomplished?
By passing the form reference during a call to the constructor...
Example:
public FormLogin(Form1 f)
(used in Line 16 on Slide +3 - i.e. 3 pages forward)
Слайд 53

When it starts, it shows Form1 After clicking on Go! on

When it starts, it shows Form1
After clicking on Go! on Form1,

it hides Form1, and displays FormLogin
The user enters his name and password into the appropriate textboxes
Afterwards, when the user clicks on the Log In button:
If the name is “joe”, it checks if the entered password is “xyz”
If the password is “xyz”, it hides FormLogin and displays Form1
If the password is not “xyz”, it ignores input (no change of display)
If the name is not “joe“, it clears both User Name and Password
After user clicks on Quit on Form1, it displays a message box with a “Thank you!” message.
It quits when the user closes the message box.
NOTE: 1) Code for the program is online in: Lect.5c--WF example with 2 forms.txt
2) We will use the password textbox for “Password” (so the password will not be visible on screen; instead, a dot will be shown for each password character typed.)
Slide added by L. Lilien

Write a program that uses the 2 forms
shown to the right, and performs the
following actions:

Example: Using Multiple Forms

Слайд 54

Code for the Form1 form Slide modified by L. Lilien RECALL:

Code for the Form1 form

Slide modified by L. Lilien

RECALL:
After user clicks

on Quit on Form1, the program:
- Hides Form1
- Displays a message box with a “Thank you!” message.
- Quits (closes) after the user closes the message box.
After clicking on Go! on Form1, the program:
- Hides Form1
- Creates FormLogin
- Displays FormLogin
Слайд 55

Code for the FormLogin form Slide modified by L. Lilien RECALL:

Code for the FormLogin form

Slide modified by L. Lilien

RECALL:
The user enters

his name and password into the appropriate textboxes on FormLogin
Afterwards, when the user clicks on the Log In button:
- If the name is “joe”, it checks if the entered password is “xyz”
- If the password is “xyz”, it hides FormLogin and displays Form1
- Else (if the password is not “xyz”), it ignores input (no change of display)
- Else (if the name is not “joe“), it clears both User Name and Password textboxes.
Слайд 56

Running the 2-form WFA Example in 27 easy steps IMPORTANT Follow

Running the 2-form WFA Example in 27 easy steps

IMPORTANT Follow this

procedure exactly. Changing the order of copying code into the project files might result in errors.
0) Start the MS Visual Studio, and open a new WFA project.
1) Open the Program.cs tab. (If the tab is not shown yet, go to the Solution Explorer window, and double-click on Program.cs.) A window (and a tab) for Program.cs shows up.
2) In Line 6, change namespace name to: cs1120_WF2_2_forms___v1
3) Open the Form1.cs [Design] window. (If the Form1.cs [Design] tab is not shown yet, go to the Solution Explorer window, and double-click on Form1.cs.) See that the windows shows a default form only.
4) In the Solution Explorer window, click on + next to Form1.cs. Form1.Designer.cs name shows up.
Note: Remember that Form1.cs [Design] (the Design View) and the Form1.Designer.cs are two different windows/views!
5) Double-click on Form1.Designer.cs. A window (and a tab) for Form1.Designer.cs shows up.
6) Erase contents of the Form1.Designer.cs window.
7) Copy the code for Form1.Designer.cs (only!) from the provided file (which includes all code for this example into the Form1.Designer.cs window.
Look at and try to understand code fragments defining (from the bottom up) FormLogin, buttonQuit, and buttonGo.
8) Go to the Form1.cs [Design] window. See that it includes now a form with two buttons: Go! and Quit. (So the code you pasted in the preceding step changed the default form to this form.)
9) Go to the Solution Explorer window, and right-click on the name of your project in bold (this should be the second line from the top). A pop-up menu shows up.
Слайд 57

Running the 2-form WFA Example … (Cont.) 10) Select Add in

Running the 2-form WFA Example … (Cont.)

10) Select Add in the

menu. Another pop-up menu shows up. Select New Item... in the menu. A pop-up window shows up. In the left pane, select Windows Forms under Categories. In the right pane, select Windows Forms.
Click on the Add button. A line with text Form2.cs appears in the Solutions Explorer.
11) See the Form2.cs [Design] window. (If the Form2.cs [Design] tab is not shown yet, go to the Solution Explorer window, and double-click on Form2.cs.) See that the windows shows a default form only.
12) In the Solution Explorer window, click on + next to Form2.cs. Form2.Designer.cs name shows up.
Note: Remember that Form2.cs [Design] (the Design View) and the Form2.Designer.cs are two different windows/views!
13) Double-click on Form2.Designer.cs. A window (and a tab) for Form2.Designer.cs shows up.
14) Erase contents of the Form2.Designer.cs window.
15) Copy the code for Form2.Designer.cs (only!) from the provided file (which includes all code for "WF example with 2 forms") into the Form2.Designer.cs window.
Look at and try to understand code fragments defining (from the bottom up) FormLogin, buttonLogIn, textBoxPassword, textBoxUserName, labelPassword, and labelUserName.
16) Go to the Form2.cs [Design] window.See that it includes now a form with one button (“Log In”), and two textboxes with their labels (for user name and password). (So the code you pasted in the preceding step above changed the default form to this form.)
17) Change form name from Form2 to FormLogin by changing Text property in the properties
window. (But do not change the name of the Form2.cs file.)
Слайд 58

Running the 2-form WFA Example … (Cont.) 18) Go to the

Running the 2-form WFA Example … (Cont.)

18) Go to the Form1.cs

[Design] window. Change view for Form1 from the current Design View to the Code View. (To do it, e.g., click on the Form1.cs [Design] window, then press F7.)
The Code View for Form1, that is the window Form1.cs, shows up.
19) Erase contents of the Form1.cs window.
20) Copy the code for Form1.cs (only!) from the provided file (which includes all code for "WF example with 2 forms") into the Form1.cs window.
21) Go to the Form2.cs [Design] window. Change view for Form2 from the current Design View to the Code view. (To do it, e.g., click on the Form2.cs [Design] window, then press F7.)
The Code View for Form2, that is the window Form2.cs, shows up.
22) Erase contents of the Form2.cs window.
23) Copy the code for Form2.cs (only!) from the provided file (which includes all code for "WF example with 2 forms") into the Form2.cs window.
24) Save project code with File>>Save All.
25) Select Build>>Build Solution. You should get the "Build succeeded" message. (If not, fix bugs, or repeat all steps, starting with a new project.)
26) Run with Debug>>Start Without Debugging.
27) Play with the program: try various combinations of input to see all program behavior.
Have fun!
Слайд 59

8. In-class Self-evaluation Exercise Consider the program implementing the Point3-Circle4 hierarchy

8. In-class Self-evaluation Exercise

Consider the program implementing the Point3-Circle4 hierarchy from

Lecture 4, defined in the following files in the _downloads folder:
Lect.4b5--Point3.txt Lect.4b6--Circle4.txt Lect.4b7--CircleTest4(Point3+Circle4Test).txt
The original program accepts no user’s input, just prints hard-coded data.
Modify it so that it uses as follows 3 windows forms designed by you for its user’s input :
Create a form FormManageShape
It should have 2 buttons Create point and Create  circle. Clicking on the Create point buttons hides the FormManageShape and displays FormPoint. The other button behaves analogously.
Create a form FormPoint with two textboxes “X Coordinate” and “Y Coordinate” and two buttons: “Display Point Data” and “Back to Shape Manager.” The former will display point coordinates (with proper labels) using MessageBox.Show(…). The function of the latter is clear from its name.
Create a form FormCircle with three textboxes “X Coordinate”, “Y Coordinate” and “Radius,” and two buttons: “Display Circle Data” and “Back to Shape Manager.” The former will display circle coordinates and radius (with proper labels) using MessageBox.Show(…). The function of the latter is clear from its name.
Hints:
Start with implementing and testing just the first two forms (FormManageShape and FormPoint).
You may assume that coordinates must be entered as positive integers (int), and radius as a positive double number (as is done in the code below).
You will probably need to use MessageBox.Show(…) in a bit more complex way than before, namely as follows : MessageBox.Show( “Point—X coordinate:” + X + “   Y coordinate” + Y )
(the example is for Point, you need analogous code for Circle).
Слайд 60

++ READ THE REMAINING SLIDES ON YOUR OWN ++ The following

++ READ THE REMAINING SLIDES ON YOUR OWN ++ The following slides

are textbook slides for Chapter 2 (ed.3). Take a look at them as well (mostly to refresh what you should already know)
Слайд 61

2.1 … 2.2 RECALL: Overview of the Visual Studio 2008 IDE

2.1 …
2.2   RECALL: Overview of the Visual Studio 2008 IDE
2.3   RECALL: Menu Bar and

Toolbar
2.4   RECALL: Navigating the Visual Studio IDE
2.5   RECALL: Using Help
Слайд 62

The New Project dialog (Fig. 2.3) displays. Templates are project types

The New Project dialog (Fig. 2.3) displays.
Templates are project types users can

create in Visual C#.
A Windows Forms application executes within a Windows operating system and has a graphical user interface (GUI).

RECALL: 2.2  Overview of the Visual Studio 2008 IDE

Fig. 2.3 | New Project dialog.

Visual C# Windows Forms Application (selected)

Default project name (provided by Visual Studio)

Description of selected project (provided by Visual Studio)

Слайд 63

2.2 Overview of the Visual Studio 2008 IDE (Cont.) The gray

2.2  Overview of the Visual Studio 2008 IDE (Cont.)

The gray rectangle (called

a Form) represents the main window of the application.
Слайд 64

Figure 2.5 shows where the Form’s name can be modified in

Figure 2.5 shows where the Form’s name can be modified in the

Properties window.

2.2  Overview of the Visual Studio 2008 IDE (Cont.)

Fig. 2.5 | Textbox control for modifying a property in the Visual Studio IDE.

Text box (displaying the Form’s name, Form1) which can be modified

Слайд 65

Figure 2.6 shows a dialog in which a control’s font properties

Figure 2.6 shows a dialog in which a control’s font properties can

be modified.

2.2  Overview of the Visual Studio 2008 IDE (Cont.)

Fig. 2.6 | Dialog for modifying a control’s font properties in the Visual Studio IDE.

OK button

Cancel button

Слайд 66

RECALL: 2.3 Menu Bar and Toolbar Commands for managing the IDE

RECALL: 2.3  Menu Bar and Toolbar

Commands for managing the IDE are

contained in menus on the menu bar of the IDE (Fig. 2.7).
The set of menus displayed depends on what you are currently doing in the IDE.
Menus contain groups of related menu items that cause the IDE to perform specific actions.

Fig. 2.7 | Visual Studio menu bar.

Слайд 67

Fig. 2.8 | Summary of Visual Studio 2008 IDE menus. 2.3 Menu Bar and Toolbar (Cont.)

Fig. 2.8 | Summary of Visual Studio 2008 IDE menus.

2.3  Menu

Bar and Toolbar (Cont.)
Слайд 68

RECALL: 2.4 Navigating the Visual Studio IDE The IDE provides windows

RECALL: 2.4  Navigating the Visual Studio IDE

The IDE provides windows for

accessing project files and customizing controls.
These windows can be accessed via the toolbar icons (Fig. 2.13) or the View menu.

Fig. 2.13 | Toolbar icons for Visual Studio windows.

Solution Explorer

Properties window

Object Browser

Toolbox

Слайд 69

2.4 Navigating the Visual Studio IDE (Cont.) When auto-hide is enabled,

2.4  Navigating the Visual Studio IDE (Cont.)

When auto-hide is enabled, a tab

appears along the edge of the IDE window (Fig. 2.14).

Fig. 2.14 | Auto-hide feature demonstration.

Icon for hidden window (auto-hide enabled)

Слайд 70

2.4 Navigating the Visual Studio IDE (Cont.) Placing the mouse pointer

2.4  Navigating the Visual Studio IDE (Cont.)

Placing the mouse pointer over one

of these icons displays that window (Fig. 2.15).

Fig. 2.15 | Displaying a hidden window when auto-hide is enabled.

Toolbox title bar

Horizontal orientation for pin icon when auto-hide is enabled

Слайд 71

2.4 Navigating the Visual Studio IDE (Cont.) To disable auto-hide and

2.4  Navigating the Visual Studio IDE (Cont.)

To disable auto-hide and keep the

window open, click the pin icon in the window’s upper-right corner.
When a window is “pinned down,” the pin icon is vertical (Fig. 2.16).

Toolbox “pinned down”

Vertical orientation for pin icon when window is pinned down

Fig. 2.16 | Disabling auto-hide (“pinning down” a window).

Слайд 72

2.4 Navigating the Visual Studio IDE (Cont.) 2.4.1 Solution Explorer The

2.4  Navigating the Visual Studio IDE (Cont.)

2.4.1 Solution Explorer
The Solution Explorer window (Fig. 2.17)

provides access to all of a solution’s files.
The solution’s startup project runs when you select Debug > Start Debugging.
The file that corresponds to the Form is named Form1.cs. Visual C# files use the .cs file-name extension.

Fig. 2.17 | Solution Explorer with an open project.

Show All Files icon

Toolbar

Startup project

Слайд 73

2.4 Navigating the Visual Studio IDE (Cont.) Clicking the Show All

2.4  Navigating the Visual Studio IDE (Cont.)

Clicking the Show All Files icon

displays all the files in the solution (Fig. 2.18).

Fig. 2.18 | Solution Explorer showing plus boxes and minus boxes small triangles for expanding and collapsing the tree to reveal or hide project files, respectively.

Plus box

Minus box

Previously hidden folders

Слайд 74

2.4 Navigating the Visual Studio IDE (Cont.) Click a plus box

2.4  Navigating the Visual Studio IDE (Cont.)

Click a plus box small triangle

to display grouped items (Fig. 2.19)

Fig. 2.19 | Solution Explorer expanding the Properties file after you click its plus box small triangle.

Minus box Small triangle rotated
downward indicates that the file or folder is expanded (changed from plus box
right-pointing triangle)

Слайд 75

2.4 Navigating the Visual Studio IDE (Cont.) Click the minus box

2.4  Navigating the Visual Studio IDE (Cont.)

Click the minus box small triangle

to collapse the tree from its expanded state (Fig. 2.20).

Fig. 2.20 | Solution Explorer collapsing all files after you click any small triangle.

Left-pointing small triangles indicate that the file or folder is collapsed (changed from
downward pointing small triangles

Слайд 76

2.4 Navigating the Visual Studio IDE (Cont.) 2.4.2 Toolbox The Toolbox

2.4  Navigating the Visual Studio IDE (Cont.)

2.4.2 Toolbox
The Toolbox contains icons representing controls

used to customize Forms (Fig. 2.21).
The Toolbox groups the prebuilt controls into categories.

Group names

Controls

Fig. 2.21 | Toolbox window displaying controls for the Common Controls group.

Слайд 77

2.4 Navigating the Visual Studio IDE (Cont.) 2.4.2 Toolbox To display

2.4  Navigating the Visual Studio IDE (Cont.)

2.4.2 Toolbox
To display the Properties window, select

View > Properties Window.
The Properties window allows you to modify a control’s properties visually, without writing code (Fig. 2.22).
Слайд 78

2.4 Navigating the Visual Studio IDE (Cont.) Fig. 2.22 | Properties

2.4  Navigating the Visual Studio IDE (Cont.)

Fig. 2.22 | Properties window showing

the description of the selected property.

Property values

Properties

Description

Categorized icon

Alphabetical icon

Component selection drop-down list

Toolbar

Scrollbar

Scrollbox

Слайд 79

Fig. 2.23 | Help menu commands. The Help menu commands are

Fig. 2.23 | Help menu commands.

The Help menu commands are

summarized in Fig. 2.23.

RECALL: 2.5  Using Help

Слайд 80

2.5 Using Help (Cont.) Help in VS 2010 is a disaster!

2.5  Using Help (Cont.)

Help in VS 2010 is a disaster!
Microsoft

should be ashamed of what they did. A huge step back compared to Help in VS 2008.
Context-sensitive help displays relevant help articles rather than a generalized list (Fig. 2.24).
To use context-sensitive help, click an item, then press the F1 key.

This is how good it was in VS 2008:
Fig. 2.24 | Using context-sensitive help to show help articles related to a Form.

Слайд 81

2.5 Using Help (Cont.) Select Tools > Options… Make sure that

2.5  Using Help (Cont.)

Select Tools > Options…
Make sure that the

Show all settings checkbox is checked (Fig. 2.25).?from VS 2008
Select Help on the left, then locate the Show Help using: drop-down list.
External Help Viewer displays articles in a separate window
Integrated Help Viewer displays a help article inside the IDE.
Слайд 82

2.5 Using Help (Cont.) Fig. 2.25 | Options dialog displaying Help

2.5  Using Help (Cont.)

Fig. 2.25 | Options dialog displaying Help settings.

Show

Help using drop-down list

Help options selected

Show all settings check box

- Предыдущая
New project
Следующая -
Животные на пьедесталах

Похожие презентации

Решение задачи №8 Линейный алгоритм. Информатика ОГЭ 9 класс
Семинар по 1С:ERP
lektsia_1
Линейные программы. Лекция 4
ПО для виртуализации. Виртуальные машины
Множество. Подмножество.
Тема 13 Понятие об алгоритме 1. Понятие об алгоритме 2. Способы записи алгоритмов 3. Алгоритмы ветвления 4. Циклические алгоритмы 5.
Презентация "MSC.Flightloads 5.4" - скачать презентации по Информатике
ИСТОРИЯ РАЗВИТИЯ вычислительной техники Информатика, 8 класс
Доработки эквайринга
Adyna geçirme buýrugy. Arifmetiki amallar (goşmak, aýyrmak, köpeltmek, bölmek, bütünleýin bölmek amallary) we aňlatmalar
Анализ дискуссионной программы. Программа Открытый эфир
Моделирование подражательного поведения и викарного научения в группах мобильных роботов
Лекция 3. Описание классов, модификаторы доступа.
Имена и типы файлов Презентацию подготовила преподаватель ГБОУ СПО «Баймакский сельскохозяйственный техникум» Мусина Ж.М.
Intro to Python. Visual studio code
Представление чисел в памяти компьютера Табличные вычисления на компьютере
Программирование компьютерной игры “Red Square” на игровом движке Game Maker Studio
Естественный языковой интерфейс
Системы счисления. Двоичное кодирование в компьютере
Cisco ASA (Adaptive Security Appliance) – межсетевой экран
Муниципальный военно-патриотический интернет- квест орленок, посвященный памяти героев-земляков ,
Дополнительные возможности курсоров (PL/SQL)
Часы
Создание и валидация моделей для предотвращения мошенничества в банковской сфере
Формы записи алгоритмов. Линейный алгоритм
Настройки параметров Word
Опасности в интернете
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть