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 Page
Helpful links appear on left side
The Getting Started screen
Links to recent projects
The Open Project and New Project buttons

3. Overview Start Page in Visual Studio .NET. New Project button
tab
empty no projects
Start Page links
Start Page in Visual Studio .NET.

4. Visual Studio .NET IDE New project dialogue C# .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
description of selected project
Visual C# projects folder
Visual C# Windows Application (selected)
project name
project location
Fig. 2.3 New Project dialog.

6. Visual Studio .NET IDE IDE after a new project The form Tabs
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 Overview
Tabs
Menu
Solution Explorer
window
Active tab
Menu bar
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 Solution Explorer toolbar
Toolbox
Properties
window
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

10. Solution Explorer Solution Explorer window. Show all files icon
Toolbar
Startup project
Solution Explorer window.

11. Toolbox Contains reusable controls
toolbox group
Contains reusable controls
Visual programming allows ‘drag and drop’ of controls to customize the form
controls
scroll arrow
Fig Toolbox window.

12. Toolbox Fig. 2.14 Demonstrating window auto-hide. close button
toggle auto hide
mouse over window name
Fig Demonstrating window auto-hide.

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. Component selection
Characterized icon
Event icon
Alphabet icon
Scroll bar
Current value
Property
Description
Fig Properties window.

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
Label control
PictureBox
control
Fig Simple program as it executes.

16. Simple Program: Create the new program
Project type
Create a new project
Make the project a windows application
Name it: ASimpleProject and sets its location
Project location
Click to change project location
Project name
Creating a new Windows application.

17. Simple Program: Displaying Text and an Image
The Text property determines the text in the title bar
Name and type of object
Selected property
Property value
Property description
Fig Setting the form’s Text property.

18. Simple Program: Resizing the form
Title bar
grid
Disabled sizing handle
Mouse pointer over a sizing handle
Enabled sizing handle
Form with sizing handles.

19. Simple Program: Selecting color
Current color
Custom palette
Down arrow
Changing property BackColor.

20. Simple Program: Change the form’s color and add a label
New background color
Adding a new label to the form.

21. Simple Program: Set the label’s text
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
Label centered with updated Text property
Label in position with its Text property set.

22. Simple Program: Set the label’s font size and align text
The Font property changes the label’s text
The TextAlign property to align the text
Ellipsis indicate dialog will appear
Properties window displaying the label’s properties.

23. Simple Program: Adding a picture box
Picture boxes are used to display pictures
Drag the picture box onto the form
Updated
Label
PictureBox
Inserting and aligning the picture box.

24. Simple Program: Inserting an Image
Insert an image
The Image property sets the image that appears
Pictures should be of type .gif, .jpeg, or .png
Image property value (no image selected)
Fig Image property of the picture box.

25. Simple Program: Selecting the Image
Fig Selecting an image for the picture box.

26. Simple Program: Resizing the Image
The picture box is resizable to fit the entire image
Newly inserted image (after resizing the picture box)
| 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
Form
Running program
Close box
Run mode
Design form
IDE in run mode, with the running application in the foreground.

29. Simple Program: Terminating the program
Click the close button (x in the top right corner)
Or click the End button in the toolbar