1 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. Start Page tab Solution Explorer - empty no open projects New Project button Start Page links Recent Projects listed here Collapsed Toolbox Window

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 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 project The 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 Overview Active 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 Properties window

10 Solution Explorer

11 Toolbox Fig Toolbox window. Contains reusable controls To display the Toolbox window, select VIEW > Toolbox. Visual programming allows ‘drag and drop’ of controls to customize the form

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

13 Properties window The Properties window (Fig. 2.18) 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

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

16 Simple Program: Create the new program Creating a new Windows application. Project name Project 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.22Setting the form’s Text property. The Text property determines the text in the title bar

18 Simple Program: Resizing the form Form with sizing handles. grid 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. 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 Updated Labe l PictureBox

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

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

26 Simple Program: Resizing the Image Newly inserted image (after setting SizeMode property to S t retchImage ) 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 Design form

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