it 374 c# and applications/ it695 c# data structures · overview visual studio community 2015 ide...

37
Module 1.3: Introduction to Visual Studio and Visual Programming Xianrong (Shawn) Zheng Spring 2017 IT 374 C# and Applications/ IT695 C# Data Structures IT374/ IT695 1

Upload: lytuyen

Post on 13-Apr-2018

225 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Module 1.3: Introduction to Visual Studio and Visual Programming

Xianrong (Shawn) Zheng

Spring 2017

IT 374 C# and Applications/IT695 C# Data Structures

IT374/ IT695 1

Page 2: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Visual Studio Visual Programming

Outline

IT374/ IT695 2

Page 3: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

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. Overview Visual Studio Community 2015 IDE Create a simple Visual C# app

Introduction

IT374/ IT695 3

Page 4: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

On Windows 10, click Start, and then select All Apps > Visual Studio 2015. Initially, Visual Studio displays the Start Page.

Overview of the Visual Studio Community 2015 IDE

IT374/ IT695 4

Page 5: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 5

Page 6: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Visual Studio Themes A dark theme (with dark window backgrounds and

light text) A light theme (with light window backgrounds and

dark text) A blue theme (with light window backgrounds and

dark text)

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 6

Page 7: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Links on the Start Page The left column’s Start section contains options for

building new apps or working on existing ones. The Start Page’s right column contains links to

various online documentation and resources to help you get started with Visual Studio and learn about Microsoft programming technologies.

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 7

Page 8: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

To access more extensive information on Visual Studio, you can browse the MSDN (Microsoft Developer Network) Library at https://msdn.Microsoft.com/library/dd831853

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 8

Page 9: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 9

Page 10: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

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. Select File > New > Project… to create a new project. Select File > Open > Project/Solution… to open an

existing one.

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 10

Page 11: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Dialogs are windows that facilitate user-computer communication Select File > New > Project… to display the New

Project dialog.

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 11

Page 12: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Visual Studio provides many templates ─ the project types that users can create in Visual C# and other languages. The templates include Windows Forms apps, WPF apps and others. Windows Forms Application is an app that executes within a Windows operating system and typically has a graphical user interface (GUI). To create a Windows Forms Application, under

templates select Visual C# > Windows > Classic Desktop, then in the middle column select Windows Forms Application.

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 12

Page 13: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 13

Page 14: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

The IDE’s Design view contains the features that enable you to create an app’s GUI.

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 14

Page 15: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 15

Page 16: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

The rectangle in the Design area titled Form1 (called a Form) represents the main window of the Windows Forms app that you’re creating. Each Form is an object of class Form in the .NET

Framework Class Library. GUI controls are used to customize the Form. A Lable typically contains descriptive text (for example,

“Welcome to Visual C#”). A PictureBox displays an image.

Overview of the Visual Studio Community 2015 IDE (Cont.)

IT374/ IT695 16

Page 17: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

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.

Menu Bar and Toolbar (Cont.)

IT374/ IT695 17

Page 18: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Menus contain groups of related commands called menu items, when selected, cause the IDE to perform specific actions ─for example, open a window, save a file, print a file and execute an app.

Menu Bar and Toolbar (Cont.)

IT374/ IT695 17

Page 19: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 19

Page 20: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 20

Page 21: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

You can access many common menu commands from the toolbar, which contains icons that graphically represent commands.

Menu Bar and Toolbar (Cont.)

IT374/ IT695 21

Page 22: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 9

Page 23: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 23

Page 24: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

Hovering the mouse pointer over an icon highlights it, and, after a brief pause, displays a description of the icon called a tool tip.

Menu Bar and Toolbar (Cont.)

IT374/ IT695 24

Page 25: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

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.

Navigating the Visual Studio IDE

IT374/ IT695 25

Page 26: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 26

Page 27: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 27

Page 28: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 28

Page 29: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

The Solution Explorer window provides access to all of a solution’s files. The solution’s startup project (shown in bold in the

Solution Explorer) is the one that runs when you select Debug > Start Debugging (or press F5) or select Debug > Start Without Debugging (or press Ctrl + F5 key)

Visual C# files use the .cs file-name extension, which is short for “C#”.

Navigating the Visual Studio IDE (Cont.)

IT374/ IT695 29

Page 30: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 30

Page 31: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 31

Page 32: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

The Toolbox contains the controls used to customize Forms.

Navigating the Visual Studio IDE (Cont.)

IT374/ IT695 32

Page 33: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 33

Page 34: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

The Properties window contains the properties for the currently selected Form, control or file in the IDE. Properties specify information about the Form or control, such as its size, color, and position. Each Form or control has its own set of properties You can sort the properties either

• alphabetically (by clicking the Alphabetical icon)• categorically (by clicking the Categorized icon)

The Properties window allows you to quickly modify a control’s properties and, rather than writing code yourself, lets the IDE write code for you “behind the scenes.”

Navigating the Visual Studio IDE (Cont.)

IT374/ IT695 32

Page 35: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

IT374/ IT695 35

Page 36: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

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).

Help Menu and Context-Sensitive Help

IT374/ IT695 36

Page 37: IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE ... building new apps or working on existing ones. ... The IDE’s Design view contains

This app is left as homework for students. Please perform the 14 steps from the textbook (pp. 47-56) to create, save, run, and terminate the app that displays the text “Welcome to C# Programming!” and an image of the Deitel & Associates bug mascot.

Visual Programming: Creating a Simple App that Displays Text and Image

IT374/ IT695 37