IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE...
Transcript of IT 374 C# and Applications/ IT695 C# Data Structures · Overview Visual Studio Community 2015 IDE...
![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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/1.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/2.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/3.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/5.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/6.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/7.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/8.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/9.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/10.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/12.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/13.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/14.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/15.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/16.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/17.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/18.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/19.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/20.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/21.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/22.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/23.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/24.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/25.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/26.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/27.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/28.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/29.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/30.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/31.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/32.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/33.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/34.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/35.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/36.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022022007/5acfa1ca7f8b9a8b1e8ceffe/html5/thumbnails/37.jpg)
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