Upload
dayna-townsend
View
227
Download
0
Tags:
Embed Size (px)
Citation preview
1
Chapter 2 – Introduction to the Visual Studio .NET IDE
Powerpoint slides modified from Deitel & Deitel
2
Visual Studio .NET Integrated Development Environment (IDE)
The Start PageHelpful links appear on left sideThe Getting Started screen
• Links to recent projects• The Open Project and New Project
buttons
3
Overview
Start Page in Visual Studio .NET.
Start Page
tab
empty no projects
New Project
button
Start Page links
4
Visual Studio .NET IDE
New project dialogueC# .NET project
• Group of related files, images, and documentation
C# .NET solution• Group of projects creating one or a group of
applications
Windows Applications• Anything that runs in the Windows OS
5
Visual Studio .NET IDE Overview
Fig. 2.3 New Project dialog.
Visual C# projects folder
project name
project location
description of selected project
Visual C# Windows Application (selected)
6
Visual Studio .NET IDE
IDE after a new projectThe form
• Grey rectangle in window• Represents the project’s window• Part of the GUI
• Graphical components for user interaction• User can enter data (input)• Shows user instructions or results (output)
Tabs• One tab appears for each open document
7
Visual Studio .NET IDE OverviewActive tab
Tabs MenuMenu bar
Solution Explorer
window
Form (Windows application) Properties window
8
Menu Bar
The menu bar Commands for developing and executing
programs• To create new projects select:
File > New > Project Certain menu options only appear in specific
modes
9
Solution Explorer
The Solution Explorer Lists all files in the solution Displays the contents or a new project or open file Start up project runs when the program is
executed
Solution Explorer toolbar• The Refresh icon reloads files in the solution• The Display icon shows all files, even the
hidden ones• Icons change based on selected file
Solution Explorer Toolbox
Propertieswindow
10
Solution Explorer
Solution Explorer window.
Show all files icon
Toolbar
Startup project
11
Toolbox
Fig. 2.21 Toolbox window.
toolbox group
controls
scroll arrow
Contains reusable controls Visual
programming allows ‘drag and drop’ of controls to customize the form
Toolbox
12
Toolbox
Fig. 2.14 Demonstrating window auto-hide.
mouse over window name
toggle auto hide
close button
13
Properties window
The Properties window (Fig. 2.22) Manipulate the properties of a form or control
• Properties can include size, color, text, or position
Right column is the property and left is the value Icons
• arranges the properties alphabetically or by category• The Event icon allows reactions to user actions
Users alter controls visually without writing code
14
Properties Window
Fig. 2.22 Properties window.
Alphabet icon
Characterized icon
Event icon
Component selection
Scroll bar
Current valueProperty
Description
15
Simple Program: Displaying Text and an Image
The program Form to hold other controls Label to display text PictureBox to display a
picture No code needed to create
this program
Fig. 2.27 Simple program as it executes.
Label control
PictureBoxcontrol
16
Simple Program: Create the new program
Creating a new Windows application.
Project nameProject location Click to change
project location
Project type
Create a new project Make the project a
windows application
Name it: ASimpleProject and sets its location
17
Simple Program: Displaying Text and an Image
Fig. 2.31 Setting the form’s Text property.
Name and type of object
Property value
Selected property
Property description
The Text property determines the text in the title bar
18
Simple Program: Resizing the form
Form with sizing handles.
grid
Mouse pointer over a sizing handle
Enabled sizing handle
Disabled sizing handle
Title bar
19
Simple Program: Selecting color
Changing property BackColor.
Down arrow
Current color
Custom palette
20
Simple Program: Change the form’s color and add a label
Adding a new label to the form.
New background color
21
Simple Program: Set the label’s text
Label in position with its Text property set.
Label centered with updated Text property
Text property used to set the text of a label
Label can be dragged to desired location
Or Format > Center In Form > Horizontal can also be used to position the label as in in this example
22
Simple Program: Set the label’s font size and align text
Properties window displaying the label’s properties.
Ellipsis indicate dialog will appear
The Font property changes the label’s text
The TextAlign property to align the text
23
Simple Program: Adding a picture box
Inserting and aligning the picture box.
Picture boxes are used to display pictures
Drag the picture box onto the form
UpdatedLabel
PictureBox
24
Simple Program: Inserting an Image
Fig. 2.43 Image property of the picture box.
Image property value (no image selected)
Insert an imageThe Image property
sets the image that appears
• Pictures should be of type .gif, .jpeg, or .png
25
Simple Program: Selecting the Image
Fig. 2.44 Selecting an image for the picture box.
26
Simple Program: Resizing the Image
Newly inserted image (after resizing the picture box)
The picture box is resizable to fit the entire image
| PictureBox displaying an image.
27
Simple Program: Saving and Running
Save the project In the Solution Explorer select File > Save Using Save All will save the source code and
the project
Run the project In run mode several IDE features are disabled Click Build Solution in the Build menu to
compile the solution Click Debug in the Start menu or press the F5
key
28
Running the Program
IDE in run mode, with the running application in the foreground.
Run mode Design form
Form
Running program
Close box
29
Simple Program: Terminating the program
Click the close button (x in the top right corner)
Or click the End button in the toolbar