Chapter 2 – Introduction to the Visual Studio .NET IDE Powerpoint slides modified from Deitel & Deitel

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

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

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

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.

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

Visual Studio .NET IDE Overview Tabs Menu Solution Explorer window Active tab Menu bar Form (Windows application) Properties window

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

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

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

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. 2.21 Toolbox window.

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

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

Properties Window Fig. 2.22 Properties window. Component selection Characterized icon Event icon Alphabet icon Scroll bar Current value Property Description Fig. 2.22 Properties window.

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.

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.

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.

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

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

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

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.

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.

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.

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.

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

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.

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

Running the Program Form Running program Close box Run mode Design form IDE in run mode, with the running application in the foreground.

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