6.10.

2022

Chapter 2 of Visual C# How to Program, 6/e

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 Visual Studio is Microsoft’s Integrated Development Environment

(IDE) for creating, running and debugging apps (also called
applications) written in C# and various other .NET programming
languages.
 In this chapter, we overview the Visual Studio Community 2015 IDE,
then show how to create a simple Visual C# app by dragging and
dropping predefined building blocks into place—a technique known as
visual app development.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

1
 6.10.2022

 This book’s examples, screen captures and discussions are based on  When you open Visual Studio it initially displays the Start Page (Fig.
the free Visual Studio Community 2015 running on Windows 10. 2.1).
 The examples will work on full versions of Visual Studio as well—  Depending on your version of Visual Studio, your Start Page may look
though some options, menus and instructions might differ. different.
 From this point forward, we’ll refer to Visual Studio Community 2015  The Start Page contains a list of links to Visual Studio resources and
simply as “Visual Studio” or “the IDE.” We assume that you have some web-based resources.
familiarity with Windows.  At any time, you can return to the Start Page by selecting View > Start
Page.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 Visual Studio supports three themes that specify the IDE’s

color scheme:
 a dark theme (with dark window backgrounds and light text)
 a light theme (with light window backgrounds and dark text) and
 a blue theme (with light window backgrounds and dark text).
 We use the blue theme throughout this book.
 The Before You Begin section after the Preface explains how
to set this option.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

2
 6.10.2022

 The Start Page links are organized into two columns.  The Start Page’s right column contains links to various online
documentation and resources to help you get started with Visual
 The left column’s Start section contains options for
Studio and learn about Microsoft programming technologies.
building new apps or working on existing ones.
 To access more extensive information on Visual Studio, you can
 The left column’s Recent section contains links to projects browse the MSDN (Microsoft Developer Network) Library at
you’ve recently created or modified.  https://msdn.microsoft.com/library/dd831853
 You also can browse the web from the IDE by selecting View > Other
Windows > Web Browser.
 To request a web page, type its URL into the location bar (Fig. 2.2)
and press Enter

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 A project is a group of related files, such as the Visual C#

code and any images that might make up an app.
 Visual Studio organizes apps into projects and solutions,
which contain one or more projects.
 Multiple-project solutions are used to create large-scale apps.
 You select File > New > Project… to create a new project or
File > Open > Project/Solution… to open an existing one.
 You also can click the corresponding links in the Start
Page’s Start section.
© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

3
 6.10.2022

 For the discussions in the next several sections, we’ll create

a new project. Select File > New > Project… to display the
New Project dialog (Fig. 2.3).
 Dialogs are windows that facilitate user–computer
communication.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 Visual Studio provides many templates—the project types that users can create
in Visual C# and other languages.
 A Windows Forms Application is an app that executes within a Windows
operating system and typically has a graphical user interface (GUI).
 Users interact with this visual part of the app.
 To create a Windows Forms Application, under Templates select Visual C# >
Windows > Classic Desktop, then in the middle column select Windows
Forms Application.
 Click OK to display the IDE in Design view (Fig. 2.4), which contains the
features that enable you to create an app’s GUI.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

4
 6.10.2022

 The rectangle in the Design area titled Form1 (called a Form)  Each open document’s name is listed on a tab. To view a
represents the main window of the Windows Forms app. document when multiple documents are open, click its tab.
 Each Form is an object of class Form in the .NET Framework Class
 The active tab (the tab of the currently displayed
Library.
 Apps can have multiple Forms (windows). document) is highlighted.
 A Label typically contains descriptive text (for example, "Welcome to  The active tab’s highlight color depends on the Visual Studio
Visual C#!"), and a PictureBox displays an image. theme—the blue theme uses a yellow highlight and the light
 Visual Studio has many preexisting controls and other components you and dark themes use a blue highlight.
can use to build and customize your apps.
 Collectively, the Form and controls make up the app’s GUI.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 Commands for managing the IDE and for developing, maintaining and
executing apps are contained in menus, which are located on the menu
bar of the IDE (Fig. 2.5).
 The set of menus displayed depends on what you’re currently doing in the IDE.
 Menus contain groups of related commands called menu items that,
when selected, cause the IDE to perform specific actions.
 The menus depicted in Fig. 2.5 are summarized in Fig. 2.6.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

5
 6.10.2022

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 You can access many common menu commands from the

toolbar (Fig. 2.7), which contains icons that graphically
represent commands.
 By default, the standard toolbar is displayed when you run
Visual Studio for the first time—it contains icons for the
most commonly used commands, such as opening a file,
saving files and running apps.
 The icons that appear on the standard toolbar may vary, depending
on the version of Visual Studio you’re using.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

6
 6.10.2022

 You can customize which toolbars are displayed by selecting View >
Toolbars then selecting a toolbar from the list in Fig. 2.8.
 Each toolbar you select is displayed with the other toolbars at the
top of the Visual Studio window.
 You move a toolbar by dragging its handle

 To execute a command via the toolbar, click its icon.

 Hovering the mouse pointer over an icon highlights it and displays a
description of the icon called a tool tip (Fig. 2.9)

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 The IDE provides windows for accessing project files and customizing
controls. Each can be accessed by selecting its name in the View menu.
 Visual Studio provides an auto-hide space-saving feature.
 When auto-hide is enabled for a window, a tab containing the window’s name
appears along the IDE window’s left, right or bottom edge (Fig. 2.10).
 Clicking the name of an auto-hidden window displays that window (Fig. 2.11).
 Clicking the name again (or clicking outside) hides the window.
 To “pin down” a window (that is, to disable auto-hide and keep the
window open), click the pin icon.
 When auto-hide is enabled, the pin icon is horizontal
 When a window is “pinned down,” the pin icon is vertical

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

7
 6.10.2022

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 The Solution Explorer window (Fig. 2.13) provides access

to all of a solution’s files.
 If it’s not shown in the IDE, select View > Solution
Explorer.
 When you open a new or existing solution, the Solution
Explorer displays the solution’s contents.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

8
 6.10.2022

 The solution’s startup project (shown in bold in the Solution  By default, the IDE displays only files that you may need to edit—other
Explorer) is the one that runs when you select Debug > Start files that the IDE generates are hidden.
Debugging (or press F5) or select Debug > Start Without Debugging  The Solution Explorer window includes a toolbar that contains several
(or press Ctrl + F5 key). icons.
 For a single-project solution, the startup project is the only project.  Clicking the Show All Files icon (Fig. 2.13) displays all the solution’s
 When you create an app for the first time, the Solution Explorer files, including those generated by the IDE.
window appears as shown in Fig. 2.13.  Clicking the arrow to the left of a node expands or collapses that node.
 The Visual C# file that corresponds to the Form shown in Fig. 2.4 is  Click the arrow to the left of References to display items grouped
named Form1.cs (selected in Fig. 2.13). under that heading (Fig. 2.14).
 Visual C# files use the .cs file-name extension, which is short for “C#.”  Click the arrow again to collapse the tree.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

9
 6.10.2022

 To display the Toolbox window, select View > Toolbox.

 Contains the controls used to customize Forms (Fig. 2.15).
 With visual app development, you can “drag and drop” controls onto
the Form and the IDE will write the code that creates the controls for
you.
 The Toolbox groups the prebuilt controls into categories—All
Windows Forms, Common Controls, Containers, Menus & Toolbars,
Data, Components, Printing, Dialogs, Reporting, WPF
Interoperability and General.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 If the Properties window is not displayed below the Solution Explorer,  Fig. 2.16 shows Form1’s Properties window—you can view by
select View > Properties Window to display it. clicking anywhere in the Form1.cs [Design] window.
 The Properties window contains the properties for the currently  The left column lists the Form’s properties
selected Form, control or file in the IDE.  The right column displays the current value of each property.
 Properties specify information about the Form or control.  You can sort the properties either
 When you select a property, its description is displayed at the bottom  alphabetically (by clicking the Alphabetical icon) or
of the Properties window.  categorically (by clicking the Categorized icon).
 The Properties window is crucial to visual app development.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

10
 6.10.2022

 Microsoft provides extensive help documentation via the Help menu,

which is an excellent way to get information quickly about Visual
Studio, Visual C# and more.
 Visual Studio provides context-sensitive help pertaining to the
“current content” (that is, the items around the location of the mouse
cursor).
 To use context-sensitive help, click an item, then press the F1 key.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 Next, we create an app that displays the text "Welcome to

C# Programming!" and an image of the Deitel &
Associates bug mascot.
 The app consists of a Form that uses a Label and a
PictureBox. shows the final app executing.
 The app and the bug image are available with this chapter’s
examples.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

11
 6.10.2022

 The text in the Form’s title bar is determined by the Form’s

Text property.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

12
 6.10.2022

 The Form’s size is specified in pixels (that is, dots on the screen).
 By default, a Form is 300 pixels wide and 300 pixels tall.
 You can resize the Form by dragging one of its sizing handles (the
small white squares that appear around the Form, as shown in ).
 As you drag the mouse, the IDE’s status bar (at the bottom of the
IDE) shows the current width and height in pixels.
 You also can do this via the Form’s Size property in the Properties
window.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 The BackColor property specifies a Form’s or control’s background

color.
 Clicking BackColor in the Properties window causes a down-
arrow button to appear next to the value of the property.
 Clicking the down-arrow button displays other options, which vary
depending on the property.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

13
 6.10.2022

 Typical controls we use are located in the Toolbox’s Common

Controls group, and also can be found in the All Windows Forms
group.
 Each Label you add to the Form is an object of class Label from the
.NET Framework Class Library.
 By default, a Label’s BackColor is the same as the Form’s.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 Form and Label each have their own Text property

 By default, the AutoSize property of the Label is set to
True so the Label can update its own size to fit all of its
text.
 Setting AutoSize property to False allows you to change
the Label’s size using the sizing handles.
 You can center a control horizontally by selecting Format >
Center In Form > Horizontally.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

14
 6.10.2022

 Step 8: Setting the Label’s Font Size

 Select the value of a Label’s Font property, then click the
ellipsis button to display the Font dialog (Fig. 2.27).

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

15
 6.10.2022

 Select the Label’s TextAlign property to display a three-by-

three grid of buttons representing alignment choices.
 The position of each button corresponds to where the text
appears in the Label.


© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 The PictureBox control displays images.

 Each PictureBox you add to the Form is an object of class
PictureBox from the .NET Framework Class Library.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

16
 6.10.2022

 The Image property specifies the image to display in a

PictureBox.
 To scale the image to fit in the PictureBox, change the
SizeMode property to StretchImage.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

17
 6.10.2022

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

 Select File > Save All to save the entire solution.  In run mode, the app is executing, and you can interact
 The solution file (which has the filename extension .sln) with only a few IDE features—features that are not available
contains the name and location of its project, and the are disabled (grayed out).
project file (which has the filename extension .csproj)  Select Debug > Start Debugging to execute the app (or
contains the names and locations of all the files in the press the F5 key).
project.  The IDE enters run mode and displays “(Running)” next to
 If you want to reopen your project at a later time, simply the app’s name in the IDE’s title bar.
open its .sln file.  Click the app’s close box (X) to terminate the app

© 2018 Pearson Education, Ltd. All Rights Reserved. © 2018 Pearson Education, Ltd. All Rights Reserved.

18
 6.10.2022

© 2018 Pearson Education, Ltd. All Rights Reserved.

19