Chapter 2 – Introduction to the Visual Studio .NET IDE

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 StartPage • Helpful links appear on left side • The GettingStarted screen • Links to recent projects • The OpenProject and NewProject buttons

3. Overview New Project button Start Page 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 • 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 Properties window Form (Windows application)

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. Properties window Solution Explorer Toolbox Solution Explorer • The SolutionExplorer • 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 • SolutionExplorer 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. Show all files icon Toolbar Startup project Solution Explorer Solution Explorer window.

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

12. Toolbox close button toggle auto hide mouse over window name Fig. 2.14 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 Component selection Characterized icon Event icon Alphabet icon Scroll bar Current value Property Description Fig. 2.22 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. 2.27 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. 2.31 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. New background color Simple Program: Change the form’s color and add a label 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>CenterInForm>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. Updated Label PictureBox Simple Program: Adding a picture box • Picture boxes are used to display pictures • Drag the picture box onto the form 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. 2.43 Image property of the picture box.

25. Simple Program: Selecting the Image Fig. 2.44 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 SolutionExplorer select File>Save • Using SaveAll will save the source code and the project • Run the project • In run mode several IDE features are disabled • Click BuildSolution in the Build menu to compile the solution • Click Debug in the Start menu or press the F5 key

28. Form Close box Running program Running the Program 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