Tell us about your PDF experience.

Visual Studio tutorials | C#

Create C# apps with Visual Studio.

Get started

ｃ HOW-TO GUIDE

Download and install Visual Studio

ｂ GET STARTED

Start a guided tour

ｆ QUICKSTART

Create a "Hello World" web app

Create C# apps

ｇ TUTORIAL

Create a console app

Create a web app

Create a Windows App SDK app

Create a Windows Desktop app

Create a Windows Forms app

Create a mobile app with .NET MAUI

Learn about the C# language

Windows Forms Match Game

Windows Forms Math Quiz

Windows Forms Picture Viewer

Learn Visual Studio

ｇ TUTORIAL

Run a program

Open code from a repo

Write and edit code

Compile and build

Debug your code

Test your code

ｃ HOW-TO GUIDE

Access data
Welcome to the Visual Studio IDE | C#
03/11/2024

An integrated development environment (IDE) is a feature-rich program that supports many

aspects of software development. The Visual Studio IDE is a creative launching pad that you
can use to edit, debug, and build code, and then publish an app. Over and above the standard
editor and debugger that most IDEs provide, Visual Studio includes compilers, code
completion tools, graphical designers, and many more features to enhance the software
development process.

The preceding image shows Visual Studio with an open project that shows key windows and
their functionality:

In Solution Explorer, at upper right, you can view, navigate, and manage your code files.
Solution Explorer can help organize your code by grouping the files into solutions and
projects.

The central editor window, where you'll probably spend most of your time, displays file
contents. In the editor window, you can edit code or design a user interface such as a
window with buttons and text boxes.

In Git Changes at lower right, you can track work items and share code with others by
using version control technologies like Git and GitHub .

Editions
Visual Studio is available for Windows.

There are three editions of Visual Studio: Community, Professional, and Enterprise. See
Compare Visual Studio editions to learn about which features are supported in each edition.

Popular productivity features

Some popular features in Visual Studio that improve your productivity when developing
software include:

Squiggles and Quick Actions

Squiggles are wavy underlines that alert you to errors or potential problems in your code
as you type. These visual clues help you fix problems immediately, without waiting to
discover errors during build or runtime. If you hover over a squiggle, you see more
information about the error. A lightbulb might also appear in the left margin showing
Quick Actions you can take to fix the error.

Code Cleanup

With the click of a button, you can format your code and apply any code fixes suggested
by your code style settings, .editorconfig conventions, and Roslyn analyzers. Code
Cleanup, currently available for C# code only, helps you resolve issues in your code
before it goes to code review.

Refactoring

Refactoring includes operations such as intelligent renaming of variables, extracting one

or more lines of code into a new method, and changing the order of method parameters.
IntelliSense

IntelliSense is a set of features that display information about your code directly in the
editor and, in some cases, write small bits of code for you. It's like having basic
documentation inline in the editor, so you don't have to look up type information
elsewhere.

The following illustration shows how IntelliSense displays a member list for a type:

IntelliSense features vary by language. For more information, see C# IntelliSense, Visual
C++ IntelliSense, JavaScript IntelliSense, and Visual Basic IntelliSense.

Visual Studio search

Visual Studio menus, options, and properties can seem overwhelming at times. Visual
Studio search, or Ctrl+Q, is a great way to rapidly find IDE features and code in one place.

For information and productivity tips, see How to use Visual Studio search.

Live Share

Collaboratively edit and debug with others in real time, regardless of your app type or
programming language. You can instantly and securely share your project. You can also
share debugging sessions, terminal instances, localhost web apps, voice calls, and more.

Call Hierarchy ọ
G i h ệ ố ấ
th ng phân c p

The Call Hierarchy window shows the methods that call a selected method. This
information can be useful when you're thinking about changing or removing the method,
or when you're trying to track down a bug.
CodeLens

CodeLens helps you find code references, code changes, linked bugs, work items, code
reviews, and unit tests, without leaving the editor.

Go To Definition

The Go To Definition feature takes you directly to the location of a function or type
definition.

Peek Definition
 The Peek Definition window shows a method or type definition without opening a
separate file.

Hot Reload

Hot Reload enables you to edit your application's code files and apply the code changes
immediately to the running application.

Install Visual Studio

In this section, you create a simple project to try out some of the things you can do with Visual
Studio. You use IntelliSense as a coding aid, debug an app to see a variable value during app
execution, and change the color theme.

To get started, download Visual Studio and install it on your system. In the modular installer,
you choose and install workloads, which are groups of features you need for the programming
languages or platforms you want. To use the following steps to create a program, be sure to
select the .NET desktop development workload during installation.
When you open Visual Studio for the first time, you can sign in by using your Microsoft
account or your work or school account.

Create a program
Dive in and create a simple program.

1. Start Visual Studio. The start window appears with options for cloning a repo, opening a
recent project, or creating a new project.

2. Choose Create a new project.

The Create a new project window opens and shows several project templates. A template
contains the basic files and settings required for a given project type.

3. To find a template, you can type or enter keywords in the search box. The list of available
templates filters based on the keywords you enter. You can further filter the template
results by choosing C# from the All languages dropdown list, Windows from the All
platforms list, and Console from the All project types list.

Select the Console Application template, and then select Next.

4. In the Configure your new project window, enter HelloWorld in the Project name box.
Optionally, change the project directory location from the default location of C:\Users\
<name>\source\repos, and then select Next.

5. In the Additional information window, verify that .NET 8.0 appears in the Target
Framework drop-down menu, and then select Create.
 

Visual Studio creates the project. The program is a simple "Hello World" application that
calls the [Link]() method to display the string Hello, World! in a console
window.

The project files appear on the right side of the Visual Studio IDE, in a window called the
Solution Explorer. In the Solution Explorer window, select the [Link] file. The C#
code for your app opens in the central editor window, which takes up most of the space.

The code is automatically colorized to indicate different parts, such as keywords and
types. Line numbers help you locate code.
 Small, vertical dashed lines in the code indicate which braces match one another. You can
also choose small, boxed minus or plus signs to collapse or expand blocks of code. This
code outlining feature lets you hide code you don't need to see, helping to minimize
onscreen clutter.

Many other menus and tool windows are available.

6. Start the app by choosing Debug > Start Without Debugging from the Visual Studio top
menu. You can also press Ctrl+F5.
 Visual Studio builds the app, and a console window opens with the message Hello,
World!. You now have a running app!

7. To close the console window, press any key.

8. Let's add some more code to the app. Add the following C# code before the line that
says [Link]("Hello World!"); :

C#

[Link]("\nWhat is your name?");

 var name = [Link]();

This code displays What is your name? in the console window, and then waits until the
user enters some text.

9. Change the line that says [Link]("Hello World!"); to the following line:

C#

[Link]($"\nHello {name}!");

10. Run the app again by selecting Debug > Start Without Debugging or pressing Ctrl+F5.

Visual Studio rebuilds the app, and a console window opens and prompts you for your
name.

11. Type your name in the console window and press Enter.

12. Press any key to close the console window and stop the running program.

Use refactoring and IntelliSense

Let's look at a couple of the ways that refactoring and IntelliSense can help you code more
efficiently.

First, rename the name variable:

1. Double-click the name variable, and type the new name for the variable, username.

A box appears around the variable, and a light bulb appears in the margin.

2. Select the light bulb icon to show the available Quick Actions. Select Rename 'name' to
'username'.
 The variable is renamed across the project, which in our case is only two places.

3. Now take a look at IntelliSense. Below the line that says [Link]($"\nHello
{username}!"); , type DateTime now = DateTime. .

A box displays the members of the DateTime class. The description of the currently
selected member also displays in a separate box.

4. Select the member named Now, which is a property of the class, by double-clicking it or
pressing Tab. Complete the line of code by adding a semicolon to the end of the line:
DateTime now = [Link]; .

5. Below that line, enter the following lines of code:

C#

int dayOfYear = [Link];

[Link]("Day of year: ");

[Link](dayOfYear);

 Tip

[Link] is different from [Link] in that it doesn't add a line

terminator after it prints. That means that the next piece of text that's sent to the
output will print on the same line. You can hover over each of these methods in your
code to see their descriptions.
 6. Next, use refactoring again to make the code a little more concise. Select the variable now
in the line DateTime now = [Link]; . A screwdriver icon appears in the margin on
that line.

7. Select the screwdriver icon to see available suggestions from Visual Studio. This case
shows the Inline temporary variable refactoring to remove a line of code without
changing the overall code behavior.

8. Select Inline temporary variable to refactor the code.

9. Run the program again by pressing Ctrl+F5. The output looks something like this:

Debug code
When you write code, you should run it and test it for bugs. Visual Studio's debugging system
lets you step through code one statement at a time and inspect variables as you go. You can
set breakpoints that stop execution of the code at a particular line, and observe how the
variable value changes as the code runs.

Set a breakpoint to see the value of the username variable while the program is running.

1. Set a breakpoint on the line of code that says [Link]($"\nHello

{username}!"); by clicking in the far-left margin, or gutter, next to the line. You can also

select the line of code and then press F9.

A red circle appears in the gutter, and the line is highlighted.

2. Start debugging by selecting Debug > Start Debugging or pressing F5.

3. When the console window appears and asks for your name, enter your name.

The focus returns to the Visual Studio code editor, and the line of code with the
breakpoint is highlighted in yellow. The yellow highlight means that this line of code will
execute next. The breakpoint makes the app pause execution at this line.

4. Hover your mouse over the username variable to see its value. You can also right-click on
username and select Add Watch to add the variable to the Watch window, where you can

also see its value.

5. Press F5 again to finish running the app.

Once the app is running, you can apply code changes to the running app by clicking the Hot
Reload button.

For more information about debugging in Visual Studio, see the Debugger feature tour.

Customize Visual Studio

You can personalize the Visual Studio user interface, including changing the default color
theme. To change the color theme:

1. On the menu bar, choose Tools > Options to open the Options dialog.

2. On the Environment > General options page, change the Color Theme selection to Blue
or Light, and then select OK.

The color theme for the entire IDE changes accordingly. The following screenshot shows
the Blue theme:

To learn about other ways you can personalize the IDE, see Personalize Visual Studio.

Select environment settings

You can configure Visual Studio to use environment settings tailored to C# developers:

1. On the menu bar, choose Tools > Import and Export Settings.
 2. In the Import and Export Settings Wizard, select Reset all settings, and then select Next.

3. On the Save Current Settings page, choose whether to save your current settings before
resetting. If you haven't customized any settings, select No, just reset settings,
overwriting my current settings. Then select Next.

4. On the Choose a Default Collection of Settings page, choose Visual C#, and then select
Finish.

5. On the Reset Complete page, select Close.

To learn about other ways you can personalize the IDE, see Personalize Visual Studio.

Next steps
Explore Visual Studio further by following along with one of these introductory articles:

Learn to use the code editor

Learn about projects and solutions

See also
Discover more Visual Studio features.
Visit [Link] .
Read the Visual Studio blog .
Learn to use the code editor with C#
08/22/2024

In this 10-minute introduction to the code editor in Visual Studio, we'll add code to a file to
look at some of the ways that Visual Studio makes writing, navigating, and understanding C#
code easier.

If you haven't already installed Visual Studio, go to the Visual Studio downloads page to
install it for free.

This article assumes you're already familiar with C#. If you aren't, we suggest you look at a
tutorial such as Get started with C# and [Link] Core in Visual Studio first.

 Tip

To follow along with this article, make sure you have the C# settings selected for Visual
Studio. For information about selecting settings for the integrated development
environment (IDE), see Select environment settings.

Create a new code file

Start by creating a new file and adding some code to it.

1. Open Visual Studio. Press Esc, or choose Continue without code on the start window, to
open the development environment.

2. From the File menu on the menu bar, choose New > File, or press Ctrl+N.

3. In the New File dialog box, under the General category, choose Visual C# Class, and then
choose Open.

A new file opens in the editor with the skeleton of a C# class. You don't have to create a
full Visual Studio project to gain some of the benefits that the code editor offers—all you
need is a code file.
Use code snippets
Visual Studio provides useful code snippets that you can use to quickly and easily generate
commonly used code blocks. Code snippets are available for different programming languages
including C#, Visual Basic, and C++.

Let's add the C# void Main snippet to our file.

1. Place your cursor just above the final closing brace } in the file, and type the characters
svm . svm stands for static void Main —don't worry if you don't know what that means

yet.

A pop-up dialog box appears with information about the svm code snippet.

2. Press Tab twice to insert the code snippet.

 You'll see the static void Main() method signature get added to the file. The Main()
method is the entry point for C# applications.

Available code snippets vary for different programming languages. You can look at the
available code snippets for your language by choosing Edit > IntelliSense > Insert Snippet or
pressing Ctrl+K, Ctrl+X, and then choosing the folder for your programming language. For C#,
the snippet list looks like this:

The list includes snippets for creating a class, a constructor, a for loop, an if or switch
statement, and more.

Comment out code

The toolbar, which is the row of buttons under the menu bar in Visual Studio, helps make you
more productive as you code. For example, you can toggle IntelliSense completion mode,
increase or decrease a line indent, or comment out code that you don't want to compile.

Let's comment out some code.

1. Paste the following code into the Main() method body.

 C#

// someWords is a string array.

string[] someWords = {
"the",
"quick",
"brown",
"fox",
"jumps"
};

string[] moreWords = {
"over",
"the",
"lazy",
"dog"
};

// Alphabetically sort the words.

IEnumerable<string> query = from word in someWords
orderby word
select word;

2. We're not using the moreWords variable, but we might use it later so we don't want to
delete it. Instead, we'll comment out those lines. Select the entire definition of moreWords
down to the closing semicolon, and then choose the Comment out the selected lines
button on the toolbar. If you prefer to use the keyboard, press Ctrl+E, Ctrl+C.

The C# comment characters // are added to the beginning of each selected line to
comment out the code.

Collapse code blocks

We don't want to see the empty constructor that was generated for Class1 , so to unclutter our
view of the code, let's collapse it. Choose the small gray box with the minus sign inside it in the
margin of the first line of the constructor. Or, if you prefer to use the keyboard, place the
cursor anywhere in the constructor code and press Ctrl+M, Ctrl+M.
The code block collapses to just the first line, followed by an ellipsis ( ... ). To expand the code
block again, select the same gray box that now has a plus sign in it, or press Ctrl+M, Ctrl+M
again. This feature is called Outlining and is especially useful when you're collapsing long
methods or entire classes.

View symbol definitions

The Visual Studio editor makes it easy to inspect the definition of a type, method, or variable.
One way is to go to the definition, in whichever file has it, by choosing Go to Definition or
pressing F12 anywhere a symbol is referenced. An even quicker way that doesn't move your
focus away from the code you're working on is to use Peek Definition.

Let's peek at the definition of the string type.

1. Right-click on any occurrence of string and choose Peek Definition from the content
menu. Or, press Alt+F12.

A pop-up window appears with the definition of the String class. You can scroll within
the pop-up window, or even peek at the definition of another type from the peeked code.

2. Close the peek definition window by choosing the small box with an "x" at the top right
of the pop-up window.

Use IntelliSense to complete words

IntelliSense is an invaluable resource when you're coding. It can show you information about
available members of a type, or parameter details for different overloads of a method. You can
also use IntelliSense to complete a word after you type enough characters to disambiguate it.

Let's add a line of code to print out the ordered strings to the console window, which is the
standard place for output from the program to go.

1. Below the query variable, start typing the following code:

 C#

foreach (string str in qu

You'll see an IntelliSense pop-up appear with information about the query symbol.

2. To insert the rest of the word query by using IntelliSense word completion, press Tab.

3. Finish off the code block to look like the following code. You can practice further with
code snippets by entering cw and then pressing Tab twice to generate the
[Link] statement.

C#

foreach (string str in query)

{
[Link](str);
}

Refactor a name
Nobody gets code right the first time, and one of the things you might have to change is the
name of a variable or method. Let's try out Visual Studio's refactor functionality to rename the
someWords variable to unsortedWords .

1. Place your cursor over the definition of the someWords variable, and choose Rename from
the right-click or context menu, or press F2.

A Rename dialog box appears at the top right of the editor.

 2. Enter the desired name unsortedWords. You'll see that the reference to unsortedWords in
the query assignment statement is also automatically renamed. Before you press Enter,
select the Include comments checkbox in the Rename pop-up box.

3. Press Enter, or choose Apply in the Rename dialog box.

Both occurrences of someWords in your code have been renamed, as well as the text
someWords in your code comment.

Next steps
Learn about projects and solutions

See also
Code snippets
Navigate code
Outlining
Go To Definition and Peek Definition
Refactoring
Use IntelliSense
Introduction to projects and solutions
01/29/2025

In this tutorial, you explore what it means to create a solution and a project in Visual Studio. A
solution is a container to organize one or more related code projects, like a class library project
and a corresponding test project. You create a reference from one project to another in a
solution. This tutorial also describes the properties of a project and some of the files that it can
contain.

As an exercise to understand the concept of a project, you create a solution and project from
scratch. Ordinarily, you'd use Visual Studio project templates to create new projects.

In this tutorial, you learn how to:

＂ Add an item to the project

＂ Add a second project
＂ Add a project reference
＂ Add test code
＂ View Project properties

Prerequisites
If you don't have Visual Studio, go to Visual Studio downloads to install it for free.

Solutions and projects

In Visual Studio, a solution isn't an answer. A solution is simply a container that Visual Studio
uses to organize one or more related projects. When you open a solution, Visual Studio
automatically loads all the projects that the solution contains.

７ Note

Developing apps in Visual Studio doesn't require solutions and projects. You can just open
a folder that contains code and start coding, building, and debugging. For example, a
cloned GitHub repo might not contain Visual Studio projects and solutions. For more
information, see Develop code in Visual Studio without projects or solutions.

Create a solution
Start your exploration by creating an empty solution. After you get to know Visual Studio, you
probably won't create empty solutions often. When you create a new project, Visual Studio
automatically creates a solution for the project unless a solution is already open.

1. Open Visual Studio, and on the start window, select Create a new project.

2. On the Create a new project page, type blank solution into the search box, select the
Blank Solution template, and then select Next.

 Tip

If you have several workloads installed, the Blank Solution template might not
appear at the top of your list of search results. Try scrolling through Other results
based on your search to find the template.

3. On the Configure your new project page, name the solution QuickSolution, and then
select Create.

The QuickSolution solution appears in Solution Explorer on the right side of the Visual
Studio window. You'll use Solution Explorer often to browse the contents of your
projects.

Add a project
Now add your first project to the solution. Start with an empty project, and add the items you
need.

1. In Solution Explorer, right-click Solution 'QuickSolution'. In the context menu, select Add
> New Project.

2. On the Add a new project page, type empty into the search box at the top, and select C#
under All languages.

3. Select the C# Empty Project (.NET Framework) template, and then select Next.

７ Note

Visual Studio uses workload-based installation to install only the components you
need for the type of development you do. If you don't see the Empty Project (.NET
Framework) template, install the .NET desktop development Visual Studio workload.

An easy way to install a new workload when you create a new project is to select the
Install more tools and features link under the text that says Not finding what you're
looking for?. In the Visual Studio Installer, select the .NET desktop development
workload, and then select Modify.

4. On the Configure your new project page, name the project QuickDate, and then select
Create.

The QuickDate project appears under the solution in Solution Explorer. The project
contains a References node and a single file named [Link].

Add an item to the project

Add a code file to your empty project.

1. In Solution Explorer, right-click the QuickDate project. From the context menu, select
Add > New Item.

The Add New Item dialog box opens. Select Show All Templates if dialog opens in
compact view.

2. Expand Visual C# Items, and then select Code. In the middle pane, select the Class item
template. Under Name, type Calendar, and then select Add.
 Visual Studio adds a file named [Link] to the project. The .cs on the end is the file
extension for C# code files. The [Link] file appears in the Solution Explorer visual
project hierarchy, and the file opens in the editor.

3. Replace the contents of the [Link] file with the following code:

C#

using System;

namespace QuickDate
{
internal class Calendar
{
static void Main(string[] args)
{
DateTime now = GetCurrentDate();
[Link]($"Today's date is {now}");
[Link]();
}

internal static DateTime GetCurrentDate()

{
return [Link];
}
}
}

You don't need to understand everything the code is doing yet. Run the app by pressing
Ctrl+F5. The app prints today's date to the console, or standard output, window. Then,
close the console window.

Add a second project

Solutions commonly contain more than one project, and these projects often reference each
other. Some projects in a solution might be class libraries, some might be executable
applications, and some might be unit test projects or websites.

To add a unit test project to your solution, start from a project template so you don't have to
add another code file to the project.

1. In Solution Explorer, right-click Solution 'QuickSolution'. From the context menu, select
Add > New Project.

2. In the Add a new project dialog box, type unit test into the search box at the top, and
then select C# under All languages.
 3. Select the C# Unit Test Project (.NET Framework) project template, and then select Next.

4. On the Configure your new project page, name the project QuickTest, and then select
Create.

Visual Studio adds the QuickTest project to Solution Explorer, and the [Link] file
opens in the editor.

Add a project reference

To use the new unit test project to test your method in the QuickDate project, you need to add
a reference to QuickDate to the QuickTest project. Adding the reference creates a build
dependency between the two projects. When you build the solution, QuickDate builds before
QuickTest.

1. In Solution Explorer, right-click the References node of the QuickTest project. From the
context menu, select Add Reference.

2. In the Reference Manager dialog box, select Projects. In the middle pane, select the
checkbox next to QuickDate, and then select OK.

A reference to the QuickDate project appears under the QuickTest project in Solution
Explorer.
Add test code
1. Now add test code to the C# test code file. Replace the contents of [Link] with the
following code:

C#

using System;
using [Link];

namespace QuickTest
{
[TestClass]
public class UnitTest1
 {
[TestMethod]
public void TestGetCurrentDate()
{
[Link]([Link],
[Link]());
}
}
}

A red squiggle appears under some of the code. You can fix this error by making the test
project a friend assembly to the QuickDate project.

2. In the [Link] file, add the following using statement and InternalsVisibleToAttribute
attribute to the top of the file to resolve the error in the test project.

C#

using [Link];

[assembly: InternalsVisibleTo("QuickTest")]

The [Link] code should look like this screenshot:

Run the unit test

To check that your unit test is working, from the menu bar, choose Test > Run All Tests. The
Test Explorer window opens, and you should see that the TestGetCurrentDate test passes.

 Tip

You can also open Test Explorer by choosing Test > Test Explorer from the menu bar.

Project properties
The line in the [Link] file that contains the InternalsVisibleToAttribute attribute references
the assembly name or file name of the QuickTest project. The assembly name might not always
be the same as the project name. To find the assembly name of a project, use the project
properties. The property pages contain various settings for the project.

1. In Solution Explorer, right-click the QuickTest project and select Properties, or select the
project and press Alt+Enter.

The property pages for the project open to the Application tab. The Assembly name of
the QuickTest project is indeed QuickTest.

If you want, you can change the name here. When you build the test project, the name of
the resulting binary file then changes from [Link] to <NewName>.dll.
 

2. Explore some of the other tabs of the project's property pages, such as Build and Debug.
These tabs are different for different types of projects.

Related content
Create, work with, and delete Visual Studio projects and solutions
Develop code in Visual Studio without projects or solutions
Manage project and solution properties
Manage references in a project
Features of Visual Studio
07/30/2025

This article describes features for experienced developers, or developers who are already
familiar with Visual Studio. For a basic introduction to Visual Studio, see the Visual Studio IDE
overview.

Modular installation
In Visual Studio's modular installer, you choose and install the workloads you want. Workloads
are groups of features that programming languages or platforms need to work. This modular
strategy helps keep the Visual Studio installation footprint smaller, so it installs and updates
faster.

If you haven't already installed Visual Studio, go to the Visual Studio downloads page to
install it for free.

To learn more about setting up Visual Studio on your system, see Install Visual Studio.

Create cloud-enabled Azure apps

Visual Studio has a suite of tools to easily create Microsoft Azure cloud-enabled applications.
You can configure, build, debug, package, and deploy Azure apps and services directly from the
Visual Studio integrated development environment (IDE). To get the Azure tools and project
templates, select the Azure development workload when you install Visual Studio.

） Important

The Cloud Explorer window is retired in Visual Studio 2022. For more information, see
Manage the resources associated with your Azure accounts in Visual Studio Cloud
Explorer.

Use the Azure portal to access Azure resources as necessary. You can continue to use the
Azure node of Server Explorer in previous versions of Visual Studio.
You can use Azure services for your apps by adding Connected Services, such as:

Active Directory connected service, to use Microsoft Entra ID (Microsoft Entra ID)
accounts to connect to web apps
Azure Storage connected service for blob storage, queues, and tables
Key Vault connected service to manage secrets for web apps

The available Connected Services depend on your project type. Add a service by right-clicking
the project in Solution Explorer and choosing Add > Connected Service.

On the Connected Services screen, select the link or the plus sign to Add a service
dependency. On the Add dependency screen, select the service you want to add, and follow
the screens to connect to your Azure subscription and service.

For more information, see Move to the cloud With Visual Studio and Azure .

Create web apps

Visual Studio can help you write apps for the web. You can create web apps by using [Link],
[Link], Python, JavaScript, and TypeScript. Visual Studio supports many web frameworks, such
as Angular, jQuery, and Express.
[Link] Core and .NET Core run on Windows, Mac, and Linux operating systems. [Link]
Core is a major update to MVC, WebAPI, and SignalR. [Link] Core is designed from the
ground up to provide a lean and composable .NET stack for building modern cloud-based web
apps and services.

For more information, see Modern web tooling .

Build cross-platform apps and games

Visual Studio can build apps and games for macOS, Linux, and Windows, and for Android, iOS,
and other mobile devices . With Visual Studio, you can build:

.NET Core apps that run on Windows, macOS, and Linux.

Cross-platform apps for Android, iOS, Mac Catalyst, and Windows in C# by using .NET
MAUI.

2D and 3D games in C# by using Visual Studio Tools for Unity.

Native C++ apps for iOS, Android, and Windows devices. Share common code in iOS,
Android, and Windows libraries by using C++ for cross-platform development.

Connect to databases
Server Explorer helps you browse and manage server instances and assets locally, remotely,
and on Azure, Microsoft 365, [Link], and websites. To open Server Explorer, choose
View > Server Explorer. For more information on using Server Explorer, see Add new
connections.

SQL Server Object Explorer provides a view of your database objects, similar to SQL Server
Management Studio. With SQL Server Object Explorer, you can do light-duty database
administration and design work. Examples include editing table data, comparing schemas, and
executing queries by using contextual menus.

To open SQL Server Object Explorer, select its icon at the top of the Server Explorer window,
or select View > SQL Server Object Explorer from the Visual Studio top menu.
SQL Server Data Tools (SSDT) is a powerful development environment for SQL Server, Azure
SQL Database, and Azure SQL Data Warehouse. With SSDT, you can build, debug, maintain,
and refactor databases. You can work with a database project, or directly with a connected
database instance on- or off-premises. To get SSDT, use the Visual Studio Installer to install the
Data storage and processing workload.

Debug, test, and improve your code

When you write code, you should run it and test it for bugs and performance. With Visual
Studio's debugging system, you can debug code running in your local project, on a remote
device, or on a device emulator. Step through code one statement at a time, and inspect
variables as you go. Or set breakpoints that are only hit when a specified condition is true. You
can manage debug options in the code editor itself, so you don't have to leave your code.
For more information about debugging in Visual Studio, see First look at the debugger.

To improve app performance, check out the Visual Studio profiling feature.

Visual Studio offers testing options like unit testing, Live Unit Testing, IntelliTest, and load and
performance testing. Visual Studio also has advanced code analysis capabilities to find design,
security, and other flaws.

Deploy your finished application

Visual Studio has tools to deploy your app to users or customers through the Microsoft Store, a
SharePoint site, or InstallShield or Windows Installer technologies. You can access all these
options through the Visual Studio IDE. For more information, see Deploy applications, services,
and components.

Manage your source code and collaborate with

others
In Visual Studio, you can manage your source code in Git repos hosted by any provider,
including GitHub. You can also browse for an Azure DevOps Server to connect to, too.

For full details, see the Git experience in Visual Studio page. And, for a step-by-step tutorial on
how to connect to a Git or Azure DevOps repository by using Visual Studio, see the Open a
project from a repo page.

 Tip

We continue to build out the Git feature set and iterate on it based on your feedback. For
more info about a recent feature update along with a link to survey where you can share
your feedback on it, see the Multi-repo support in Visual Studio blog post.

Optimize the Visual Studio experience on

Microsoft Dev Box

７ Note
 This feature is currently in public preview. This information relates to a feature that may be
substantially modified before it's released. Microsoft makes no warranties, expressed or
implied, with respect to the information provided here.

With Visual Studio 17.7 Preview 3 , you can pregenerate Visual Studio caches and include
them in your dev box image. As a result, Visual Studio will load your solution and enable key
IDE features faster on your dev box. You can also improve the Git performance on large
repositories by enabling Git commit-graph optimizations in dev box images.

Extend Visual Studio

If Visual Studio doesn't have the exact functionality you need, you can add it. Personalize the
IDE based on your workflow and style, add support for external tools that aren't integrated
with Visual Studio, and modify existing functionality to increase your productivity. For the latest
version of the Visual Studio Extensibility Tools (VSSDK), see Visual Studio SDK.

You can use the .NET Compiler Platform Roslyn to write your own code analyzers and code
generators. Find everything you need at Roslyn .

Find existing extensions for Visual Studio created by Microsoft developers and the Visual
Studio development community.

To learn more about extending Visual Studio, see Extend Visual Studio IDE .

Related content
Visual Studio SDK
Roslyn
Visual Studio IDE overview
What's new in Visual Studio 2017
What's new in Visual Studio 2019
What's new in Visual Studio 2022
Tutorial: Create a simple C# console app
in Visual Studio (part 1 of 2)
Article • 01/28/2025

In this tutorial, you use Visual Studio to create and run a C# console app, and explore
some features of the Visual Studio integrated development environment (IDE). This
tutorial is part 1 of a two-part tutorial series.

In this tutorial, you complete the following tasks:

＂ Create a Visual Studio project.

＂ Create a C# console app.
＂ Debug your app.
＂ Close your app.
＂ Inspect your complete code.

In part 2 of this tutorial, you extend this app to add more projects, learn debugging
tricks, and reference non-Microsoft packages.

Prerequisites
You must have Visual Studio installed.

If you don't have Visual Studio, go to Visual Studio downloads to install it for free.

Create a project
To start, create a C# application project. The project type comes with all the template
files you need.

1. Open Visual Studio, and select Create a new project in the start window.
2. In the Create a new project window, select C# from the language dropdown list.
Choose Windows from the platform list and Console from the project types list.

After you apply the language, platform, and project type filters, choose the
Console App template, and then select Next.

７ Note

If you don't see the Console App template, select Install more tools and
features.

In the Visual Studio Installer, select the .NET desktop development workload.

Select Modify in the Visual Studio Installer. You might be prompted to save
your work. Select Continue to install the workload.

Return to step 2 in this Create a project procedure.

 3. In the Configure your new project window, type or enter Calculator in the Project
name box, and then select Next.

4. In the Additional information window, select .NET 8.0 for the Target Framework
field. Then, select Create.

Visual Studio opens your new project, which includes default Hello World code. To view
it in the editor, select the code file [Link] in the Solution Explorer window, which is
typically on the right-hand side of Visual Studio.

The single code statement calls the WriteLine method to display the literal string Hello,
World! in the console window. If you press F5, you can run the default program in
Debug mode. After the application runs in the debugger, the console window stays
open. Press any key to close the console window.
 ７ Note

Starting with .NET 6, new projects using the console template generate different
code than previous versions. To learn more, see New C# templates generate top-
level statements.

Create the app

In this section, you complete the following tasks:

Explore some basic integer math in C#.

Add code to create a basic calculator app.
Debug the app to find and fix errors.
Refine the code to make it more efficient.

Explore integer math

Start with some basic integer math in C#.

1. In Solution Explorer, in the right pane, select [Link] to display the file in the
code editor.

2. In the code editor, replace the default Hello World code that says
[Link]("Hello World!"); .
 Replace the line with the following code:

C#

int a = 42;
int b = 119;
int c = a + b;
[Link](c);
[Link]();

If you enter the code, the Visual Studio IntelliSense feature offers you the option to
autocomplete the entry.

3. To build and run your app, press F5, or select the green arrow next to the name
Calculator in the top toolbar.

A console window opens that shows the sum of 42 + 119, which is 161.

4. Close the console window.

5. (Optional) You can change the operator to change the result. For example, you can
change the + operator in the int c = a + b; line of code to - for subtraction, *
 for multiplication, or / for division. When you run the app, the result changes
accordingly.

Add code to create a calculator

Continue by adding a more complex set of calculator code to your project.

1. In the code editor, replace all the code in [Link] with the following new code:

C#

// Declare variables and then initialize to zero.

int num1 = 0; int num2 = 0;

// Display title as the C# console calculator app.

[Link]("Console Calculator in C#\r");
[Link]("------------------------\n");

// Ask the user to type the first number.

[Link]("Type a number, and then press Enter");
num1 = Convert.ToInt32([Link]());

// Ask the user to type the second number.

[Link]("Type another number, and then press Enter");
num2 = Convert.ToInt32([Link]());

// Ask the user to choose an option.

[Link]("Choose an option from the following list:");
[Link]("\ta - Add");
[Link]("\ts - Subtract");
[Link]("\tm - Multiply");
[Link]("\td - Divide");
[Link]("Your option? ");

// Use a switch statement to do the math.

switch ([Link]())
{
case "a":
[Link]($"Your result: {num1} + {num2} = " +
(num1 + num2));
break;
case "s":
[Link]($"Your result: {num1} - {num2} = " +
(num1 - num2));
break;
case "m":
[Link]($"Your result: {num1} * {num2} = " +
(num1 * num2));
break;
case "d":
[Link]($"Your result: {num1} / {num2} = " +
(num1 / num2));
 break;
}
// Wait for the user to respond before closing.
[Link]("Press any key to close the Calculator console
app...");
[Link]();

2. Select the Calculator button or press F5 to run your app.

A console window opens.

3. In the console window, follow the prompts to add the numbers 42 and 119
together.

Your app should look similar to the following screenshot:

Add decimal functionality

Now, tweak the code to add more functionality.

The current calculator app only accepts and returns whole numbers. For example, if you
run the app and divide the number 42 by the number 119, your result is zero, which isn't
exact.
To fix the code to improve precision by handling decimals:

1. From [Link] in the Visual Studio editor, press Ctrl+H to open the Find and
Replace control.

2. Type int in the control, and type float in the Replace field.

3. Select the icons for Match case and Match whole word in the control, or press
Alt+C and Alt+W.

4. Select the Replace all icon or press Alt+A to run the search and replace.

5. Run your calculator app again, and divide the number 42 by the number 119.

The app now returns a decimal number instead of zero.

 Now the app can produce decimal results. Make a few more tweaks to the code so
the app can calculate decimals too.

6. Use the Find and Replace control to change each instance of the float variable to
double , and to change each instance of the Convert.ToInt32 method to

[Link] .

7. Run your calculator app, and divide the number 42.5 by the number 119.75.

The app now accepts decimal values, and returns a longer decimal numeral as its
result.

In the Revise the code section, you reduce the number of decimal places in the
results.

Debug the app

You improved your basic calculator app, but your app doesn't yet handle exceptions,
such as user input errors. For example, if users try to divide by zero, or enter an
unexpected character, the app might stop working, return an error, or return an
unexpected non-numeric result.

Let's walk through a few common user input errors, locate them in the debugger if they
appear there, and fix them in the code.

 Tip

For more information about the debugger and how it works, see First look at the
Visual Studio debugger.

Fix the divide by zero error

If you try to divide a number by zero, the console app might freeze, and then shows you
what's wrong in the code editor.

７ Note

Sometimes the app doesn't freeze, and the debugger doesn't show a divide-by-
zero error. Instead, the app might return an unexpected non-numeric result, such
as an infinity symbol. The following code fix still applies.

Let's change the code to handle this error. In [Link], replace the code for case "d":
with the following code:

C#

// Ask the user to enter a non-zero divisor until they do so.

while (num2 == 0)
 {
[Link]("Enter a non-zero divisor: ");
num2 = [Link]([Link]());
}
[Link]($"Your result: {num1} / {num2} = " + (num1
/ num2));
break;

After you replace the code, the section with the switch statement should look similar to
the following screenshot:

Now, when you divide any number by zero, the app asks for another number, and keeps
asking until you provide a nonzero number.
Fix the format error
If you enter an alphabetic character when the app expects a numeric character, the app
freezes. Visual Studio shows you what's wrong in the code editor.

To prevent this exception, you can refactor the code you previously entered.

Revise the code

Rather than rely on the program class to handle all the code, you can divide your app
into two classes: Calculator and Program .

The Calculator class handles the bulk of the calculation work, and the Program class
handles the user interface and error-handling work.

Let's get started.

1. In [Link], delete everything and add the following new Calculator class:

C#

class Calculator
{
public static double DoOperation(double num1, double num2, string
op)
{
double result = [Link]; // Default value is "not-a-number"
if an operation, such as division, could result in an error.

// Use a switch statement to do the math.

switch (op)
{
case "a":
result = num1 + num2;
break;
case "s":
result = num1 - num2;
break;
case "m":
result = num1 * num2;
break;
case "d":
// Ask the user to enter a non-zero divisor.
if (num2 != 0)
{
result = num1 / num2;
}
break;
// Return text for an incorrect option entry.
default:
break;
}
return result;
}
}

2. Also add a new Program class, as follows:

C#

class Program
{
static void Main(string[] args)
{
bool endApp = false;
// Display title as the C# console calculator app.
[Link]("Console Calculator in C#\r");
[Link]("------------------------\n");
 while (!endApp)
{
// Declare variables and set to empty.
// Use Nullable types (with ?) to match type of
[Link]
string? numInput1 = "";
string? numInput2 = "";
double result = 0;

// Ask the user to type the first number.

[Link]("Type a number, and then press Enter: ");
numInput1 = [Link]();

double cleanNum1 = 0;
while ()
{
[Link]("This is not valid input. Please enter a
numeric value: ");
numInput1 = [Link]();
}

// Ask the user to type the second number.

[Link]("Type another number, and then press Enter:
");
numInput2 = [Link]();

double cleanNum2 = 0;
while ()
{
[Link]("This is not valid input. Please enter a
numeric value: ");
numInput2 = [Link]();
}

// Ask the user to choose an operator.

[Link]("Choose an operator from the following
list:");
[Link]("\ta - Add");
[Link]("\ts - Subtract");
[Link]("\tm - Multiply");
[Link]("\td - Divide");
[Link]("Your option? ");

string? op = [Link]();

// Validate input is not null, and matches the pattern

if (op == null || ! [Link](op, "[a|s|m|d]"))
{
[Link]("Error: Unrecognized input.");
}
else
{
try
{
 result = [Link](cleanNum1, cleanNum2,
op);
if ([Link](result))
{
[Link]("This operation will result in a
mathematical error.\n");
}
else [Link]("Your result: {0:0.##}\n",
result);
}
catch (Exception e)
{
[Link]("Oh no! An exception occurred
trying to do the math.\n - Details: " + [Link]);
}
}
[Link]("------------------------\n");

// Wait for the user to respond before closing.

[Link]("Press 'n' and Enter to close the app, or
press any other key and Enter to continue: ");
if ([Link]() == "n") endApp = true;

[Link]("\n"); // Friendly linespacing.

}
return;
}
}

７ Note

It's best to use nullable types (with the ? symbol) for the input strings, since
[Link] returns a nullable reference type.

3. Select the Calculator button or press F5 to run your app.

4. Follow the prompts and divide the number 42 by the number 119. Your results
should look similar to the following screenshot:
 You can now run more calculations until you choose to close the console app.
There are also fewer decimal places in the results. And if you enter an incorrect
character, you get an appropriate error response.

Close the app

1. If you haven't already done so, close the Calculator app.

2. Close the Output pane in Visual Studio.

3. In Visual Studio, press Ctrl+S to save your app.

Add Git source control

Now that you have an application, you might want to add it to a Git repository. Visual
Studio makes that process easy with Git tools you can use directly from the IDE.

 Tip

Git is the most widely used modern version control system. Whether you're a
professional developer or you're learning how to code, Git can be very useful. If
you're new to Git, the [Link] website is a good place to start. You
can find cheat sheets, a popular online book, and Git Basics videos.

To associate your code with Git, start by creating a new Git repository where your code
is located:

1. In the status bar at the bottom-right of Visual Studio, select Add to Source
Control, and then select Git.

2. In the Create a Git repository dialog box, sign in to GitHub:

 The repository name autopopulates based on your folder location. Your new
repository is private by default, which means you're the only one who can access it.

 Tip

Whether your repository is public or private, it's best to have a remote backup
of your code stored securely on GitHub. Even if you aren't working with a
team, a remote repository makes your code available to you from any
computer.

3. Select Create and Push. After you create your repository, you see status details in
the status bar:

Use Git actions in Visual Studio

Here's a brief summary of Git actions available in the Visual Studio status bar:

The Up/Down arrows show how many outgoing/incoming commits are in your
current branch. You can use this icon to pull any incoming commits or push any
outgoing commits.

To view a specific commit, select the Up/Down arrow, and then select View
Outgoing/Incoming.

The Pencil shows the number of uncommitted changes to your code. You can
select this icon to view those changes in the Git Changes window.

The Git menu provides tools for repository actions on your files. You can use git fetch,
pull, push, and sync for version control in Visual Studio.

For more information about how to use Git with your app, see About Git in Visual
Studio.

Review: Code complete

In this tutorial, you made many changes to the Calculator app. The app now handles
computing resources more efficiently, and handles most user input errors.
Here's the complete code, all in one place:

C#

class Calculator
{
public static double DoOperation(double num1, double num2, string op)
{
double result = [Link]; // Default value is "not-a-number" which
we use if an operation, such as division, could result in an error.

// Use a switch statement to do the math.

switch (op)
{
case "a":
result = num1 + num2;
break;
case "s":
result = num1 - num2;
break;
case "m":
result = num1 * num2;
break;
case "d":
// Ask the user to enter a non-zero divisor.
if (num2 != 0)
{
result = num1 / num2;
}
break;
// Return text for an incorrect option entry.
default:
break;
}
return result;
}
}

class Program
{
static void Main(string[] args)
{
bool endApp = false;
// Display title as the C# console calculator app.
[Link]("Console Calculator in C#\r");
[Link]("------------------------\n");

while (!endApp)
{
// Declare variables and set to empty.
// Use Nullable types (with ?) to match type of
[Link]
string? numInput1 = "";
 string? numInput2 = "";
double result = 0;

// Ask the user to type the first number.

[Link]("Type a number, and then press Enter: ");
numInput1 = [Link]();

double cleanNum1 = 0;
while ()
{
[Link]("This is not valid input. Please enter a
numeric value: ");
numInput1 = [Link]();
}

// Ask the user to type the second number.

[Link]("Type another number, and then press Enter: ");
numInput2 = [Link]();

double cleanNum2 = 0;
while ()
{
[Link]("This is not valid input. Please enter a
numeric value: ");
numInput2 = [Link]();
}

// Ask the user to choose an operator.

[Link]("Choose an operator from the following
list:");
[Link]("\ta - Add");
[Link]("\ts - Subtract");
[Link]("\tm - Multiply");
[Link]("\td - Divide");
[Link]("Your option? ");

string? op = [Link]();

// Validate input is not null, and matches the pattern

if (op == null || ! [Link](op, "[a|s|m|d]"))
{
[Link]("Error: Unrecognized input.");
}
else
{
try
{
result = [Link](cleanNum1, cleanNum2,
op);
if ([Link](result))
{
[Link]("This operation will result in a
mathematical error.\n");
}
else [Link]("Your result: {0:0.##}\n",
 result);
}
catch (Exception e)
{
[Link]("Oh no! An exception occurred trying
to do the math.\n - Details: " + [Link]);
}
}
[Link]("------------------------\n");

// Wait for the user to respond before closing.

[Link]("Press 'n' and Enter to close the app, or press
any other key and Enter to continue: ");
if ([Link]() == "n") endApp = true;

[Link]("\n"); // Friendly linespacing.

}
return;
}
}

Next step
Continue with the second part of this tutorial:

Part 2: Extend and debug your C# console app

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Tutorial: Extend C# console app and
debug in Visual Studio (part 2 of 2)
Article • 10/18/2024

In part 2 of this tutorial series, you dive a little deeper into the Visual Studio build and
debug features you need for daily development. These features include managing
multiple projects, debugging, and referencing third-party packages. You run the C#
console app you created in Part 1 of this tutorial, and explore some features of the
Visual Studio integrated development environment (IDE). This tutorial is part 2 of a two-
part tutorial series.

In this tutorial, you complete the following tasks:

＂ Add a second project.

＂ Reference libraries and add packages.
＂ Debug your code.
＂ Inspect your completed code.

Prerequisites
To work through this article, you can use either of these calculator apps:

The calculator console app from part 1 of this tutorial.

The C# calculator app in the vs-tutorial-samples repo . To get started, open the
app from the repo.

Add another project

Real-world code involves projects working together in a solution. You can add a class
library project to your calculator app that provides some calculator functions.

In Visual Studio, you use the menu command File > Add > New Project to add a new
project. You can also right-click on the solution in Solution Explorer to add a project
from the context menu.

1. In Solution Explorer, right-click the solution node and choose Add > New Project.

2. In the Add a new project window, type class library in the Search box. Choose the
C# Class library project template, and then select Next.
3. On the Configure your new project screen, type the project name
CalculatorLibrary, and then select Next.

4. On the Additional information screen, .NET 8.0 is selected. Select Create.

Visual Studio creates the new project and adds it to the solution.

5. Rename the [Link] file to [Link]. To rename the file, you can right-
click the name in Solution Explorer and choose Rename, select the name and
 press F2, or select the name and select again to type.

A message might ask whether you want to rename all references to Class1 in the
file. It doesn't matter how you answer, because you'll replace the code in a future
step.

6. Now add a project reference, so the first project can use APIs that the new class
library exposes. Right-click the Dependencies node in the Calculator project and
choose Add Project Reference.

The Reference Manager dialog box appears. In this dialog box, you can add
references to other projects, assemblies, and COM DLLs that your projects need.

7. In the Reference Manager dialog box, select the checkbox for the
CalculatorLibrary project, and then select OK.
 The project reference appears under a Projects node in Solution Explorer.

8. In [Link], select the Calculator class and all its code, and press Ctrl+X to cut
it. Then, in [Link], paste the code into the CalculatorLibrary
namespace.
 Also add public before the Calculator class to expose it outside the library.

[Link] should now resemble the following code:

C#

// [Link]
namespace CalculatorLibrary
{
public class Calculator
{
public static double DoOperation(double num1, double num2,
string op)
{
double result = [Link]; // Default value is "not-a-
number" if an operation, such as division, could result in an error.

// Use a switch statement to do the math.

switch (op)
{
case "a":
result = num1 + num2;
break;
case "s":
result = num1 - num2;
break;
case "m":
result = num1 * num2;
break;
case "d":
// Ask the user to enter a non-zero divisor.
if (num2 != 0)
{
result = num1 / num2;
}
break;
// Return text for an incorrect option entry.
default:
break;
}
return result;
}
}
}

9. [Link] also has a reference, but an error says the [Link] call
doesn't resolve. The error is because CalculatorLibrary is in a different
namespace. For a fully qualified reference, you could add the CalculatorLibrary
namespace to the [Link] call in [Link]:

C#
 // [Link]
result = [Link](cleanNum1, cleanNum2,
op);

Or, you could try adding a using directive to the beginning of the [Link] file:

C#

// [Link]
using CalculatorLibrary;

Adding the using directive should let you remove the CalculatorLibrary
namespace from the call site.

If your [Link] code is in the Calculator namespace, rename the namespace

from Calculator to CalculatorProgram to remove ambiguity between class name
and namespace name.

Reference .NET libraries: Write to a log

You can use the .NET Trace class to add a log of all operations, and write it to a text file.
The Trace class is also useful for basic print debugging techniques. The Trace class is in
[Link] , and uses [Link] classes like StreamWriter .

1. Start by adding the using directives at the top of [Link]:

C#

// [Link]
using [Link];

2. This usage of the Trace class must hold onto a reference for the class, which it
associates with a filestream. That requirement means the calculator works better as
an object, so add a constructor at the beginning of the Calculator class in
[Link].

Also remove the static keyword to change the static DoOperation method into a
member method.

C#

// [Link]
public Calculator()
 {
StreamWriter logFile = [Link]("[Link]");
[Link](new TextWriterTraceListener(logFile));
[Link] = true;
[Link]("Starting Calculator Log");
[Link]([Link]("Started {0}",
[Link]()));
}

public double DoOperation(double num1, double num2, string op)

{

3. Add log output to each calculation. DoOperation should now look like the
following code:

C#

// [Link]
public double DoOperation(double num1, double num2, string op)
{
double result = [Link]; // Default value is "not-a-number" if
an operation, such as division, could result in an error.

// Use a switch statement to do the math.

switch (op)
{
case "a":
result = num1 + num2;
[Link]([Link]("{0} + {1} = {2}", num1,
num2, result));
break;
case "s":
result = num1 - num2;
[Link]([Link]("{0} - {1} = {2}", num1,
num2, result));
break;
case "m":
result = num1 * num2;
[Link]([Link]("{0} * {1} = {2}", num1,
num2, result));
break;
case "d":
// Ask the user to enter a non-zero divisor.
if (num2 != 0)
{
result = num1 / num2;
[Link]([Link]("{0} / {1} = {2}", num1,
num2, result));
}
break;
// Return text for an incorrect option entry.
default:
break;
 }
return result;
}

4. Back in [Link], a red squiggly underline now flags the static call. To fix the
error, create a calculator variable by adding the following code line just before
the while (!endApp) loop:

C#

// [Link]
Calculator calculator = new Calculator();

Also modify the DoOperation call site to reference the object named calculator in
lowercase. The code is now a member invocation, rather than a call to a static
method.

C#

// [Link]
result = [Link](cleanNum1, cleanNum2, op);

5. Run the app again. When you're done, right-click the Calculator project node and
choose Open Folder in File Explorer.

6. In File Explorer, navigate to the output folder under bin/Debug/, and open the
[Link] file. The output should look something like this:

Output

Starting Calculator Log

Started 7/9/2020 [Link] PM
1 + 2 = 3
3 * 3 = 9

At this point, [Link] should resemble this code:

C#

// [Link]
using [Link];

namespace CalculatorLibrary
{
public class Calculator
{
 public Calculator()
{
StreamWriter logFile = [Link]("[Link]");
[Link](new TextWriterTraceListener(logFile));
[Link] = true;
[Link]("Starting Calculator Log");
[Link]([Link]("Started {0}",
[Link]()));
}

public double DoOperation(double num1, double num2, string op)

{
double result = [Link]; // Default value is "not-a-number"
if an operation, such as division, could result in an error.

// Use a switch statement to do the math.

switch (op)
{
case "a":
result = num1 + num2;
[Link]([Link]("{0} + {1} = {2}", num1,
num2, result));
break;
case "s":
result = num1 - num2;
[Link]([Link]("{0} - {1} = {2}", num1,
num2, result));
break;
case "m":
result = num1 * num2;
[Link]([Link]("{0} * {1} = {2}", num1,
num2, result));
break;
case "d":
// Ask the user to enter a non-zero divisor.
if (num2 != 0)
{
result = num1 / num2;
[Link]([Link]("{0} / {1} = {2}",
num1, num2, result));
}
break;
// Return text for an incorrect option entry.
default:
break;
}
return result;
}
}
}

[Link] should look like the following code:

C#

// [Link]
using CalculatorLibrary;

namespace CalculatorProgram
{

class Program
{
static void Main(string[] args)
{
bool endApp = false;
// Display title as the C# console calculator app.
[Link]("Console Calculator in C#\r");
[Link]("------------------------\n");

Calculator calculator = new Calculator();

while (!endApp)
{
// Declare variables and set to empty.
// Use Nullable types (with ?) to match type of
[Link]
string? numInput1 = "";
string? numInput2 = "";
double result = 0;

// Ask the user to type the first number.

[Link]("Type a number, and then press Enter: ");
numInput1 = [Link]();

double cleanNum1 = 0;
while ()
{
[Link]("This is not valid input. Please enter an
integer value: ");
numInput1 = [Link]();
}

// Ask the user to type the second number.

[Link]("Type another number, and then press Enter:
");
numInput2 = [Link]();

double cleanNum2 = 0;
while ()
{
[Link]("This is not valid input. Please enter an
integer value: ");
numInput2 = [Link]();
}

// Ask the user to choose an operator.

[Link]("Choose an operator from the following
 list:");
[Link]("\ta - Add");
[Link]("\ts - Subtract");
[Link]("\tm - Multiply");
[Link]("\td - Divide");
[Link]("Your option? ");

string? op = [Link]();

// Validate input is not null, and matches the pattern

if (op == null || ! [Link](op, "[a|s|m|d]"))
{
[Link]("Error: Unrecognized input.");
}
else
{
try
{
result = [Link](cleanNum1, cleanNum2,
op);
if ([Link](result))
{
[Link]("This operation will result in
a mathematical error.\n");
}
else [Link]("Your result: {0:0.##}\n",
result);
}
catch (Exception e)
{
[Link]("Oh no! An exception occurred
trying to do the math.\n - Details: " + [Link]);
}
}
[Link]("------------------------\n");

// Wait for the user to respond before closing.

[Link]("Press 'n' and Enter to close the app, or
press any other key and Enter to continue: ");
if ([Link]() == "n") endApp = true;

[Link]("\n"); // Friendly linespacing.

}
return;
}
}
}

Add a NuGet Package: Write to a JSON file

To output operations in JSON, a popular and portable format for storing object data,
you can reference the [Link] NuGet package. NuGet packages are the primary
distribution method for .NET class libraries.

1. In Solution Explorer, right-click the Dependencies node for the CalculatorLibrary

project, and choose Manage NuGet Packages.

The NuGet Package Manager opens.

2. Search for and select the [Link] package, and select Install.
 If you're prompted whether to accept changes, select OK.

Visual Studio downloads the package and adds it to the project. A new entry
appears in a Packages node in Solution Explorer.

Add a using directive for [Link] at the beginning of [Link].

C#

// [Link]
using [Link];

3. Create the JsonWriter member object, and replace the Calculator constructor
with the following code:

C#

// [Link]
JsonWriter writer;

public Calculator()
{
StreamWriter logFile = [Link]("[Link]");
[Link] = true;
writer = new JsonTextWriter(logFile);
[Link] = [Link];
 [Link]();
[Link]("Operations");
[Link]();
}

4. Modify the DoOperation method to add the JSON writer code:

C#

// [Link]
public double DoOperation(double num1, double num2, string op)
{
double result = [Link]; // Default value is "not-a-number"
if an operation, such as division, could result in an error.
[Link]();
[Link]("Operand1");
[Link](num1);
[Link]("Operand2");
[Link](num2);
[Link]("Operation");
// Use a switch statement to do the math.
switch (op)
{
case "a":
result = num1 + num2;
[Link]("Add");
break;
case "s":
result = num1 - num2;
[Link]("Subtract");
break;
case "m":
result = num1 * num2;
[Link]("Multiply");
break;
case "d":
// Ask the user to enter a non-zero divisor.
if (num2 != 0)
{
result = num1 / num2;
}
[Link]("Divide");
break;
// Return text for an incorrect option entry.
default:
break;
}
[Link]("Result");
[Link](result);
[Link]();
 return result;
}

5. Add a method to finish the JSON syntax once the user is done entering operation
data.

C#

// [Link]
public void Finish()
{
[Link]();
[Link]();
[Link]();
}

6. At the end of [Link], before the return; , add a call to Finish :

C#

// [Link]
// Add call to close the JSON writer before return
[Link]();
return;
}

7. Build and run the app, and after you're done entering a few operations, close the
app by entering the n command.

8. Open the [Link] file in File Explorer. You should see something like the
following content:

JSON

{
"Operations": [
{
"Operand1": 2.0,
"Operand2": 3.0,
"Operation": "Add",
"Result": 5.0
},
{
"Operand1": 3.0,
"Operand2": 4.0,
"Operation": "Multiply",
"Result": 12.0
}
 ]
}

Debug: Set and hit a breakpoint

The Visual Studio debugger is a powerful tool. The debugger can step through your
code to find the exact point where there's a programming mistake. You can then
understand what corrections you need to make, and make temporary changes so you
can continue running your app.

1. In [Link], click in the gutter to the left of the following code line. You can also
click in the line and select F9, or right-click the line and select Breakpoint > Insert
Breakpoint.

C#

// [Link]
result = [Link](cleanNum1, cleanNum2, op);

The red dot that appears indicates a breakpoint. You can use breakpoints to pause
your app and inspect code. You can set a breakpoint on any executable line of
code.

2. Build and run the app. Enter the following values for the calculation:

For the first number, enter 8.

For the second number, enter 0.
For the operator, let's have some fun. Enter d.

The app suspends where you created the breakpoint, which is indicated by the
yellow pointer on the left and the highlighted code. The highlighted code hasn't
yet executed.
 Now, with the app suspended, you can inspect your application state.

Debug: View variables

1. In the highlighted code, hover over variables such as cleanNum1 and op . The
current values for these variables, 8 and d respectively, appear in DataTips.

When debugging, checking to see whether variables hold the values you expect is
often critical to fixing issues.

2. In the lower pane, look at the Locals window. If it's closed, select Debug >
Windows > Locals to open it.

The Locals window shows each variable that's currently in scope, along with its
value and type.

3. Look at the Autos window.

The Autos window is similar to the Locals window, but shows the variables
immediately preceding and following the current line of code where your app is
paused.
 ７ Note

If you don't see the Autos window, select Debug > Windows > Autos to open
it.

Next, execute code in the debugger one statement at a time, which is called stepping.

Debug: Step through code

1. Press F11, or select Debug > Step Into.

Using the Step Into command, the app executes the current statement and
advances to the next executable statement, usually the next line of code. The
yellow pointer on the left always indicates the current statement.

You just stepped into the DoOperation method in the Calculator class.

2. To get a hierarchical look at your program flow, look at the Call Stack window. If
it's closed, select Debug > Windows > Call Stack to open it.

This view shows the current [Link] method, indicated by the

yellow pointer. The second row shows the function that called the method, from
the Main method in [Link].

The Call Stack window shows the order in which methods and functions are
getting called. This window also provides access to many debugger features, such
as Go to Source Code, from its shortcut menu.

3. Press F10, or select Debug > Step Over, several times until the app pauses on the
switch statement.

C#
 // [Link]
switch (op)
{

The Step Over command is similar to the Step Into command, except that if the
current statement calls a function, the debugger runs the code in the function, and
doesn't suspend execution until the function returns. Step Over is faster than Step
Into if you're not interested in a particular function.

4. Press F10 one more time, so that the app pauses on the following line of code.

C#

// [Link]
if (num2 != 0)
{

This code checks for a divide-by-zero case. If the app continues, it throws a general
exception (an error), but you might want to try something else, like viewing the
actual returned value in the console. One option is to use a debugger feature
called edit-and-continue to make changes to the code and then continue
debugging. However, there's a different trick to temporarily modify the execution
flow.

Debug: Test a temporary change

1. Select the yellow pointer, currently paused on the if (num2 != 0) statement, and
drag it to the following statement:

C#

// [Link]
result = num1 / num2;

Dragging the pointer here causes the app to completely skip the if statement, so
you can see what happens when you divide by zero.

2. Press F10 to execute the line of code.

3. If you hover over the result variable, it shows a value of Infinity. In C#, Infinity is
the result when you divide by zero.

4. Press F5, or select Debug > Continue Debugging.

 The infinity symbol appears in the console as the result of the math operation.

5. Close the app properly by entering the n command.

Code complete
Here's the complete code for the [Link] file, after you complete all the
steps:

C#

// [Link]
using [Link];

namespace CalculatorLibrary
{
public class Calculator
{

JsonWriter writer;

public Calculator()
{
StreamWriter logFile = [Link]("[Link]");
[Link] = true;
writer = new JsonTextWriter(logFile);
[Link] = [Link];
[Link]();
[Link]("Operations");
[Link]();
}

public double DoOperation(double num1, double num2, string op)

{
double result = [Link]; // Default value is "not-a-number"
if an operation, such as division, could result in an error.
[Link]();
[Link]("Operand1");
[Link](num1);
[Link]("Operand2");
[Link](num2);
[Link]("Operation");
// Use a switch statement to do the math.
switch (op)
{
case "a":
result = num1 + num2;
[Link]("Add");
break;
case "s":
result = num1 - num2;
[Link]("Subtract");
 break;
case "m":
result = num1 * num2;
[Link]("Multiply");
break;
case "d":
// Ask the user to enter a non-zero divisor.
if (num2 != 0)
{
result = num1 / num2;
}
[Link]("Divide");
break;
// Return text for an incorrect option entry.
default:
break;
}
[Link]("Result");
[Link](result);
[Link]();

return result;
}

public void Finish()

{
[Link]();
[Link]();
[Link]();
}
}
}

And here's the code for [Link]:

C#

// [Link]
using CalculatorLibrary;

namespace CalculatorProgram
{

class Program
{
static void Main(string[] args)
{
bool endApp = false;
// Display title as the C# console calculator app.
[Link]("Console Calculator in C#\r");
[Link]("------------------------\n");

Calculator calculator = new Calculator();

 while (!endApp)
{
// Declare variables and set to empty.
// Use Nullable types (with ?) to match type of
[Link]
string? numInput1 = "";
string? numInput2 = "";
double result = 0;

// Ask the user to type the first number.

[Link]("Type a number, and then press Enter: ");
numInput1 = [Link]();

double cleanNum1 = 0;
while ()
{
[Link]("This is not valid input. Please enter an
integer value: ");
numInput1 = [Link]();
}

// Ask the user to type the second number.

[Link]("Type another number, and then press Enter:
");
numInput2 = [Link]();

double cleanNum2 = 0;
while ()
{
[Link]("This is not valid input. Please enter an
integer value: ");
numInput2 = [Link]();
}

// Ask the user to choose an operator.

[Link]("Choose an operator from the following
list:");
[Link]("\ta - Add");
[Link]("\ts - Subtract");
[Link]("\tm - Multiply");
[Link]("\td - Divide");
[Link]("Your option? ");

string? op = [Link]();

// Validate input is not null, and matches the pattern

if (op == null || ! [Link](op, "[a|s|m|d]"))
{
[Link]("Error: Unrecognized input.");
}
else
{
try
{
result = [Link](cleanNum1, cleanNum2,
 op);
if ([Link](result))
{
[Link]("This operation will result in
a mathematical error.\n");
}
else [Link]("Your result: {0:0.##}\n",
result);
}
catch (Exception e)
{
[Link]("Oh no! An exception occurred
trying to do the math.\n - Details: " + [Link]);
}
}
[Link]("------------------------\n");

// Wait for the user to respond before closing.

[Link]("Press 'n' and Enter to close the app, or
press any other key and Enter to continue: ");
if ([Link]() == "n") endApp = true;

[Link]("\n"); // Friendly linespacing.

}
[Link]();
return;
}
}
}

Next steps
Congratulations on completing this tutorial! To learn more, continue with the following
content:

Continue with more C# tutorials

Quickstart: Create an [Link] Core web app
Learn to debug C# code in Visual Studio
Walk through how to create and run unit tests
Run a C# program
Learn about C# IntelliSense
Continue with the Visual Studio IDE overview
Logging and tracing

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Tutorial: Get started with C# and
[Link] Core in Visual Studio
Article • 10/17/2024

In this tutorial for C# development with [Link] Core, you create a C# [Link] Core
web app in Visual Studio.

This tutorial shows you how to:

＂ Create a Visual Studio project

＂ Create a C# [Link] Core web app
＂ Make changes to the web app
＂ Explore IDE features
＂ Run the web app

Prerequisites
To complete this tutorial, you need:

Visual Studio installed. Visit the Visual Studio downloads page for a free version.
For more information about upgrading to the latest Visual Studio release, see
Visual Studio updates.
The [Link] and web development workload installed. To verify or install this
workload in Visual Studio, select Tools > Get Tools and Features. For more
information, see Change workloads or individual components.

Create a project
First, you create an [Link] Core project. The project type comes with all the template
files you need to build a fully functional website.

1. On the start window, select Create a new project.

2. In the Create a new project window, select C# from the Language list. Next, select
Windows from the All platforms list, and Web from the All project types list.

After you apply the language, platform, and project type filters, select the [Link]
Core Web App (Razor Pages) template, and then select Next.

3. In the Configure your new project window, enter MyCoreApp in the Project name
field. Then, select Next.
 

4. In the Additional information window, verify that .NET 8.0 appears in the Target
Framework field.

From this window, you can enable container support and add authentication
support. The drop-down menu for Authentication Type has the following four
options:

None: No authentication.
Individual accounts: These authentications are stored in a local or Azure-
based database.
Microsoft identity platform: This option uses Microsoft Entra ID or Microsoft
365 for authentication.
Windows: Suitable for intranet applications.

Leave the Enable container support box unchecked, and select None for
Authentication Type.
 

5. Select Create.

Visual Studio opens your new project.

About your solution

This solution follows the Razor Page design pattern. It's different than the Model-View-
Controller (MVC) design pattern in that it's streamlined to include the model and
controller code within the Razor Page itself.

Tour your solution

1. The project template creates a solution with a single [Link] Core project named
MyCoreApp. Select the Solution Explorer tab to view its contents.
2. Expand the Pages folder.

3. Select the [Link] file, and view in the code editor.

4. Each .cshtml file has an associated code file. To open the code file in the editor,
expand the [Link] node in Solution Explorer, and select the [Link]
file.

5. View the [Link] file in the code editor.

6. The project contains a wwwroot folder, which is the root for your website. Expand
the folder to view its contents.
 You can put static site content such as CSS, images, and JavaScript libraries directly
in the paths where you want them.

7. The project also contains configuration files that manage the web app at run time.
The default application configuration is stored in [Link]. However, you
can override these settings by using [Link]. Expand the
[Link] file to view the [Link] file.

Run, debug, and make changes

1. In the toolbar, select the https button to build and run the app in debug mode.
Alternatively, press F5, or go to Debug > Start Debugging from the menu bar.

７ Note

You might also get a message that asks if you want to accept an [Link]
Core SSL certificate. To view the code in a web browser, select Yes, and then
select Yes if you receive a follow-up security warning message. Learn more
about enforcing SSL in [Link] Core.

2. Visual Studio launches a browser window. You should then see Home and Privacy
pages in the menu bar.

3. Select Privacy from the menu bar. The Privacy page in the browser renders the text
that's set in the [Link] file.

4. Return to Visual Studio, and then press Shift+F5 to stop debugging. This action
closes the project in the browser window.

5. In Visual Studio, open [Link] for editing. Next, delete the sentence, Use
this page to detail your site's privacy policy and replace it with This page is under
construction as of @ViewData["TimeStamp"].
6. Now, let's make a code change. Select [Link]. Then, clean up the using
directives at the top of the file by selecting the following shortcut:

Mouseover or select a greyed out using directive. A Quick Actions light bulb
appears below the caret or in the left margin. Select the light bulb, and then select
the expand arrow next to Remove unnecessary usings.

Now select Preview changes to see what changes.

 Select Apply. Visual Studio deletes the unnecessary using directives from the file.

7. Next, create a string for the current date that's formatted for your culture or region
by using the [Link] method.

The first argument for the method specifies how the date should be
displayed. This example uses the format specifier ( d ) which indicates the
short date format.
The second argument is the CultureInfo object that specifies the culture or
region for the date. The second argument determines, among other things,
the language of any words in the date, and the type of separators used.

Change the body of the OnGet() method in [Link] to the following

code:

C#

public void OnGet()

{
string dateTime = [Link]("d", new CultureInfo("en-
US"));
 ViewData["TimeStamp"] = dateTime;
}

8. Notice that the following using directive automatically gets added to the top of
the file:

C#

using [Link];

[Link] contains the CultureInfo class.

9. Press F5 to open your project in the web browser.

10. At the top of the web site, select Privacy to view your changes.

11. Close the web browser, press Shift+F5 to stop debugging.

Change your Home page

1. In the Solution Explorer, expand the Pages folder, and then select [Link].
 The [Link] file corresponds with your Home page in the web app, which
runs in a web browser.

In the code editor, you see HTML code for the text that appears on the Home
page.

2. Replace the Welcome text with Hello World!

 3. Select https or press Ctrl+F5 to run the app and open it in a web browser.

4. In the web browser, you see your new changes on the Home page.

5. Close the web browser, press Shift+F5 to stop debugging, and save your project.
You can now close Visual Studio.

Next steps
Congratulations on completing this tutorial! We hope you enjoyed learning about C#,
[Link] Core, and the Visual Studio IDE. To learn more about creating a web app or
website with C# and [Link], continue with the following tutorial:

Create a Razor Pages web app with [Link] Core

Or, learn how to containerize your web app with Docker:

Container Tools in Visual Studio

Related links
 Publish your web app to Azure App Service by using Visual Studio
Personalize the Visual Studio IDE and Editor

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Tutorial: Create your first Windows App
SDK application in Visual Studio with
XAML and C#
Article • 05/21/2024

In this introduction to the Visual Studio integrated development environment (IDE),

you'll create a "Hello World" app that runs on any Windows 10 or later device. To do so,
you'll use a Windows App SDK (WinUI 3) project template, Extensible Application
Markup Language (XAML), and the C# programming language.

７ Note

WinUI 3 is the native UI platform component that ships with the Windows App
SDK (completely decoupled from Windows SDKs). For more information, see
WinUI 3.

If you haven't already installed Visual Studio, go to the Visual Studio downloads page
to install it for free.

Prerequisites
You need Visual Studio to complete this tutorial. Visit the Visual Studio downloads
page for a free version.

Workloads and components required for developing with WinUI and the Windows
App SDK. To verify or install a workload in Visual Studio, select Tools > Get Tools
and Features. For more information, see Change workloads or individual
components.

On the Workloads tab of the Visual Studio Installer, select the following workloads
and components:

Visual Studio 2022 version 17.10 and later

For C# app development using the Windows App SDK, select Windows
application development.
Create a project
First, create a WinUI 3 project. The project type comes with all the template files you
need, before you've even added anything!

1. Open Visual Studio, and on the start window, choose Create a new project.

2. On the Create a new project screen, enter WinUI in the search box, choose the C#
template for Blank App, Packaged (WinUI 3 in Desktop), and then choose Next.

3. Give the project a name, HelloWorld, and choose Create.

７ Note

If this is the first time you have used Visual Studio to create a Windows App
SDK app, a Settings dialog box might appear. Choose Developer mode, and
then choose Yes.

Visual Studio installs an additional Developer Mode package for you. When
the package installation is complete, close the Settings dialog box.
Create the application
It's time to start developing. You'll add a button control, add an action to the button,
and then run the "Hello World" app to see what it looks like.

Add a button to the Design canvas

1. In the Solution Explorer, double-click [Link] to open the XAML
markup editor.

The XAML Editor is where you can add or change markup. Unlike UWP projects,
WinUI 3 doesn't have a Design view.

2. Review the Button control nested within the StackPanel at the root of the Window.
Change the label on the button
1. In the XAML Editor, change Button Content value from "Click me" to "Hello
World!".

2. Notice that the button has a Click event handler named myButton_Click specified,
too. We'll get to that in the next step.

Modify the event handler

An "event handler" sounds complicated, but it's just another name for code that is called
when an event happens. In this case, it adds an action triggered by the "Hello World!"
button.

1. In Solution Explorer, double-click [Link], the code-behind page.

2. Edit the event handler code in the C# editor window that opens.

Here is where things get interesting. The default event handler looks like this:
 Let's change it, so it looks like this:

Here's the code to copy and paste:

C#

private async void myButton_Click(object sender, RoutedEventArgs e)

{
var welcomeDialog = new ContentDialog()
{
Title = "Hello from HelloWorld",
Content = "Welcome to your first Windows App SDK app.",
CloseButtonText = "Ok",
XamlRoot = [Link]
};
await [Link]();
}

What did we just do?

The code uses the ContentDialog control to display a welcome message in a modal
popup control within the current window. (For more information on using
[Link] , see ContentDialog Class.)

Run the application

It's time to build, deploy, and launch the "Hello World" Windows App SDK app to see
what it looks like. Here's how.

1. Use the Play button (it has the text HelloWorld (Package)) to start the application
on the local machine.
 (Alternatively, you can choose Debug > Start Debugging from the menu bar or
press F5 to start your app.)

2. View your app, which appears soon after a splash screen disappears. The app
should look similar to this image:

3. Select the Hello World button.

Your Windows 10 or later device will display a message that says "Welcome to your
first Windows App SDK app" with the title "Hello from HelloWorld." Click Ok to
dismiss the message.
 4. To close the app, select the Stop Debugging button in the toolbar. (Alternatively,
choose Debug > Stop debugging from the menu bar, or press Shift+F5.)

Next steps
Congratulations on completing this tutorial! We hope you learned some basics about
Windows App SDK, WinUI 3, and the Visual Studio IDE. To learn more, continue with the
following tutorial:

Tutorial: Create a simple photo viewer with WinUI 3

See also
Writing apps for Windows: Selecting a development technology
Windows App SDK overview
Windows App SDK / WinUI 3 samples

Feedback
Was this page helpful?  Yes  No
Tutorial: Create your first Universal
Windows Platform application in Visual
Studio with XAML and C#
Article • 04/29/2025

In this tutorial, as an introduction to the Visual Studio integrated development environment

(IDE), you create a "Hello World" app that runs on any Windows 10 or later device. To do so,
you use a Universal Windows Platform (UWP) project template, Extensible Application Markup
Language (XAML), and the C# programming language.

７ Note

If you're happy with your current functionality in the Universal Windows Platform (UWP),
then there's no need to migrate your project type to Windows App SDK. WinUI 2.x, and
the Windows SDK, support UWP project types. If you would like to get started with WinUI
3 and Windows App SDK, then you can follow the steps in the Windows App SDK tutorial.

In this tutorial, you:

＂ Create a project
＂ Create an application
＂ Run the application

Prerequisites
You need:

Visual Studio. Visit the Visual Studio downloads page for a free version.

Workloads and components required for developing a UWP app. To verify or install a
workload in Visual Studio, select Tools > Get Tools and Features, or in the Create a new
project window, select the Install more tools and features link. For more information, see
Change workloads or individual components.

On the Workloads tab of the Visual Studio Installer, select the following workloads and
components:

Visual Studio 2022 version 17.10 and later

 For app development using UWP, select the WinUI application development
workload. Then, in the Installation details pane, under the WinUI application
development node, select the UWP option you need (this will also select any
additional required components)

For C#, select Universal Windows Platform tools and Windows 11 SDK
(10.0.26100.0).

This tutorial requires the UWP Blank App project template.

７ Note

In Visual Studio 17.10 - 17.12, this workload is called Windows application

development.

Create a project
First, create a Universal Windows Platform project. The project type comes with all the template
files you need, before you even add anything!

1. Open Visual Studio, and on the start window, choose Create a new project.

2. On the Create a new project screen, enter Universal Windows in the search box, choose
the C# template for Blank App (Universal Windows) or UWP Blank App in Visual Studio
2022 17.10 or later, and then choose Next.
3. Give the project a name, HelloWorld, and choose Create.

4. Accept the default Target version and Minimum version settings in the New Universal
Windows Platform Project dialog box.
 ７ Note

If this is the first time you have used Visual Studio to create a UWP app, the Enable
Developer Mode for Windows dialog box appears. Select settings for developers to
open Settings. Turn on Developer mode, and then choose Yes.

Visual Studio installs an additional Developer Mode package for you. When the
package installation is complete, close the Settings dialog box.

Create the application

It's time to start developing. Add a button control, add an action to the button, and then start
the "Hello World" app to see what it looks like.

Add a button to the Design canvas

1. In the Solution Explorer, double-click [Link] to open a split view.

There are two panes: The XAML Designer, which includes a design canvas, and the XAML
Editor, where you can add or change code.
2. Choose Toolbox to open the Toolbox fly-out window.
 If you don't see the Toolbox option, you can open it from the menu bar. To do so, choose
View > Toolbar. Or, press Ctrl+Alt+X.

3. Select the Pin icon to dock the Toolbox window.

4. Select the Button control and then drag it onto the design canvas.
 If you look at the code in the XAML Editor, you see that the Button appears there, too:

Add a label to the button

1. In the XAML Editor, change Button Content value from Button to Hello World!

2. Notice that the button in the XAML Designer changes, too.

Add an event handler

An event handler sounds complicated, but it's just another name for code that is called when
an event happens. In this case, it adds an action to the Hello World! button.

1. Double-click the button control on the design canvas.

2. Edit the event handler code in [Link], the code-behind page.

Here's where things get interesting. The default event handler looks like this:

Change it, so it looks like this:

Here's the code to copy and paste:

C#

private async void Button_Click(object sender, RoutedEventArgs e)

{
MediaElement mediaElement = new MediaElement();
var synth = new [Link]();
[Link] stream = await
[Link]("Hello, World!");
[Link](stream, [Link]);
[Link]();
}

What did we just do?

The code uses some Windows APIs to create a speech synthesis object and then gives it some
text to say. For more information on using SpeechSynthesis , see [Link].

Run the application

It's time to build, deploy, and launch the "Hello World" UWP app to see what it looks and
sounds like. Here's how.

1. Use the Play button (it has the text Local Machine) to start the application on the local
machine.

Alternatively, you can choose Debug > Start Debugging from the menu bar or press F5
to start your app.

2. View your app, which appears soon after a splash screen disappears. The app should look
similar to this image:
 3. Select the Hello World button.

Your Windows 10 or later device literally says, "Hello, World!"

4. To close the app, select the Stop Debugging button in the toolbar. Alternatively, choose
Debug > Stop debugging from the menu bar, or press Shift+F5.

Related content
UWP overview
Get UWP app samples

Next step
Congratulations on completing this tutorial! We hope you learned some basics about UWP and
the Visual Studio IDE. To learn more, continue with the following tutorial:

Create a user interface

Tutorial: Create a WPF application with C#
12/03/2024

In this tutorial, you become familiar with many of the tools, dialog boxes, and designers that
you can use when you develop applications with Visual Studio. You create a "Hello, World"
application, design the user interface, add code, and debug errors. At the same time, learn
about working in the Visual Studio integrated development environment (IDE).

＂ Configure the IDE

＂ Create a project
＂ Design the user interface
＂ Debug and test the application

Prerequisites
If you don't have Visual Studio, go to Visual Studio downloads to install it for free.
Make sure the .NET desktop development workload is installed. You can verify this
configuration in Visual Studio Installer.
You can use either .NET Framework or .NET Core for this tutorial. .NET Core is the newer,
more modern framework. .NET Core requires Visual Studio 2019 version 16.3 or later.

What is Windows Presentation Foundation?

Windows Presentation Foundation (WPF) is a user interface (UI) framework that creates
desktop client applications. The WPF development platform supports a broad set of application
development features, including an application model, resources, controls, graphics, layout,
data binding, documents, and security.

WPF is part of .NET. If you previously built applications with .NET using [Link] or Windows
Forms, the programming experience should be familiar. WPF uses the Extensible Application
Markup Language (XAML) to provide a declarative model for application programming. For
more information, see Desktop Guide (WPF .NET).

Configure the IDE

When you launch Visual Studio, the start window opens. Select Continue without code to open
the development environment. You see tool windows, the menus and toolbars, and the main
window space. Tool windows are docked on the sides of the application window. The search
box, menu bar, and the standard toolbar are located at the top. When you load a solution or
project, editors and designers appear in the central space of the application window. When you
develop an application, you spend most of your time in this central area.

Create the project

When you create an application in Visual Studio, you first create a project and a solution. For
this example, you create a Windows Presentation Foundation (WPF) project.

1. Open Visual Studio.

2. On the start window, choose Create a new project.

3. On the Create a new project screen, search for WPF. Choose WPF Application, and then
choose Next.
 

4. At the next screen, give the project a name, HelloWPFApp, and choose Next.

5. In the Additional information window, verify that .NET 8.0 is selected for your target
framework. Then, choose Create.
 

Visual Studio creates the HelloWPFApp project and solution. Solution Explorer shows the
various files. The WPF Designer shows a design view and a XAML view of [Link] in a
split view. You can slide the splitter to show more or less of either view. You can choose to see
only the visual view or only the XAML view.

７ Note
 For more information the Extensible Application Markup Language (XAML)), see XAML
overview for WPF.

After you create the project, you can customize it. To do so, choose Properties Window from
the View menu, or press F4. Then, you can display and change options for project items,
controls, and other items in an application.

Design the user interface

If the designer isn't open, select [Link] and select Shift+F7 to open the designer.

In this tutorial, you add three types of controls to this application: a TextBlock control, two
RadioButton controls, and a Button control.

Add a TextBlock control

Follow these steps to add a TextBlock.

1. Select Ctrl+Q to activate the search box and type Toolbox. Choose View > Toolbox from
the results list.

2. In the Toolbox, expand the Common WPF Controls node to see the TextBlock control.
3. Add a TextBlock control to the design surface. Choose the TextBlock item and drag it to
the window on the design surface. Center the control near the top of the window. You can
use the guidelines to center the control.

Your window should resemble this image:

The XAML markup should look like this example:

XAML

<Grid>
<TextBlock HorizontalAlignment="Left" Margin="387,60,0,0"
TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
Customize the text in the text block
You can change what text the TextBlock displays.

1. In the XAML view, locate the markup for TextBlock and change the Text attribute from
TextBlock to Select a message option and then choose the Display button.

The XAML markup should look like this example:

XAML

<Grid>
<TextBlock HorizontalAlignment="Left" Margin="387,60,0,0"
TextWrapping="Wrap" Text="Select a message option and then choose the Display
button." VerticalAlignment="Top"/>
</Grid>

2. Center the TextBlock again, and then save your changes by selecting Ctrl+S or using the
File menu item.

Add radio buttons

Next, add two RadioButton controls to the form.

1. In the Toolbox, find the RadioButton control.

2. Add two RadioButton controls to the design surface. Choose the RadioButton item and
drag it to the window on the design surface. Move the buttons by selecting them and
using the arrow keys. Arrange them so that the buttons appear side by side under the
TextBlock control. You can use the guidelines to align the controls.

Your window should look like this:

 3. In the Properties window for the left RadioButton control, at the top, change the Name
property to HelloButton .

4. In the Properties window for the right RadioButton control, change the Name property to
GoodbyeButton , and then save your changes.

Add display text for each radio button

Next, add display text for each RadioButton control. The following procedure updates the
Content property for a RadioButton control.
 Update the Content attribute for the two radio buttons HelloButton and GoodbyeButton
to "Hello" and "Goodbye" in the XAML. The XAML markup should now look similar to this
example:

XAML

<Grid>
<TextBlock HorizontalAlignment="Left" Margin="252,47,0,0"
TextWrapping="Wrap" Text="Select a message option and then choose the Display
button." VerticalAlignment="Top"/>
<RadioButton x:Name="HelloButton" Content="Hello"
HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="GoodbyeButton" Content="Goodbye"
HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

Set a radio button to be checked by default

In this step, set HelloButton to be checked by default so that one of the two radio buttons is
always selected.

1. In the XAML view, locate the markup for HelloButton.

2. Add an IsChecked attribute and set it to True. Specifically, add IsChecked="True" .

The XAML markup should now look similar to this example:

XAML

<Grid>
<TextBlock HorizontalAlignment="Left" Margin="252,47,0,0"
TextWrapping="Wrap" Text="Select a message option and then choose the Display
button." VerticalAlignment="Top"/>
<RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True"
HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="GoodbyeButton" Content="Goodbye"
HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

Add the button control

The final UI element that you add is a Button control.

1. In the Toolbox, find the Button control. Add it to the design surface under the
RadioButton controls by dragging it to the form in the design view. The guidelines can
help you center the control.
 2. In the XAML view, change the value of Content for the Button control from
Content="Button" to Content="Display" , and then save the changes.

Your window should resemble this screenshot:

The XAML markup should now look similar to this example:

XAML

<Grid>
<TextBlock HorizontalAlignment="Left" Margin="252,47,0,0"
TextWrapping="Wrap" Text="Select a message option and then choose the Display
button." VerticalAlignment="Top"/>
<RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True"
HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="GoodbyeButton" Content="Goodbye"
HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
<Button Content="Display" HorizontalAlignment="Left"
Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

Add code to the display button

When this application runs, a message box appears after a user chooses a radio button and
then chooses the Display button. One message box appears for Hello, and another appears for
Goodbye. To create this behavior, you add code to the Button_Click event in
[Link].

1. On the design surface, double-click the Display button.

 [Link] opens, with the cursor in the Button_Click event.

C#

private void Button_Click(object sender, RoutedEventArgs e)

{

When you double-click the Display button, Click="Button_Click" is added to the XAML.

The XAML markup should now look similar to this example:

XAML

<Grid>
<TextBlock HorizontalAlignment="Left" Margin="252,47,0,0"
TextWrapping="Wrap" Text="Select a message option and then choose the Display
button." VerticalAlignment="Top"/>
<RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True"
HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="GoodbyeButton" Content="Goodbye"
HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
<Button Content="Display" HorizontalAlignment="Left"
Margin="377,270,0,0" VerticalAlignment="Top" Width="75"
Click="Button_Click"/>
</Grid>

2. Inside the Button_Click braces, add the following code:

C#

if ([Link] == true)
{
[Link]("Hello.");
}
else if ([Link] == true)
{
[Link]("Goodbye.");
}

3. Save the application.

Debug and test the application

Next, debug the application to look for errors and test that both message boxes appear
correctly. The following instructions tell you how to build and launch the debugger. For more
information, see Build a WPF application (WPF) and Debug WPF.

Change the name of [Link]

Give MainWindow a more specific name. In Solution Explorer, right-click [Link] and
choose Rename. Rename the file to [Link]. In this example, this change creates an
error used later to demonstrate debugging.

Find and fix errors

In this step, you find the error that was caused earlier by changing the name of the
[Link] file.

Start debugging and find the error

1. Start the debugger by selecting F5 or selecting Debug, then Start Debugging.

A Break Mode window appears, and the Output window indicates that an IOException
occurred: Cannot locate resource [Link].

2. Stop the debugger by choosing Debug > Stop Debugging.

You renamed [Link] to [Link] , but the code still refers to [Link]
as the startup URI for the application, so the project can't start.

Specify [Link] as the startup URI

1. In Solution Explorer, open the [Link] file.
 2. Change StartupUri="[Link]" to StartupUri="[Link]" , and save the
changes.

As an optional step, it avoids confusion to change the title of your application window to
match this new name.

1. In Solution Explorer, open the [Link] file that you just renamed.

2. Change the value of the [Link] property from Title="MainWindow" to

Title="Greetings" , and save the changes.

Start the debugger again (press F5). You should now see the Greetings window of your
application.

To stop debugging, close the application window

Debug with breakpoints

You can test the code during debugging by adding some breakpoints. You can add breakpoints
by choosing Debug > Toggle Breakpoint, by clicking in the left margin of the editor next to
the line of code where you want the break to occur, or by pressing F9.

Add breakpoints
1. Open [Link], and select this line: [Link]("Hello.")

2. Add a breakpoint from the menu by selecting Debug, then Toggle Breakpoint.
 A red circle appears next to the line of code in the far left margin of the editor window.

3. Select this line: [Link]("Goodbye.") .

4. Press the F9 key to add a breakpoint, and then select F5 to start debugging.

5. In the Greetings window, choose the Hello radio button, and then choose the Display
button.

The line [Link]("Hello.") is highlighted in yellow. At the bottom of the IDE, the
Autos, Locals, and Watch windows are docked together on the left side. The Call Stack,
Breakpoints, Exception Settings, Command, Immediate, and Output windows are
docked together on the right side.

6. On the menu bar, choose Debug > Step Out.

The application resumes execution, and a message box with the word "Hello" appears.

7. Choose OK on the message box to close it.

8. In the Greetings window, choose the Goodbye radio button, and then choose the Display
button.

The line [Link]("Goodbye.") is highlighted in yellow.

9. Choose the F5 key to continue debugging. When the message box appears, choose OK
on the message box to close it.
 10. To stop debugging, close the application window.

11. On the menu bar, choose Debug > Disable All Breakpoints.

View a representation of the UI elements

In the running app, you should see a widget that appears at the top of your window. The
widget is a runtime helper that provides quick access to some helpful debugging features.
Select the first button, Go to Live Visual Tree. You should see a window with a tree that
contains all the visual elements of your page. Expand the nodes to find the buttons you added.

Build a release version of the application

After you verify that everything works, you can prepare a release build of the application.

1. On the main menu, select Build > Clean solution to delete intermediate files and output
files that were created during previous builds. This step isn't required, but it cleans up the
debug build outputs.

2. Change the build configuration for HelloWPFApp from Debug to Release by using the
dropdown control on the toolbar. It says Debug currently.

3. Build the solution by choosing Build > Build Solution.

Congratulations on completing this tutorial! You can find the .exe you built under your
solution and project directory (...\HelloWPFApp\HelloWPFApp\bin\Release).
Related content
Productivity tips

Next step
Congratulations on completing this tutorial! To learn even more, continue with the following
tutorials.

Continue with more WPF tutorials

Tutorial: Create a Windows Forms app in
Visual Studio with C#
06/03/2025

In this tutorial, you create a simple C# application that has a Windows-based user interface
(UI). The app has a button that changes the text of a label. This simple app has all the
components used for more complicated Windows Forms programs.

＂ Create a C# project in Visual Studio

＂ Create an application
＂ Run your application

Prerequisites
If you don't have Visual Studio, go to Visual Studio 2022 downloads to install it for free.
The .NET desktop development workload. To verify or install this workload in Visual
Studio, select Tools > Get Tools and Features. For more information, see Change
workloads or individual components.

Create a project
First, create a C# application project. The project type comes with all the template files you
need to create your application.

1. Open Visual Studio, and select Create a new project in the start window.
2. In Create a new project, select the Windows Forms App (.NET Framework) template for
C#.

You can refine your search to quickly get to the template you want. For example, type
Windows Forms App in the search box. Next, select C# from the language list, and then
select Windows from the platform list.
 

3. In the Configure your new project window, in Project name, enter HelloWorld, and select
Create.

Visual Studio opens your new project.

Create the application
After you select your C# project template and name your project, Visual Studio opens a form
for you. A form is a Windows user interface. Create a Hello World application by adding
controls to the form. Then run the app.

Add a button to the form

1. Select Toolbox to open the Toolbox flyout window.

If you don't see the Toolbox option, you can open it from the menu bar. Select View >
Toolbox or Ctrl+Alt+X.

2. Expand Common Controls and select the Pin icon to dock the Toolbox window.

3. Select the Button control and then drag it onto the form.
4. In the Properties window, locate Text. Change the name from button1 to Click this , and
then select Enter.

If you don't see the Properties window, you can open it from the menu bar. Select View >
Properties Window or F4.

5. In the Design section of the Properties window, change the name from button1 to
btnClickThis , and then select Enter.
 If you alphabetized the list in the Properties window, Button1 appears in the
(DataBindings) section, instead. You can dock or anchor the controls on your form to
help with automatic placement and sizing, when the form changes size.

Add a label to the form

After you add a button control to create an action, add a label control to receive the text.

1. Select the Label control from the Toolbox. Then drag it onto the form and drop it
beneath the Click this button.

2. In either the Design section or the (DataBindings) section of the Properties window,
change the name of label1 to lblHelloWorld . Then select Enter.

Add code to the form

1. In the [Link] [Design] window, double-click the Click this button to open the [Link]
window.

Alternatively, you can expand [Link] in Solution Explorer, and then choose Form1.

2. In the [Link] window, after the private void line, type or enter [Link] =
"Hello World!"; as shown in the following screenshot.
Run the application
1. Select the Start button to run the application.

Several things happen. In the Visual Studio IDE, the Diagnostics Tools window opens, and
an Output window opens, too. But outside of the IDE, a Form1 dialog box appears. It
includes your Click this button and text that says label1.

2. Select the Click this button in the Form1 dialog box. Notice that the label1 text changes
to Hello World!.
 3. Close the Form1 dialog box to stop running the app.

Related content
Congratulations on completing this tutorial. To learn more, continue with the following tutorial:

Tutorial: Create a picture viewer

Or try these other tutorials:

C# tutorials
Visual Basic tutorials
C++ tutorial
Tutorial: Create a picture viewer
Windows Forms App (.NET Framework)
Article • 09/19/2024

In this series of three tutorials, you create a Windows Forms application that loads a
picture and displays it. The Visual Studio Integrated Design Environment (IDE) provides
the tools you need to create the app.

In this first tutorial, you learn how to:

＂ Create a Visual Studio project that uses Windows Forms

＂ Add a layout element
＂ Run your application

To create a new Windows Forms App with .NET, follow the tutorial Create a Windows
Forms app with .NET. See the Desktop Guide on Windows Forms .NET to learn more.

Prerequisites
You need Visual Studio to complete this tutorial. Visit the Visual Studio downloads
page for a free version.
The .NET desktop development workload. To verify or install this workload in
Visual Studio, select Tools > Get Tools and Features. For more information, see
Change workloads or individual components.

Create your Windows Forms project

When you create a picture viewer, the first step is to create a Windows Forms App
project.

1. Open Visual Studio.

2. On the start window, select Create a new project.

3. On the Create a new project window, search for Windows Forms. Then select
Desktop from the Project type list.

4. Select the Windows Forms App (.NET Framework) template for either C# or Visual
Basic, and then select Next.


 5. In the Configure your new project window, name your project PictureViewer, then
select Create.

Visual Studio creates a solution for your app. A solution is a container for all of the
projects and files needed by your app.

At this point, Visual Studio displays an empty form in the Windows Form Designer.

Add a layout element

Your picture viewing app contains a picture box, a checkbox, and four buttons, which
you add in the next tutorial. The layout element controls their location on the form. This
section shows you how to change the title of your form, resize the form, and add a
layout element.

1. In your project, select the Windows Forms Designer. The tab reads [Link]
[Design] for C# or [Link] [Design] for Visual Basic.

2. Select anywhere in Form1.

3. The Properties window now displays properties for the form. The Properties
window is usually in the lower right of Visual Studio. This section controls various
properties, such as foreground and background color, title text that appears at the
top of the form, and the size of the form.
 If you don't see Properties, select View > Properties Window.

4. Find the Text property in the Properties window. Depending on how the list is
sorted, you might need to scroll down. Enter the value Picture Viewer, and then
choose Enter.

Your form now has the text Picture Viewer in its title bar.

７ Note

You can display properties by category or alphabetically. Use the buttons on

the Properties window to switch back and forth.

5. Select the form, again. Select the form's lower-right drag handle. The handle is a
small white square in the lower-right corner of the form.

Drag the handle to resize the form so the form is wider and a bit taller. If you look
at the Properties window, the Size property is different. You can also change the
size of the form by changing the Size property.

6. On the left side of the Visual Studio IDE, select the Toolbox tab. If you don't see it,
select View > Toolbox from the menu bar or Ctrl+Alt+X.

7. Select the small triangle symbol next to Containers to open the group.
8. Double-click TableLayoutPanel in the Toolbox. You can also drag a control from
the toolbox onto the form. The TableLayoutPanel control appears in your form.

７ Note

After you add your TableLayoutPanel, if a window appears inside your form
with the title TableLayoutPanel Tasks, select anywhere inside the form to close
it.

9. Select the TableLayoutPanel. You can verify what control is selected by looking at
the Properties window.
10. With the TableLayoutPanel selected, find the Dock property, which has the value
None. Select the dropdown arrow and then select Fill, which is the large button in
the middle of the dropdown menu.

Docking refers to how a window is attached to another window or area.

The TableLayoutPanel now fills the entire form. If you resize the form again, the
TableLayoutPanel stays docked, and resizes itself to fit.

11. In the form, select the TableLayoutPanel. In the upper-right corner, there's a small
black triangle button.

Select the triangle to display the control's task list.

12. Select Edit Rows and Columns to display the Column and Row Styles dialog box.
13. Select Column1 and set its size to 15 percent. Be sure the Percent option is
selected.

14. Select Column2 and set it to 85 percent.

15. From Show at the top of the Column and Row Styles dialog box, select Rows. Set
Row1 to 90 percent and Row2 to 10 percent. Select OK to save your changes.

Your TableLayoutPanel now has a large top row, a small bottom row, a small left
column, and a large right column.
Your layout is complete.

７ Note

Before you run your application, save your app by choosing the Save All toolbar
button. Alternatively, to save your app, choose File > Save All from the menu bar,
or press Ctrl+Shift+S. It's a best practice to save early and often.

Run your app

When you create a Windows Forms App project, you build a program that runs. At this
stage, your Picture Viewer app doesn't do much. For now, it displays an empty window
that shows Picture Viewer in the title bar.

To run the app, follow these steps.

1. Use one of the following methods:

Select the F5 key.

On the menu bar, select Debug > Start Debugging.
On the toolbar, select the Start button.

Visual Studio runs your app. A window with the title Picture Viewer appears.

Look at the Visual Studio IDE toolbar. More buttons appear on the toolbar when
you run an application. These buttons let you do things like stop and start your
app, and help you track down any errors.
 2. Use one of the following methods to stop your app:

On the toolbar, select the Stop Debugging button.

On the menu bar, select Debug > Stop Debugging.
From the keyboard, enter Shift+F5.
Select X in the upper corner of the Picture Viewer window.

When you run your app from inside the Visual Studio IDE, it's called debugging.
You run your application to find and fix bugs. You follow the same procedure to
run and debug other programs. To learn more about debugging, see First look at
the debugger.

Next step
Advance to the next tutorial to learn how to add controls to your Picture Viewer
program.

Tutorial part 2: Add controls to your Picture Viewer

Feedback
Was this page helpful?  Yes  No
Tutorial: Add controls to the picture
viewer Windows Forms App (.NET
Framework)
Article • 09/19/2024

In this series of three tutorials, you create a Windows Forms application that loads a
picture and displays it. The Visual Studio Integrated Design Environment (IDE) provides
the tools you need to create the app.

This program has a picture box, a checkbox, and several buttons, which you use to
control the application. This tutorial shows you how to add these controls.

In this second tutorial, you learn how to:

＂ Add controls to your application

＂ Add buttons in a layout panel
＂ Change control names and locations
＂ Add dialog components

To create a new Windows Forms App with .NET, follow the tutorial Create a Windows
Forms app with .NET. See the Desktop Guide on Windows Forms .NET to learn more.

Prerequisites
This tutorial builds on the previous tutorial, Create a picture viewer application.
Complete that one first and start with the project that you created for that tutorial.

Add controls to your application

The Picture Viewer app uses a PictureBox control to display a picture. It uses a checkbox
and several buttons to manage the picture and background and to close the app. You
add the PictureBox and a checkbox from the Toolbox in the Visual Studio IDE.

1. Open Visual Studio. Your Picture Viewer project appears under Open recent.

2. In the Windows Forms Designer, select the TableLayoutPanel you added in the
previous tutorial. Check that tableLayoutPanel1 appears in the Properties window.

3. On the left side of the Visual Studio IDE, select the Toolbox tab. If you don't see it,
select View > Toolbox from the menu bar or Ctrl+Alt+X. In the toolbox, expand
 Common Controls.

4. Double-click PictureBox to add a PictureBox control to your form. Visual Studio

adds the PictureBox control to the first empty cell of the TableLayoutPanel.

5. Choose the new PictureBox control to select it, and then select the black triangle
on the new PictureBox control to display its task list.

6. Select Dock in Parent Container, which sets the PictureBox Dock property to Fill.
You can see that value in the Properties window.

7. In the Properties window for the PictureBox, set the ColumnSpan property to 2.
The PictureBox now fills both columns.

8. Set the BorderStyle property to Fixed3D.

9. In the Windows Forms Designer, select TableLayoutPanel. Then, in the Toolbox,

double-click the CheckBox item to add a new CheckBox control. Your PictureBox
takes up the first two cells in the TableLayoutPanel, so the CheckBox control is
added to the lower-left cell.

10. Choose the Text property and enter Stretch.

Add buttons in a layout panel

So far, you added controls to the TableLayoutPanel. These steps show you how to add
four buttons to a new layout panel in the TableLayoutPanel.

1. Select the TableLayoutPanel on the form. Open the Toolbox, and select Containers.
Double-click FlowLayoutPanel to add a new control to the last cell of the
TableLayoutPanel.
 2. Set the FlowLayoutPanel's Dock property to Fill. You can set this property by
selecting the black triangle, then selecting Dock in parent container.

A FlowLayoutPanel is a container that arranges other controls in a row, one after

another.

3. Select the new FlowLayoutPanel, and then open the Toolbox and select Common
Controls. Double-click the Button item to add a button control called button1.

4. Double-click Button again to add another button. The IDE calls the next one
button2.

5. Add two more buttons this way. Another option is to select button2. Then select
Edit > Copy or Ctrl+C. Next, choose Edit > Paste from the menu bar or press
Ctrl+V to paste a copy of your button. Now paste it again. The IDE adds button3
and button4 to the FlowLayoutPanel.

6. Select the first button and set its Text property to Show a picture.

7. Set the Text properties of the next three buttons to Clear the picture, Set the
background color, and Close.

8. To size the buttons and arrange them, select the FlowLayoutPanel. Set the
FlowDirection property to RightToLeft.

The buttons should align themselves to the right side of the cell, and reverse their
order so that the Show a picture button is on the right of the cell. You can drag
the buttons around the FlowLayoutPanel to arrange them in any order.

9. Choose the Close button to select it. Then, to select the rest of the buttons at the
same time, press and hold the Ctrl key and choose them, too.

10. In the Properties window, set the AutoSize property to True. The buttons resize to
fit their text.

You can run your program to see how the controls look. Select the F5 key, select Debug
> Start Debugging, or select the Start button. The buttons that you added don't do
anything, yet.

Change control names

There are four buttons on your form, named button1, button2, button3, and button4 in
C#. In Visual Basic, the default first letter of any control name is capitalized, so the
buttons are named Button1, Button2, Button3, and Button4. Use these steps to give
them more informative names.

1. On the form, choose the Close button. If you still have all the buttons selected,
choose Esc to cancel the selection.

2. In the Properties window, look for (Name). Change the name to closeButton.

The IDE doesn't accept names that contain spaces.

3. Rename the other three buttons to backgroundButton, clearButton, and

showButton. You can verify the names by choosing the control selector dropdown
list in the Properties window. The new button names appear.

You can change the name of any control, such as the TableLayoutPanel or CheckBox.

Add dialog components

Your app can open picture files and choose a background color by using components. A
component is like a control. You use the Toolbox to add a component to your form. You
set its properties using the Properties window.

Unlike a control, adding a component to your form doesn't add a visible item. Instead, it
provides certain behaviors that you can trigger with code. For instance, it's a component
that opens an Open File dialog box.
In this section, you add an OpenFileDialog component and a ColorDialog component to
your form.

1. Select the Windows Forms Designer ([Link] [Design]). Then open the Toolbox
and select the Dialogs group.

2. Double-click OpenFileDialog to add a component called openFileDialog1 to your

form.

3. Double-click ColorDialog to add a component called colorDialog1. The

components appear at the bottom of Windows Forms Designer as icons.

4. Choose the openFileDialog1 icon and set two properties:

Set the Filter property to the following value:

Console

JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files

(*.bmp)|*.bmp|All files (*.*)|*.*

Set the Title property to the following value: Select a picture file.

The Filter property settings specify the types that the Select a picture dialog box
displays.

Next step
Advance to the next tutorial to learn how to add code to your application.

Tutorial part 3: Add code to your Picture Viewer

Feedback
Was this page helpful?  Yes  No
Tutorial: Add code to the picture viewer
Windows Forms App (.NET Framework)
Article • 09/19/2024

In this series of three tutorials, you create a Windows Forms application that loads a
picture and displays it. The Visual Studio Integrated Design Environment (IDE) provides
the tools you need to create the app.

Controls use C# or Visual Basic code to take the actions associated with them.

In this third tutorial, you learn how to:

＂ Add event handlers for your controls

＂ Write code to open a dialog box
＂ Write code for the other controls
＂ Run your application

To create a new Windows Forms App with .NET, follow the tutorial Create a Windows
Forms app with .NET. See the Desktop Guide on Windows Forms .NET to learn more.

Prerequisites
This tutorial builds on the previous tutorials, Create a picture viewer application
and Add UI controls to the picture viewer. Complete them first and start with the
project that you created for those tutorials.

Add event handlers for your controls

In this section, add event handlers for the controls that you added in the second tutorial,
Add controls to a picture viewer application. Your application calls an event handler
when an action takes place, such as selecting a button.

1. Open Visual Studio. Your Picture Viewer project appears under Open recent.

2. In the Windows Forms Designer, double-click the Show a picture button. You can
instead select the Show a picture button on the form, and then press Enter.

The Visual Studio IDE opens a tab in the main window. For C#, the tab is named
[Link]. If you're using Visual Basic, the tab is named [Link].

This tab displays the code file behind the form.

 ７ Note

Your [Link] tab might display showButton as ShowButton.

3. Focus on this part of the code.

C#

private void showButton_Click(object sender, EventArgs e)

{
}

4. Choose the Windows Forms Designer tab again, and then double-click the Clear
the picture button to open its code. Repeat for the remaining two buttons. Each
time, the Visual Studio IDE adds a new method to the form's code file.

5. Double-click the CheckBox control in Windows Forms Designer to add a

checkBox1_CheckedChanged() method. When you select or clear the check box, it

calls this method.

The following snippet shows the new code that you see in the code editor.
 C#

private void clearButton_Click(object sender, EventArgs e)

{
}

private void backgroundButton_Click(object sender, EventArgs e)

{
}

private void closeButton_Click(object sender, EventArgs e)

{
}

private void checkBox1_CheckedChanged(object sender, EventArgs e)

{
}

Methods, including event handlers, can have any name that you want. When you add an
event handler with the IDE, it creates a name based on the control's name and the event
being handled.

For example, the Click event for a button named showButton is called
showButton_Click() or ShowButton_Click() . If you want to change a code variable name,

right-click the variable in the code and then choose Refactor > Rename. This action
renames all instances of that variable in the code. For more information, see Rename
refactoring.

Write code to open a dialog box

The Show a picture button uses the OpenFileDialog component to display a picture file.
This procedure adds the code used to call that component.

The Visual Studio IDE offers a powerful tool called IntelliSense. As you type, IntelliSense
suggests possible code.

1. In Windows Forms Designer, double-click the Show a picture button. The IDE
moves your cursor inside the showButton_Click() or ShowButton_Click() method.

2. Type an i on the empty line between the two braces { } or between Private
Sub... and End Sub . An IntelliSense window opens.
 3. The IntelliSense window should highlight the word if . Select the Tab key twice to
insert the if snippet.

4. Select true and then type op to overwrite it for C# or Op for Visual Basic.

IntelliSense displays openFileDialog1.

5. Select Tab to add openFileDialog1.

6. Type a period ( . ) or dot, right after openFileDialog1. IntelliSense provides all of the
OpenFileDialog component's properties and methods. Start to type ShowDialog
and select Tab. The ShowDialog() method shows the Open File dialog box.

7. Add parentheses () immediately after the "g" in ShowDialog . Your code should be
[Link]() .

8. For C#, add a space, and then add two equal signs ( == ). For Visual Basic, add a
space, and then use a single equal sign ( = ).

9. Add another space. Use IntelliSense to enter DialogResult.

10. Type a dot to open the DialogResult value in the IntelliSense window. Enter the
letter O and choose the Tab key to insert OK.

７ Note

The first line of code should be complete. For C#, it should be similar to the
following.
 if ([Link]() == [Link])

For Visual Basic, it should be the following.

If [Link]() = [Link] Then

11. Add the following line of code.

C#

[Link]([Link]);

You can copy and paste or use IntelliSense to add it. Your final showButton_Click()
method should look similar to the following code.

C#

private void showButton_Click(object sender, EventArgs e)

{
if ([Link]() == [Link])
{
[Link]([Link]);
}
}

1. Add the following comment to your code.

C#

private void showButton_Click(object sender, EventArgs e)

{
// Show the Open File dialog. If the user clicks OK, load the
// picture that the user chose.
if ([Link]() == [Link])
{
[Link]([Link]);
}
}
It's the best practice to always comment your code. Code comments make it easier to
understand and maintain your code in the future.

Write code for the other controls

If you run your application now, you can select Show a picture. Picture Viewer opens the
Open File dialog box, where you can select a picture to display.

In this section, add the code for the other event handlers.

1. In Windows Forms Designer, double-click the Clear the picture button. For C#,
add the code in braces. For Visual Basic, add the code between Private Sub and
End Sub .

C#

private void clearButton_Click(object sender, EventArgs e)

{
// Clear the picture.
[Link] = null;
}

2. Double-click the Set the background color button and add the code.

C#

private void backgroundButton_Click(object sender, EventArgs e)

{
// Show the color dialog box. If the user clicks OK, change the
// PictureBox control's background to the color the user chose.
if ([Link]() == [Link])
[Link] = [Link];
}

3. Double-click the Close button and add the code.

C#

private void closeButton_Click(object sender, EventArgs e)

{
// Close the form.
 [Link]();
}

4. Double-click the Stretch checkbox and add the code.

C#

private void checkBox1_CheckedChanged(object sender, EventArgs e)

{
// If the user selects the Stretch check box,
// change the PictureBox's
// SizeMode property to "Stretch". If the user clears
// the check box, change it to "Normal".
if ([Link])
[Link] = [Link];
else
[Link] = [Link];
}

Run your application

You can run your application at any time while you're writing it. After you add the code
in the previous section, the Picture Viewer is complete. As in the previous tutorials, use
one of the following methods to run your application:

Select the F5 key.

On the menu bar, select Debug > Start Debugging.
On the toolbar, select the Start button.

A window with the title Picture Viewer appears. Test all the controls.

1. Select the Set the background color button. The Color dialog box opens.
2. Choose a color to set the background color.

3. Select Show a picture to display a picture.

4. Select and unselect Stretch.

5. Select the Clear the picture button to make sure the display clears.
 6. Select Close to exit the app.

Congratulations! You completed this series of tutorials. You accomplished these

programming and design tasks in the Visual Studio IDE:

Created a Visual Studio project that uses Windows Forms

Added layout for the picture viewing application
Added buttons and a checkbox
Added dialog boxes
Added event handlers for your controls
Written C# or Visual Basic code to handle the events

Next step
Continue learning with another tutorial series on how to create a timed math quiz.

Tutorial 2: Create a timed math quiz

Feedback
Was this page helpful?  Yes  No
Tutorial: Create a math quiz WinForms
app
Article • 06/19/2024

In this series of four tutorials, you build a math quiz. The quiz contains four random
math problems that a quiz taker tries to answer within a specified time.

The Visual Studio integrated development environment (IDE) provides the tools that you
need to create the app. To learn more about this IDE, see Welcome to the Visual Studio
IDE.

In this first tutorial, you learn how to:

＂ Create a Visual Studio project that uses Windows Forms.

＂ Add labels, a button, and other controls to a form.
＂ Set properties for the controls.
＂ Save and run your project.

Prerequisites
You need Visual Studio to complete this tutorial. Visit the Visual Studio downloads
page for a free version.

７ Note

This tutorial requires the Windows Forms App (.NET Framework) project template.
During installation, select the .NET desktop development workload:

If you already have Visual Studio installed and need to add it, from the menu, select
Tools > Get Tools and Features, or in the Create a new project window, select the
Install more tools and features link.
Create your Windows Forms project
When you create a math quiz, the first step is to create a Windows Forms App project.

1. Open Visual Studio.

2. On the start window, select Create a new project.

3. In the Create a new project window, search for Windows Forms. Then select
Desktop from the Project type list.

4. Select the Windows Forms App (.NET Framework) template for either C# or Visual
Basic, and then select Next.
 5. In the Configure your new project window, name your project MathQuiz, and
then select Create.

Visual Studio creates a solution for your app. A solution is a container for all the projects
and files that your app needs.

Set form properties

After you select your template and name your file, Visual Studio opens a form for you.
This section shows you how to change some form properties.

1. In your project, select Windows Forms Designer. The designer tab is labeled
[Link] [Design] for C# or [Link] [Design] for Visual Basic.

2. Select the form, Form1.

3. The Properties window now displays properties for the form. This window is
usually in the lower right corner of Visual Studio. If you don't see Properties, select
View > Properties Window.

4. Find the Text property in the Properties window. Depending on how the list is
sorted, you might need to scroll down. Enter the value Math Quiz for the Text
value, and then select Enter.

Your form now has the text "Math Quiz" in its title bar.

７ Note
 You can display properties by category or alphabetically. Use the buttons on
the Properties window to switch back and forth.

5. Change the size of the form to 500 pixels wide by 400 pixels tall.

You can resize the form by dragging its edges or drag handle until the correct size
appears as the Size value in the Properties window. The drag handle is a small
white square in the lower-right corner of the form. You can also resize the form by
changing the values of the Size property.

6. Change the value of the FormBorderStyle property to Fixed3D, and set the
MaximizeBox property to False.

These values prevent quiz takers from resizing the form.

Create the time remaining box

The math quiz contains a box in the upper-right corner. That box shows the number of
seconds that remain in the quiz. This section shows you how to use a label for that box.
You add code for the countdown timer in a later tutorial in this series.

1. On the left side of the Visual Studio IDE, select the Toolbox tab. If you don't see
the toolbox, select View > Toolbox from the menu bar or Ctrl+Alt+X.

2. Select the Label control in the Toolbox, and then drag it onto the form.

3. In the Properties box, set the following properties for the label:

Set the (Name) to timeLabel.

Change AutoSize to False so that you can resize the box.
Change the BorderStyle to FixedSingle to draw a line around the box.
Set the Size to 200, 30.
Select the Text property, and then select the Backspace key to clear the Text
value.
Select the plus sign (+) next to the Font property, and then set the Size to
15.75.

4. Move the label to the upper-right corner of the form. When blue spacer lines
appear, use them to position the control on the form.

5. Add another Label control from the Toolbox, and then set its font size to 15.75.

6. Set this label's Text property to Time Left.

 7. Move the label so that it lines up to the left of the timeLabel label.

Add controls for the addition problem

The first part of the quiz is an addition problem. This section shows you how to use
labels to display that problem.

1. Add a Label control from the Toolbox to the form.

2. In the Properties box, set the following properties for the label:

Set the Text to ? (question mark).

Set AutoSize to False.
Set the Size to 60, 50.
Set the font size to 18.
Set TextAlign to MiddleCenter.
Set the Location to 50, 75 to position the control on the form.
Set the (Name) to plusLeftLabel.

3. In the form, select the plusLeftLabel label that you created. Copy the label by
selecting either Edit > Copy or Ctrl+C.

4. Paste the label into the form three times by selecting either Edit > Paste or Ctrl+V
three times.

5. Arrange the three new labels so that they are in a row to the right of the
plusLeftLabel label.

6. Set the second label's Text property to + (plus sign).

7. Set the third label's (Name) property to plusRightLabel.

8. Set the fourth label's Text property to = (equals sign).

9. Add a NumericUpDown control from the Toolbox to the form. You learn more
about this kind of control later.

10. In the Properties box, set the following properties for the NumericUpDown
control:
 Set the font size to 18.
Under MaximumSize, set the width to 100.
Set the (Name) to sum.

11. Line up the NumericUpDown control with the Label controls for the addition
problem.

Add controls for the subtraction, multiplication,

and division problems
Next, add labels to the form for the remaining math problems.

1. Copy the four Label controls and the NumericUpDown control that you created
for the addition problem. Paste them into the form.

2. Move the new controls to line up below the addition controls.

3. In the Properties box, set the following properties for the new controls:

Set the (Name) of the first question-mark label to minusLeftLabel.

Set the Text of the second label to - (minus sign).
Set the (Name) of the second question-mark label to minusRightLabel.
Set the (Name) of the NumericUpDown control to difference.

4. Copy the addition controls, and paste them two more times into the form.

5. For the third row:

Set the (Name) of the first question-mark label to timesLeftLabel.

Set the Text of the second label to × (multiplication sign). You can copy the
multiplication sign from this tutorial and paste it onto the form.
Set the (Name) of the second question-mark label to timesRightLabel.
Set the (Name) of the NumericUpDown control to product.
 6. For the fourth row:

Set the (Name) of the first question-mark label to dividedLeftLabel.

Set the Text of the second label to ÷ (division sign). You can copy the division
sign from this tutorial and paste it onto the form.
Set the (Name) of the second question-mark label to dividedRightLabel.
Set the (Name) of the NumericUpDown control to quotient.

Add a start button and set the tab-index order

This section shows you how to add a start button. You also specify the tabbing order of
the controls. This ordering determines how the quiz taker moves from one control to
the next by using the Tab key.

1. Add a Button control from the Toolbox to the form.

2. In the Properties box, set the following properties of the button:

Set the (Name) to startButton.

Set the Text to Start the quiz.
Set the font size to 14.
Set AutoSize to True, which causes the button to automatically resize to fit
the text.
Set the TabIndex to 0. This value makes the start button the first control to
receive the focus.

3. Center the button near the bottom of the form.

 4. In the Properties box, set the TabIndex property of each NumericUpDown control:

Set the TabIndex of the sum control to 1.

Set the TabIndex of the difference control to 2.
Set the TabIndex of the product control to 3.
Set the TabIndex of the quotient control to 4.

Run your app

The math problems don't work yet on your quiz. But you can still run your app to check
whether the TabIndex values function as you expect.

1. Use one of the following methods to save your app:

Select Ctrl+Shift+S.
On the menu bar, select File > Save All.
On the toolbar, select the Save All button.

2. Use one of the following methods to run your app:

Select F5.
On the menu bar, select Debug > Start Debugging.
On the toolbar, select the Start button.
 3. Select the Tab key a few times to see how the focus moves from one control to the
next.

Next step
Advance to the next tutorial to add random math problems and an event handler to
your math quiz.

Tutorial part 2: Add math problems to a math quiz WinForms app

Feedback
Was this page helpful?  Yes  No
Tutorial: Add math problems to a math
quiz WinForms app
Article • 10/18/2024

In this series of four tutorials, you'll build a math quiz. The quiz contains four random
math problems that a quiz taker tries to answer within a specified time.

Controls use C# or Visual Basic code. In this second tutorial, you make the quiz
challenging by adding code for math problems that are based on random numbers. You
also create a method that's named StartTheQuiz() to fill in the problems.

In this second tutorial, you learn how to:

＂ Write code to create Random objects to use in math problems.

＂ Add an event handler for the start button.
＂ Write code to start the quiz.

Prerequisites
This tutorial builds on a previous tutorial, Create a math quiz WinForms app. If you
haven't completed that tutorial, go through it first.

Create a random addition problem

1. In your Visual Studio project, select Windows Forms Designer.

2. Select the form, Form1.

3. On the menu bar, select View > Code. [Link] or [Link] appears, depending
on the programming language that you're using, so that you can view the code
behind the form.

4. Create a Random object by adding a new statement near the top of the code in
[Link] or [Link].

C#

public partial class Form1 : Form

{
// Create a Random object called randomizer
 // to generate random numbers.
Random randomizer = new Random();

You can use new statements like this one to create buttons, labels, panels,
OpenFileDialogs, ColorDialogs, SoundPlayers, Randoms, and even forms. These items
are called objects.

When you run your program, the form is started. The code behind it creates a Random
object and names it randomizer.

Your quiz needs variables to store the random numbers that it creates for each problem.
Before using variables, you declare them, which means listing their names and data
types.

1. Add two integer variables to the form, and name them addend1 and addend2 in
[Link] or [Link].

７ Note

An integer variable is known as an int in C# or an Integer in Visual Basic. This

kind of variable stores a positive or negative number from -2147483648
through 2147483647 and can store only whole numbers, not decimals.

You use similar syntax to add an integer variable as you did to add the Random
object, as the following code shows.

C#

// Create a Random object called randomizer

// to generate random numbers.
Random randomizer = new Random();

// These integer variables store the numbers

// for the addition problem.
int addend1;
int addend2;

1. Add a method that's named StartTheQuiz() [Link] or [Link]. This method

uses the Random object's Next() method to generate random numbers for the
 labels. StartTheQuiz() will eventually fill in all the problems and then start the
timer, so add this information to the summary comment. The function should look
like the following code.

C#

/// <summary>
/// Start the quiz by filling in all of the problems
/// and starting the timer.
/// </summary>
public void StartTheQuiz()
{
// Fill in the addition problem.
// Generate two random numbers to add.
// Store the values in the variables 'addend1' and 'addend2'.
addend1 = [Link](51);
addend2 = [Link](51);

// Convert the two randomly generated numbers

// into strings so that they can be displayed
// in the label controls.
[Link] = [Link]();
[Link] = [Link]();

// 'sum' is the name of the NumericUpDown control.

// This step makes sure its value is zero before
// adding any values to it.
[Link] = 0;
}

When you use the Next() method with a Random object, such as when you call
[Link](51) , you get a random number that's less than 51, or between 0 and

50. This code calls [Link](51) so that the two random numbers add up to an
answer that's between 0 and 100.

Take a closer look at these statements.

C#

[Link] = [Link]();
[Link] = [Link]();
These statements set the Text properties of plusLeftLabel and plusRightLabel so that
they display the two random numbers. Label controls display values in text format, and
in programming, strings hold text. Each integer's ToString() method converts the
integer into text that a label can display.

Create random subtraction, multiplication, and

division problems
The next step is to declare variables and provide random values for the other math
problems.

1. Add integer variables for the remaining math problems to your form, after the
addition problem variables. The code in [Link] or [Link] should look like the
following sample.

C#

public partial class Form1 : Form

{
// Create a Random object called randomizer
// to generate random numbers.
Random randomizer = new Random();

// These integer variables store the numbers

// for the addition problem.
int addend1;
int addend2;

// These integer variables store the numbers

// for the subtraction problem.
int minuend;
int subtrahend;

// These integer variables store the numbers

// for the multiplication problem.
int multiplicand;
int multiplier;

// These integer variables store the numbers

// for the division problem.
int dividend;
int divisor;
1. Modify the StartTheQuiz() method in [Link] or [Link] by adding the
following code, starting with the "Fill in the subtraction problem" comment.

C#

/// <summary>
/// Start the quiz by filling in all of the problem
/// values and starting the timer.
/// </summary>
public void StartTheQuiz()
{
// Fill in the addition problem.
// Generate two random numbers to add.
// Store the values in the variables 'addend1' and 'addend2'.
addend1 = [Link](51);
addend2 = [Link](51);

// Convert the two randomly generated numbers

// into strings so that they can be displayed
// in the label controls.
[Link] = [Link]();
[Link] = [Link]();

// 'sum' is the name of the NumericUpDown control.

// This step makes sure its value is zero before
// adding any values to it.
[Link] = 0;

// Fill in the subtraction problem.

minuend = [Link](1, 101);
subtrahend = [Link](1, minuend);
[Link] = [Link]();
[Link] = [Link]();
[Link] = 0;

// Fill in the multiplication problem.

multiplicand = [Link](2, 11);
multiplier = [Link](2, 11);
[Link] = [Link]();
[Link] = [Link]();
[Link] = 0;

// Fill in the division problem.

divisor = [Link](2, 11);
int temporaryQuotient = [Link](2, 11);
dividend = divisor * temporaryQuotient;
[Link] = [Link]();
[Link] = [Link]();
[Link] = 0;
This code uses the Next() method of the Random class a little differently from how the
addition problem does. When you give the Next() method two values, it picks a
random number that's greater than or equal to the first value and less than the second
one.

By using the Next() method with two arguments, you can ensure the subtraction
problem has a positive answer, the multiplication answer is at most 100, and the division
answer isn't a fraction.

Add an event handler to the start button

In this section, you add code to start the quiz when the start button is selected. Code
that runs in reaction to an event like a button selection is called an event handler.

1. In Windows Forms Designer, either double-click the Start the quiz button, or
select it and then select Enter. The form's code appears, and a new method is
visible.

These actions add a Click event handler to the start button. When a quiz taker
selects this button, the app runs the code that you'll add to this new method.

2. Add the following two statements so that the event handler starts the quiz.

C#

private void startButton_Click(object sender, EventArgs e)

{
StartTheQuiz();
[Link] = false;
}

The first statement calls the new StartTheQuiz() method. The second statement sets the
Enabled property of the startButton control to false so that the quiz taker can't select
the button during a quiz.

Run your app

1. Save your code.
 2. Run your app, and then select Start the quiz. Random math problems appear, as
the following screenshot shows.

Next steps
Advance to the next tutorial to add a timer to your math quiz and check user answers.

Tutorial part 3: Add a timer control to a math quiz WinForms app

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Tutorial: Add a timer to a math quiz
WinForms app
Article • 02/14/2025

In this series of four tutorials, you'll build a math quiz. The quiz contains four random
math problems that a quiz taker tries to answer within a specified time.

The quiz uses a Timer control. The code behind this control tracks the elapsed time and
checks the quiz taker's answers.

In this third tutorial, you learn how to:

＂ Add a Timer control to your Windows Forms app.

＂ Add an event handler for the Timer.
＂ Write code to check the user's answers, display messages, and fill in the correct
answers.

Prerequisites
This tutorial builds on previous tutorials, starting with Create a math quiz WinForms app.
If you haven't completed those tutorials, go through them first.

Add a countdown timer

To keep track of time during the quiz, you use a Timer component. You also need a
variable to store the amount of time that's left.

1. Add an integer variable that's named timeLeft in the same way that you declared
variables in previous tutorials. Put the timeLeft declaration right after the other
declarations. Your code should look like the following sample.

C#

C#

public partial class Form1 : Form

{
// Create a Random object called randomizer
// to generate random numbers.
Random randomizer = new Random();

// These integer variables store the numbers

 // for the addition problem.
int addend1;
int addend2;

// These integer variables store the numbers

// for the subtraction problem.
int minuend;
int subtrahend;

// These integer variables store the numbers

// for the multiplication problem.
int multiplicand;
int multiplier;

// These integer variables store the numbers

// for the division problem.
int dividend;
int divisor;

// This integer variable keeps track of the

// remaining time.
int timeLeft;

2. In Windows Forms Designer, move a Timer control from the Components

category of the Toolbox to your form. The control appears in the gray area at the
bottom of the design window.

3. On the form, select the Timer icon that you just added, and set its Interval
property to 1000. Because this interval is in milliseconds, a value of 1000 causes
the timer to raise a Tick event every second.

Check the answers

Because the timer raises a Tick event every second, it makes sense to check the elapsed
time in a Tick event handler. It's also practical to check the answers in that event
handler. If time has run out, or if the answers are correct, the quiz should end.

Before you write that event handler, add a method called CheckTheAnswer() to
determine whether the answers to the math problems are correct. This method should
be in line with the other methods, such as StartTheQuiz() . Your code should look like
the following sample.

C#
 C#

/// <summary>
/// Check the answers to see if the user got everything right.
/// </summary>
/// <returns>True if the answer's correct, false otherwise.</returns>
private bool CheckTheAnswer()
{
if ((addend1 + addend2 == [Link])
&& (minuend - subtrahend == [Link])
&& (multiplicand * multiplier == [Link])
&& (dividend / divisor == [Link]))
return true;
else
return false;
}

This method determines the answers to the math problems and compares the results to
the values in the NumericUpDown controls. In this code:

The Visual Basic version uses the Function keyword instead of the usual Sub
keyword because this method returns a value.

You can't easily enter the multiplication sign (×) or the division sign (÷) by using
the keyboard, so C# and Visual Basic accept an asterisk ( * ) for multiplication and a
slash mark ( / ) for division.

In C#, && is the logical and operator. In Visual Basic, the equivalent operator is
AndAlso . You use the logical and operator to check whether more than one

condition is true. In this case, if the values are all correct, the method returns a
value of true . Otherwise, the method returns a value of false .

The if statement uses the Value property of a NumericUpDown control to access

the control's current value. In the next section, you use the same property to
display the correct answer in each control.

Add an event handler to the timer

Now that you have a way to check the answers, you can write the code for the Tick
event handler. This code runs every second, after the timer raises a Tick event. This event
handler checks the quiz taker's answers by calling CheckTheAnswer() . It also checks how
much time has elapsed in the quiz.
1. On the form, double-click the Timer control, or select it and then select Enter.
These actions add a Tick event handler. The code editor appears and displays the
Tick handler's method.

For C#, it adds a line of code in the [Link] code file that hooks up the
event handler:

C#

[Link] += new EventHandler(timer1_Tick);

For Visual Basic, there's no need for that line, but the event handler contains a
handles [Link] which does the same thing.

2. Add the following statements to the new event handler method.

C#

C#

private void timer1_Tick(object sender, EventArgs e)

{
if (CheckTheAnswer())
{
// If CheckTheAnswer() returns true, then the user
// got the answer right. Stop the timer
// and show a MessageBox.
[Link]();
[Link]("You got all the answers right!",
"Congratulations!");
[Link] = true;
}
else if (timeLeft > 0)
{
// If CheckTheAnswer() returns false, keep counting
// down. Decrease the time left by one second and
// display the new time left by updating the
// Time Left label.
timeLeft = timeLeft - 1;
[Link] = timeLeft + " seconds";
}
else
{
// If the user ran out of time, stop the timer, show
// a MessageBox, and fill in the answers.
[Link]();
[Link] = "Time's up!";
[Link]("You didn't finish in time.", "Sorry!");
[Link] = addend1 + addend2;
[Link] = minuend - subtrahend;
 [Link] = multiplicand * multiplier;
[Link] = dividend / divisor;
[Link] = true;
}
}

Each second of the quiz, this method runs. The code first checks the value that
CheckTheAnswer() returns.

If all answers are correct, that value is true , and the quiz ends:
The timer stops.
A congratulatory message appears.
The Enabled property of the startButton control is set to true so that the quiz
taker can start another quiz.

If CheckTheAnswer() returns false , the code checks the value of timeLeft:

If this variable is greater than 0, the timer subtracts 1 from timeLeft. It also
updates the Text property of the timeLabel control to show the quiz taker how
many seconds remain.
If no time remains, the timer stops and changes the timeLabel text to Time's
up! A message box announces that the quiz is over, and the answers are
revealed. The start button becomes available again.

Start the timer

To start the timer when the quiz starts, add three lines to the end of the StartTheQuiz()
method, as the following sample shows.

C#

C#

/// <summary>
/// Start the quiz by filling in all of the problem
/// values and starting the timer.
/// </summary>
public void StartTheQuiz()
{
// Fill in the addition problem.
// Generate two random numbers to add.
// Store the values in the variables 'addend1' and 'addend2'.
addend1 = [Link](51);
addend2 = [Link](51);
 // Convert the two randomly generated numbers
// into strings so that they can be displayed
// in the label controls.
[Link] = [Link]();
[Link] = [Link]();

// 'sum' is the name of the NumericUpDown control.

// This step makes sure its value is zero before
// adding any values to it.
[Link] = 0;

// Fill in the subtraction problem.

minuend = [Link](1, 101);
subtrahend = [Link](1, minuend);
[Link] = [Link]();
[Link] = [Link]();
[Link] = 0;

// Fill in the multiplication problem.

multiplicand = [Link](2, 11);
multiplier = [Link](2, 11);
[Link] = [Link]();
[Link] = [Link]();
[Link] = 0;

// Fill in the division problem.

divisor = [Link](2, 11);
int temporaryQuotient = [Link](2, 11);
dividend = divisor * temporaryQuotient;
[Link] = [Link]();
[Link] = [Link]();
[Link] = 0;

// Start the timer.

timeLeft = 30;
[Link] = "30 seconds";
[Link]();
}

When your quiz starts, this code sets the timeLeft variable to 30 and the Text property
of the timeLabel control to 30 seconds. Then the Start() method of the Timer control
starts the countdown.

Run your app

1. Save your program and run it.

2. Select Start the quiz. The timer starts to count down. When time runs out, the quiz
ends, and the answers appear.
 3. Start another quiz, and provide correct answers to the math problems. When you
answer correctly within the time limit, a message box opens, the start button
becomes available, and the timer stops.

Next step
Advance to the next tutorial to learn how to customize your math quiz.

Tutorial part 4: Customize a math quiz WinForms app

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Tutorial: Customize a math quiz WinForms
app
10/18/2024

In this series of four tutorials, you'll build a math quiz. The quiz contains four random math
problems that a quiz taker tries to answer within a specified time.

This tutorial shows you how to enhance your quiz by clearing default values and by
customizing the appearance of controls.

In this final tutorial, you learn how to:

＂ Add event handlers to clear the default NumericUpDown control values.

＂ Customize the quiz.

Prerequisites
This tutorial builds on previous tutorials, starting with Create a math quiz WinForms app. If you
haven't completed those tutorials, go through them first.

Add event handlers for the NumericUpDown

controls
The quiz contains NumericUpDown controls that quiz takers use to enter numbers. When you
enter an answer, you either need to select the default value first or delete that value manually.
By adding an Enter event handler, you can make it easier to enter answers. This code selects
and clears the current value in each NumericUpDown control as soon as the quiz taker selects
it and starts to enter a different value.

1. Select the first NumericUpDown control on the form. In the Properties dialog box, select
the Events icon on the toolbar.

The Events tab in Properties displays all the events that you can respond to for the item
that you selected on the form. In this case, all the listed events pertain to the
NumericUpDown control.
 2. Select the Enter event, enter answer_Enter, and then select Enter.

The code editor appears and displays the Enter event handler that you created for the
sum NumericUpDown control.

3. In the method for the answer_Enter event handler, add the following code:

C#

private void answer_Enter(object sender, EventArgs e)

{
// Select the whole answer in the NumericUpDown control.
NumericUpDown answerBox = sender as NumericUpDown;

if (answerBox != null)
{
int lengthOfAnswer = [Link]().Length;
[Link](0, lengthOfAnswer);
}
}

In this code:

The first line declares the method. It includes a parameter that's named sender . In C#, the
parameter is object sender . In Visual Basic, it's sender As [Link] . This parameter
refers to the object whose event is firing, which is known as the sender. In this case, the
sender object is the NumericUpDown control.
The first line inside the method casts, or converts, the sender from a generic object to a
NumericUpDown control. That line also assigns the name answerBox to the
NumericUpDown control. All the NumericUpDown controls on the form will use this
method, not just the addition problem's control.
The next line verifies whether answerBox was successfully cast as a NumericUpDown
control.
 The first line inside the if statement determines the length of the answer that's currently
in the NumericUpDown control.
The second line inside the if statement uses the answer length to select the current
value in the control.

When the quiz taker selects the control, Visual Studio fires this event. This code selects the
current answer. As soon as the quiz taker starts to enter a different answer, the current answer
is cleared and replaced with the new answer.

1. In Windows Forms Designer, select the addition problem's NumericUpDown control

again.

2. In the Events page of the Properties dialog box, find the Click event, and then select
answer_Enter from the drop-down menu. This event handler is the one that you just
added.

3. In Windows Forms Designer, select the subtraction problem's NumericUpDown control.

4. In the Events page of the Properties dialog box, find the Enter event, and then select
answer_Enter from the drop-down menu. This event handler is the one that you just
added. Repeat this step for the Click event.

5. Repeat the previous two steps for the multiplication and division NumericUpDown
controls.

Run your app

1. Save your program and run it.

2. Start a quiz, and select a NumericUpDown control. The existing value is automatically
selected and then cleared when you start to enter a different value.
Customize your quiz
In this last part of the tutorial, you'll explore some ways to customize the quiz and expand on
what you've learned.

Change the color of a label

Use the BackColor property of the timeLabel control to turn this label red when only five
seconds remain in a quiz.

C#

[Link] = [Link];

Reset the color when the quiz is over.

Play a sound for a correct answer

Give the quiz taker a hint by playing a sound when the correct answer is entered into a
NumericUpDown control. To implement this functionality, write an event handler for each
control's ValueChanged event. This type of event fires whenever a quiz taker changes the
control's value.
Next steps
Congratulations! You've finished this series of tutorials. You've completed these programming
and design tasks in the Visual Studio IDE:

Created a Visual Studio project that uses Windows Forms

Added labels, a button, and NumericUpDown controls
Added a timer
Set up event handlers for your controls
Written C# or Visual Basic code to handle the events

Continue learning with another tutorial series on how to build a matching game.

Tutorial 3: Create a matching game

Tutorial: Create a Windows Forms matching
game app
07/30/2025

In this series of four tutorials, you create a matching game. The player matches pairs of hidden
icons.

Use these tutorials to learn about the following tasks in the Visual Studio integrated
development environment (IDE):

Store objects, such as icons, in a List<T> object.

Use a foreach loop in C# or a For Each loop in Visual Basic to iterate through items in a
list.
Keep track of a form's state by using reference variables.
Create an event handler to respond to events that you can use with multiple objects.
Create a timer that counts down and then fires an event exactly once after it's started.

When you finish, you'll have a complete game.

In this first tutorial, you learn how to:

＂ Create a Visual Studio project that uses Windows Forms.

＂ Add and format a layout element.
＂ Add and format labels.

Prerequisites
You need Visual Studio to complete this tutorial. Visit the Visual Studio downloads page for a
free version.

７ Note

This tutorial requires the Windows Forms App (.NET Framework) project template. During
installation, select the .NET desktop development workload:

If you already have Visual Studio installed and need to add the template, from the menu,
select Tools > Get Tools and Features, or in the Create a new project window, select
Install more tools and features.

Create a Windows Forms match game project

The first step of creating your game is to create a Windows Forms App project.

1. Open Visual Studio.

2. In the start window, select Create a new project.

3. In the Create a new project window, search for Windows Forms. Then select Desktop
from the All project types list.

4. Select the Windows Forms App (.NET Framework) template for either C# or Visual Basic,
and then select Next.

5. In the Configure your new project window, name your project MatchingGame, and then
select Create.
Visual Studio creates a solution for your app. A solution is a container for the projects and files
that your app needs.

At this point, Visual Studio displays an empty form in the Windows Forms Designer.

Create a layout for your game

In this section, you create the four-by-four grid for the game.

1. Select the form to select the Windows Forms Designer. The tab reads [Link] [Design]
for C# or [Link] [Design] for Visual Basic. In the Properties window, set the following
form properties.

Change the Text property from Form1 to Matching Game. This text appears at the
top of the game window.
Set the size of the form. You can change it either by setting the Size property to 550,
550 or by dragging the corner of the form until you see the correct size at the
bottom of the Visual Studio IDE.

2. Select the Toolbox tab on the left side of the IDE. If you don't see it, select View >
Toolbox from the menu bar or select Ctrl+Alt+X.

3. Drag a TableLayoutPanel control from the Containers category in the toolbox, or double-
click it. Set the following properties for the panel in the Properties window.

Set the BackColor property to CornflowerBlue. To set this property, select the down
arrow next to the BackColor property. In the resulting dialog box, select Web. In the
list of names, select CornflowerBlue.

７ Note

The colors aren't in alphabetical order. CornflowerBlue is near the bottom of

the list.

Set the Dock property to Fill by selecting the down arrow and then selecting the
large middle button. This option spreads the table out so that it covers the entire
form.

Set the CellBorderStyle property to Inset. This value provides visual borders
between each cell on the board.

Select the triangle button in the upper-right corner of the TableLayoutPanel to

display its task menu. On the task menu, select Add Row twice to add two more
 rows. Then select Add Column twice to add two more columns.

On the task menu, select Edit Rows and Columns to open the Column and Row
Styles window. For each column, select the Percent option, and then set each
column's width to 25 percent.

Select Rows from the list at the top of the window, and then set each row's height
to 25 percent.

When you're done, select OK to save your changes.

Your TableLayoutPanel is now a four-by-four grid with 16 equally sized square cells. These rows
and columns are where the icons appear later.

Add and format labels

In this section, you create and format labels that appear during the game.
 1. Be certain that the TableLayoutPanel is selected in the form editor. You should see
tableLayoutPanel1 at the top of the Properties window. If it isn't selected, select the
TableLayoutPanel on the form, or select it from the list at the top of the Properties
window.

2. Open the toolbox, as before, and open the Common Controls category. Add a Label
control to the upper-left cell of the TableLayoutPanel. The label control is now selected in
the IDE. Set the following properties for it.

Set the BackColor property of the label to CornflowerBlue.

Set the AutoSize property to False.
Set the Dock property to Fill.
Set the TextAlign property to MiddleCenter by selecting the down arrow button
next to the property and then selecting the middle button. This value ensures the
icon appears in the middle of the cell.
Select the Font property. An ellipsis (...) button appears. Select the ellipsis and set
the Font value to Webdings, the Font Style to Bold, and the Size to 48.
Set the Text property of the label to the letter c.

The upper-left cell of the TableLayoutPanel now contains a black box centered on a blue
background.

７ Note

Webdings is an icon font that ships with the Windows operating system. In your
matching game, the player matches pairs of icons. This font displays the icons to
match. If the Webdings icons don't display properly on the form, set the
UseCompatibleTextRendering property of labels on the form to True.

Instead of c, try different letters in the Text property. An exclamation point is a

spider, an uppercase N is an eye, and a comma is a chili pepper.

3. Select your Label control and copy it to the next cell in the TableLayoutPanel. Select the
Ctrl+C keys, or on the menu bar, Edit > Copy. Then paste it by using Ctrl+V or Edit >
Paste.

A copy of the first Label appears in the second cell of the TableLayoutPanel. Paste it again,
and another Label appears in the third cell. Keep pasting Label controls until all of the
cells are filled.

This step completes the layout for your form.

Next step
Go to the next tutorial to learn how to assign a random icon to each label and add event
handlers to labels.

Add icons to your Matching Game

Tutorial: Add icons to your matching game
WinForms app
06/16/2025

In this series of four tutorials, you build a matching game, where the player matches pairs of
hidden icons.

In the matching game, a player selects a square to see an icon, then chooses another square. If
the icons match, they stay visible. If not, the game hides both icons. In this tutorial, you assign
icons to labels randomly. You set them to be hidden and then displayed when selected.

In this second tutorial, you learn how to:

＂ Add a Random object and a list of icons.

＂ Assign a random icon to each label.
＂ Add event handlers that show icons to the labels.

Prerequisites
This tutorial builds on the previous tutorial, Create a matching game application. If you haven't
done that tutorial, go through that one first.

Add a Random object and a list of icons

In this section, you create a set of matching symbols for the game. Each symbol is added to
two random cells in the TableLayoutPanel on the form.

You use new statements to create two objects. The first is a Random object that randomly
chooses cells in the TableLayoutPanel. The second object is a List<T> object. It stores the
randomly chosen symbols.

1. Open Visual Studio. Your MatchingGame project appears under Open recent.

2. Select [Link] if you're using C#, or [Link] if you're using Visual Basic. Then select
View > Code. As an alternative, select the F7 key or double-click Form1. The Visual Studio
IDE displays the code module for Form1.

3. In the existing code, add the following code.

C#
 C#

public partial class Form1 : Form

{
// Use this Random object to choose random icons for the squares
Random random = new Random();

// Each of these letters is an interesting icon

// in the Webdings font,
// and each icon appears twice in this list
List<string> icons = new List<string>()
{
"!", "!", "N", "N", ",", ",", "k", "k",
"b", "b", "v", "v", "w", "w", "z", "z"
};

If you're using C#, be sure you put the code after the opening curly brace and just after the
class declaration ( public partial class Form1 : Form ). If you're using Visual Basic, put the
code right after the class declaration ( Public Class Form1 ).

You can use list objects to keep track of different types of items. A list can hold numbers,
true/false values, text, or other objects. In your matching game, the list object has 16 strings,
one for each cell in the TableLayoutPanel panel. Each string is a single letter that corresponds
to the icons in the labels. These characters appear in the Webdings font as a bus, a bike, and
others.

７ Note

Lists can shrink and grow as needed, which is important in this program.

To learn more about lists, see List<T>. To see an example in C#, see A basic list example. To see
an example in Visual Basic, see Using a Simple Collection.

Assign a random icon to each label

Each time you run the program, it assigns the icons randomly to the Label controls on your
form by using an AssignIconsToSquares() method. This code uses the keyword foreach in C#
or For Each in Visual Basic.

1. Add the AssignIconsToSquares() method to [Link] or [Link] .

 C#

C#

/// <summary>
/// Assign each icon from the list of icons to a random square
/// </summary>
private void AssignIconsToSquares()
{
// The TableLayoutPanel has 16 labels,
// and the icon list has 16 icons,
// so an icon is pulled at random from the list
// and added to each label
foreach (Control control in [Link])
{
Label iconLabel = control as Label;
if (iconLabel != null)
{
int randomNumber = [Link]([Link]);
[Link] = icons[randomNumber];
// [Link] = [Link];
[Link](randomNumber);
}
}
}

You can enter this code just below the code you added in the previous section.

７ Note

One of the lines is commented out on purpose. You add it later in this procedure.

The AssignIconsToSquares() method iterates through each label control in the

TableLayoutPanel. It runs the same statements for each of them. The statements pull a random
icon from the list.

The first line converts the control variable to a label named iconLabel.
The second line is an if statement that checks to make sure the conversion worked. If
the conversion does work, the statements in the if statement run.
The first line in the if statement creates a variable named randomNumber that contains
a random number that corresponds to one of the items in the icons list. It uses the Next()
method of the Random object. The Next method returns the random number. This line
 also uses the Count property of the icons list to determine the range from which to
choose the random number.
The next line assigns one of the icons list items to the Text property of the label.
The next line hides the icons. The line is commented out here so you can verify the rest of
the code before proceeding.
The last line in the if statement removes the icon that has been added to the form from
the list.

1. Add a call to the AssignIconsToSquares() method to the Form1 constructor in [Link] .

This method fills the game board with icons. Constructors are called when you create an
object.

C#

public Form1()
{
InitializeComponent();

AssignIconsToSquares();
}

For Visual Basic, add the AssignIconsToSquares() method call to the Form1_Load method
in [Link] .

VB

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles [Link]

AssignIconsToSquares()
End Sub

For more information, see Constructors (C# programming guide) or Use constructors and
destructors.

2. Save your program and run it. It should show a form with random icons assigned to each
label.

 Tip

If the Webdings icons don't display properly on the form, set the
UseCompatibleTextRendering property of labels on the form to True.

3. Close your program, and then run it again. Different icons are assigned to each label.
 The icons are visible now because you haven't hidden them. To hide them from the
player, you can set each label's ForeColor property to the same color as its BackColor
property.

4. Stop the program. Remove the comment marks for the commented line of code inside
the loop in the AssignIconsToSquares() method.

C#

C#

[Link] = [Link];

If you run the program again, the icons seem to have disappeared. Only a blue background
appears. The icons are randomly assigned and are still there.
Add event handlers to labels
In this matching game, a player reveals a hidden icon, then a second one. If the icons match,
they stay visible. Otherwise, both icons are hidden again.

To get your game to work this way, add a Click event handler that changes the color of the
chosen label to match the background.

1. Open the form in the Windows Forms Designer. Select [Link] or [Link], and then
select View > Designer.

2. Choose the first label control to select it and double-click it to add a Click event handler
called label1 _Click() to the code.

3. Then, hold the Ctrl key while you select each of the other labels. Be sure that every label
is selected.

4. In the Properties window, select the Events button, which is a lightning bolt. For the Click
event, select label1_Click in the box.

5. Select the Enter key. The IDE adds a Click event handler called label1 _Click() to the code
in [Link] or [Link]. Because you selected all the labels, the handler is hooked to
each of the labels.

6. Fill in the rest of the code.

C#

C#

/// <summary>
/// Every label's Click event is handled by this event handler
 /// </summary>
/// <param name="sender">The label that was clicked</param>
/// <param name="e"></param>
private void label1_Click(object sender, EventArgs e)
{
Label clickedLabel = sender as Label;

if (clickedLabel != null)
{
// If the clicked label is black, the player clicked
// an icon that's already been revealed --
// ignore the click
if ([Link] == [Link])
return;

[Link] = [Link];
}
}

７ Note

If you copy and paste the label1_Click() code block rather than entering the code
manually, be sure to replace the existing label1_Click() code. Otherwise, you'll end up
with a duplicate code block.

Select Debug > Start Debugging to run your program. You should see an empty form with a
blue background. Choose any of the cells in the form. One of the icons should become visible.
Continue choosing different places in the form. As you choose the icons, they should appear.
Next steps
Advance to the next tutorial to learn how to change labels using a timer.

Use a timer in your Matching Game

Tutorial: Add reference variables and a
timer control to your matching game
WinForms app
Article • 10/21/2024

In this series of four tutorials, you build a matching game, where the player matches
pairs of hidden icons.

Your Matching Game program needs to track which Label controls the player chooses.
After a player chooses the first label, the program should show the icon. After the
second label is chosen, the program should display both icons for a brief time. Then it
hides both icons.

Your program keeps track of which Label you choose first and second by using reference
variables. A timer hides the icons and controls how long to show the icons

＂ Add label references.

＂ Add a timer.

Prerequisites
This tutorial builds on previous tutorials, Create a matching game application and Add
icons to your matching game. Complete those tutorials first.

Add label references

In this section, you'll add two reference variables to your code. They keep track of, or
refer to Label objects.

1. Add label references to your form by using the following code in [Link] or
[Link] .

C#

public partial class Form1 : Form

{
// firstClicked points to the first Label control
// that the player clicks, but it will be null
// if the player hasn't clicked a label yet
Label firstClicked = null;
 // secondClicked points to the second Label control
// that the player clicks
Label secondClicked = null;

If you're using C#, put the code after the opening curly brace and just after the class
declaration ( public partial class Form1 : Form ). If you're using Visual Basic, put the
code right after the class declaration ( Public Class Form1 ).

These statements don't cause Label controls to appear on the form because there's no
new keyword. When the program starts, both firstClicked and secondClicked are set

to null for C# or Nothing for Visual Basic.

2. Modify your Click event handler in [Link] or [Link] to use the new
firstClicked reference variable. Remove the last statement in the label1_Click()

event handler method ( [Link] = [Link]; ) and replace it

with the if statement as follows.

C#

/// <summary>
/// Every label's Click event is handled by this event handler
/// </summary>
/// <param name="sender">The label that was clicked</param>
/// <param name="e"></param>
private void label1_Click(object sender, EventArgs e)
{
Label clickedLabel = sender as Label;

if (clickedLabel != null)
{
// If the clicked label is black, the player clicked
// an icon that's already been revealed --
// ignore the click
if ([Link] == [Link])
return;

// If firstClicked is null, this is the first icon

// in the pair that the player clicked,
// so set firstClicked to the label that the player
// clicked, change its color to black, and return
if (firstClicked == null)
{
firstClicked = clickedLabel;
[Link] = [Link];
 return;
}
}
}

3. Save and run your program. Choose one of the label controls, and its icon appears.
Choose the next label control, and notice that nothing happens.

Only the first icon that's chosen appears. The other icons are invisible.

The program is already keeping track of the first label that the player chose. The
reference firstClicked isn't null in C# or Nothing in Visual Basic. When your if
statement finds that firstClicked isn't equal to null or Nothing , it runs the statements.

Add a timer
The Matching Game app uses a Timer control. A timer waits, and then fires an event,
referred to as a tick. A timer can start an action or repeat an action regularly.

In your program, the timer enables a player to choose two icons. If the icons don't
match, it hides the two icons again after a short period of time.

1. Select the Toolbox tab, in the Components category, double-click or drag the
Timer component to your form. The timer icon, called timer1, appears in a space
below the form.

2. Select the Timer1 icon to select the timer. In the Properties window, select the
Properties button to view properties.

3. Set the Interval property to 750, which is 750 milliseconds.

The Interval property tells the timer how long to wait between ticks, when it
triggers its Tick event. Your program calls the Start() method to start the timer after
the player chooses the second label.

4. Choose the timer control icon and then press Enter, or double-click the timer. The
IDE adds an empty Tick event handler to [Link] or [Link] . Replace the code
with the following code.

C#

/// <summary>
/// This timer is started when the player clicks
/// two icons that don't match,
/// so it counts three quarters of a second
/// and then turns itself off and hides both icons
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
 private void timer1_Tick(object sender, EventArgs e)
{
// Stop the timer
[Link]();

// Hide both icons

[Link] = [Link];
[Link] = [Link];

// Reset firstClicked and secondClicked

// so the next time a label is
// clicked, the program knows it's the first click
firstClicked = null;
secondClicked = null;
}

The Tick event handler does three things:

It makes sure the timer isn't running by calling the Stop() method.
It uses two reference variables, firstClicked and secondClicked , to make the
icons of the two labels that the player chose invisible again.
It resets the firstClicked and secondClicked reference variables to null in C#
and Nothing in Visual Basic.

5. Go to the code editor and add code to the top and bottom of the label1_Click()
event handler method in [Link] or [Link] . This code will check if the timer is
enabled, set the secondClicked reference variable, and start the timer. The
label1_Click() event handler method now looks as follows:

C#

/// <summary>
/// Every label's Click event is handled by this event handler
/// </summary>
/// <param name="sender">The label that was clicked</param>
/// <param name="e"></param>
private void label1_Click(object sender, EventArgs e)
{
// The timer is only on after two non-matching
// icons have been shown to the player,
// so ignore any clicks if the timer is running
if ([Link] == true)
return;

Label clickedLabel = sender as Label;

 if (clickedLabel != null)
{
// If the clicked label is black, the player clicked
// an icon that's already been revealed --
// ignore the click
if ([Link] == [Link])
return;

// If firstClicked is null, this is the first icon

// in the pair that the player clicked,
// so set firstClicked to the label that the player
// clicked, change its color to black, and return
if (firstClicked == null)
{
firstClicked = clickedLabel;
[Link] = [Link];
return;
}

// If the player gets this far, the timer isn't

// running and firstClicked isn't null,
// so this must be the second icon the player clicked
// Set its color to black
secondClicked = clickedLabel;
[Link] = [Link];

// If the player gets this far, the player

// clicked two different icons, so start the
// timer (which will wait three quarters of
// a second, and then hide the icons)
[Link]();
}
}

The code at the top of the method checks whether the timer was started by
checking the value of the Enabled property. If the player chooses the first and
second Label controls and the timer starts, choosing a third label won't do
anything.
The code at the bottom of the method sets the secondClicked reference variable
to track the second Label control. Then, it sets that label icon color to black to
make it visible. Then, it starts the timer in one-shot mode, so that it waits 750
milliseconds and then fires a single tick. The timer's Tick event handler hides the
two icons and resets the firstClicked and secondClicked reference variables. The
form is ready for the player to choose another pair of icons.

７ Note
 If you copy and paste the label1_Click() code block rather than entering the code
manually, be sure to replace the existing label1_Click() code. Otherwise, you'll
end up with a duplicate code block.

6. Save and run your program. Select a square and the icon becomes visible. Choose
another square. The icon appears briefly and then both icons disappear.

Your program now keeps track of the first and second icons that you choose. It uses the
timer to pause before making the icons disappear.

Next steps
Advance to the next tutorial to learn how to finish your Matching Game.

Show congratulations message for your Matching Game

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Tutorial: Display a message in your
matching game WinForms app
Article • 10/18/2024

In this series of four tutorials, you build a matching game, where the player matches
pairs of hidden icons.

In this tutorial, you revise your Matching Game to keep matched pairs visible and to
display a congratulations message when a player wins.

In this tutorial, you learn how to:

＂ Keep pairs visible.

＂ Verify if a player won.
＂ Try other features.

Prerequisites
This tutorial builds on these previous tutorials:

1. Create a matching game application

2. Add icons to your matching game
3. Add a timer in your matching game

Keep pairs visible

When a player matches a pair, the game should reset itself so that it no longer keeps
track of any labels that use the firstClicked and secondClicked reference variables. It
should not reset the colors for the two labels that were matched. Those labels continue
to be displayed.

1. Add the following if statement to the label_Click() event handler method. Put it
near the end of the code just above the statement where you start the timer.

C#

// If the player gets this far, the timer isn't

// running and firstClicked isn't null,
// so this must be the second icon the player clicked
// Set its color to black
secondClicked = clickedLabel;
 [Link] = [Link];

// If the player clicked two matching icons, keep them

// black and reset firstClicked and secondClicked
// so the player can click another icon
if ([Link] == [Link])
{
firstClicked = null;
secondClicked = null;
return;
}

// If the player gets this far, the player

// clicked two different icons, so start the
// timer (which will wait three quarters of
// a second, and then hide the icons)
[Link]();
}
}

The if statement checks whether the icon in the first label that the player chooses is
the same as the icon in the second label. If the icons are the same, the program runs its
three statements. The first two statements reset the firstClicked and secondClicked
reference variables. They no longer keep track of any of the labels. The third statement
is a return statement, which skips the rest of the statements in the method without
running them.

2. Run the program, and then start choosing squares on the form.
If you choose a pair that doesn't match, the timer's Tick event triggers. Both icons
disappear.

If you choose a matching pair, the new if statement runs. The return statement causes
the method to skip the code that starts the timer. The icons stay visible.

Verify if a player won

You've created a fun game. After a player wins, the game should end. This section adds
a method to verify whether the player won.

1. Add a CheckForWinner() method to the bottom of your code, below the

timer1_Tick() event handler.

C#

/// <summary>
/// Check every icon to see if it is matched, by
/// comparing its foreground color to its background color.
 /// If all of the icons are matched, the player wins
/// </summary>
private void CheckForWinner()
{
// Go through all of the labels in the TableLayoutPanel,
// checking each one to see if its icon is matched
foreach (Control control in [Link])
{
Label iconLabel = control as Label;

if (iconLabel != null)
{
if ([Link] == [Link])
return;
}
}

// If the loop didn’t return, it didn't find

// any unmatched icons
// That means the user won. Show a message and close the form
[Link]("You matched all the icons!", "Congratulations");
Close();
}

The method uses another foreach loop in C# or For Each loop in Visual Basic to go
through each label in the TableLayoutPanel. It checks each label's icon color to verify
whether it matches the background. If the colors match, the icon remains invisible, and
the player hasn't matched all of the remaining icons.

In that case, the program uses a return statement to skip the rest of the method. If the
loop gets through all of the labels without executing the return statement, that means
that all of the icons on the form were matched. The program shows a MessageBox to
congratulate the player on winning, and then calls the Close() method to end the
game.

2. Have the label's Click event handler call the new CheckForWinner() method.

C#

// If the player gets this far, the timer isn't

// running and firstClicked isn't null,
// so this must be the second icon the player clicked
// Set its color to black
secondClicked = clickedLabel;
[Link] = [Link];

// Check to see if the player won

CheckForWinner();
 // If the player clicked two matching icons, keep them
// black and reset firstClicked and secondClicked
// so the player can click another icon
if ([Link] == [Link])
{
firstClicked = null;
secondClicked = null;
return;
}

Be sure that your program checks for a winner immediately after it shows the second
icon that the player chooses. Look for the line where you set the second chosen icon's
color, and then call the CheckForWinner() method right after that line.

3. Save and run the program. Play the game and match all of the icons. When you
win, the program displays a congratulatory message.

After you select OK, the Matching Game closes.

Try other features
Your Matching Game is complete. You can add more features to make this game more
challenging and interesting. Here are some options.

Replace the icons and colors with ones you choose.

Try looking at the label's ForeColor property.

Add a game timer that tracks how long it takes for the player to win.

You can add a label to display the elapsed time on the form. Place it above the
TableLayoutPanel. Add another timer to the form to track the time. Use code to
start the timer when the player starts the game, and stop the timer after they
match the last two icons.

Add a sound when the player finds a match, another sound when the player
uncovers two icons that don't match, and a third sound when the program hides
the icons again.

To play sounds, you can use the [Link] namespace. For more information,
see Play sounds in Windows Forms app (C#) or How to play audio in Visual
Basic .

Make the game more difficult by making the board bigger.

You'll need to do more than just add rows and columns to the TableLayoutPanel.
You also need to consider the number of icons you create.

Make the game more challenging by hiding the first icon if the player is too slow
to respond.

Next steps
Congratulations! You've completed this series of tutorials. You've done these
programming and design tasks in the Visual Studio IDE:

Stored objects, such as icons, in a list

Used a loop in C# or Visual Basic to iterate through a list
Kept track of state by using reference variables
Built an event handler to respond to events for multiple objects
Added a timer that counts down and fires an event

Advance to this article for a deep dive into Windows Forms Designer.
 Tutorial: Get started with Windows Forms Designer

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Run a C# program or app in Visual
Studio
Article • 12/12/2024

How to run a program or start an app depends on what you start from, the type of
program or app, and whether you want to run under the debugger. In the simplest case,
to build and run an open project in Visual Studio:

Press F5, choose Debug > Start with debugging from the Visual Studio menu, or
select the green Start arrow and project name on the Visual Studio toolbar.
Or, to run without debugging, press Ctrl+F5 or choose Debug > Start without
debugging from the Visual Studio menu.

Start from a project

You can run a C# project ( .csproj file) if it's a runnable program. If the project contains
a C# file with a Main method, and its output is an executable or .exe file, it will
probably run if it builds successfully. If your project output is an executable file, and
doesn't have a Main method, program executions starts with top-level statements. See
Programs without Main methods. Some project types, such as class libraries, are not
runnable. Class libraries are not runnable on their own, but they can be referenced by
other projects.

If you're not sure if the project you have is an executable file, select the project node in
Solution Explorer, and open the project properties. Either right-click on the node to
bring up the context menu, and choose Properties, or press Alt+Enter. In the
Application section, look for the Output type. If it's Console Application, then it's a
runnable program.

1. Open the project. To do so, you can double-click or tap on the .csproj file in
Windows File Explorer, or choose Open a project in Visual Studio, browse to find
the .csproj file, and select the file.

2. After the project loads in Visual Studio, if your Visual Studio solution has more
than one project, make sure to set the project with the Main method as the startup
project. To set the startup project, right-click on the project name or node in
Solution Explorer and choose Set as Startup Project from the context menu.
 3. To run the program, press Ctrl+F5, select Debug > Start without debugging from
the top menu, or select the green Start button.

Visual Studio tries to build and run your project. At the bottom of the Visual Studio
screen, the build output appears in the Output window, and any build errors
appear in the Error List window.

If the build succeeds, the app runs as appropriate for the type of project. Console
apps run in a terminal window, Windows desktop apps start in a new desktop
window, and web apps run in a browser hosted by IIS Express.

Start from code

If have a runnable C# code sample in mind such as this one , or a runnable C# code
file or files on disk, follow these steps.
First make sure the code is a runnable program from a trusted source. Any app with a
Main method is probably a runnable program, but with the current version of C#,

programs without Main methods with top-level statements can also run. You can use the
Console Application template to create a project in Visual Studio, and then copy the
code intoit.

A single code file

1. Start Visual Studio, choose Create a new project, and choose the C# Console App
project.
2. Replace all the code in the project .cs file with the contents of your code or file. If
the code you want to use is on the web, or in a single file, it might be easiest to
select the code, copy it to the clipboard, and paste it into a code file in the Visual
Studio project.
3. Rename the project .cs file to match your code file name.

Several code files on disk

1. Start Visual Studio, and create a new project of the appropriate type. Use the C#
Console App if you're not sure.
2. In the new project, replace all the code in the project code file with the contents of
your first code listing or file.
3. Rename the project code file to match your code file name.
4. For each remaining code file:
a. Right-click the project node in Solution Explorer and choose Add > Existing
Item, or select the project and press Shift+Alt+A.
b. Browse to and select the code file to import it into the project.

Several files in a folder

If you have a folder with many files, first check for a project or solution file. Programs
that Visual Studio creates have project and solution files. In Windows File Explorer, look
for files with the .csproj or .sln extension. Double-click the .csproj file to open it in
Visual Studio. See Start from a Visual Studio solution or project.

If the code is from another development environment, there's no project file. Open the
folder by choosing Open > Folder in Visual Studio. See Develop code without projects
or solutions.

Start from a GitHub or Azure DevOps repo

If the code you want to run is in a GitHub or Azure DevOps repo, you can use Visual
Studio to open the project directly from the repo. See Open a project from a repo.

Run the program

To start building the program, press the green Start button on the Visual Studio toolbar,
or press F5 or Ctrl+F5. Using the Start button or F5 runs the program under the
debugger.

Visual Studio attempts to build and run the code in your project. If a build doesn't
succeed, see the following sections for some ideas on how to get the project to build
successfully.

Troubleshooting
Your code might have errors. Or the code might be correct, but maybe it depends on
missing assemblies or NuGet packages, or targets a different version of .NET. In those
cases, you might be able to easily fix the build.

Add references
To build properly, the code must be correct and have the right references to libraries or
other dependencies. Red squiggly underlines in code or entries in the Error List show
errors even before you compile and run the program. If the errors relate to unresolved
names, you probably need to add a reference or a using directive, or both. If the code
references any missing assemblies or NuGet packages, you need to add those
references to the project.

Visual Studio tries to help you identify missing references. When a name is unresolved, a
light bulb icon appears in the editor. Select the light bulb to see suggestions on how to
fix the issue. Fixes might be to:

Add a using directive.

Add a reference to an assembly.
Install a NuGet package.

Add a using directive

Here's an example of a missing using directive. You can add using System; to the start
of the code file to resolve the unresolved name Console :
More recent of C# support implicit using directives for some commonly used
namespaces, so if you chose that option when creating a project, you don't need them.

Add an assembly reference

.NET references can be assemblies or NuGet packages. In source code, the publisher or
author usually explains what assemblies the code requires and what packages it
depends on. To add a reference to a project manually, right-click the References node in
Solution Explorer and choose Add Reference. In the Reference Manager, locate and
add the required assembly.

You can find assemblies and add references by following the instructions in Add or
remove references by using the Reference Manager.
Add a NuGet package
If Visual Studio detects a missing NuGet package, a light bulb appears and gives you the
option to install the package:

If that doesn't solve the issue or Visual Studio can't locate the package, try searching for
the package online. See Install and use a NuGet package in Visual Studio.

Use the right version of .NET

Because different versions of the .NET Framework have some backward compatibility, a
newer framework might run code written for an older framework without any changes.
But sometimes you need to target a specific .NET Framework version. You might need to
install a specific version of the .NET Framework or .NET Core. See Modify Visual Studio.

To change the target .NET Framework version, see Change the target framework. For
more information, see Troubleshooting .NET Framework targeting errors.

Next steps
Explore the Visual Studio development environment by reading Welcome to the
Visual Studio IDE.
Create your first C# app.

Feedback
Was this page helpful?  Yes  No
Provide product feedback | Ask the community
Tutorial: Open a project from a repo
07/30/2025

In this tutorial, you use Visual Studio to connect to a repository, or repo, for the first time, clone
it, and then open a project from it.

In this tutorial, you learn how to:

＂ Open a project from a GitHub repo

＂ Browse to an Azure DevOps repo

Prerequisites
If you don't have Visual Studio yet, go to Visual Studio downloads to install it for free.

Open a project from a GitHub repo

Visual Studio makes it easy to open a project from a repo. You can do so when you start Visual
Studio, or you can do so directly from within the Visual Studio IDE.

Here's how.

Use the start window

1. Open Visual Studio.

2. On the start window, select Clone a repository.

 

3. Enter or type the repository location, and then select Clone.

4. If you're not already signed in, you might be prompted to sign into Visual Studio or your
GitHub account.

 Tip
 For more information about signing in to Visual Studio, see Sign in or switch Visual
Studio user accounts. For specific information about how to use your GitHub
account to sign in, see Add your GitHub accounts to your Visual Studio keychain.
You might receive a trust notification. For more information, see Configure trust
settings for files and folders.

View files in Solution Explorer

Visual Studio loads the solutions from the repository by using the Folder View in Solution
Explorer.

You can view a solution in Solution View by double-clicking its .sln file.

You can select Switch Views to switch between folder view and solution view.

 Tip
 You can change from the default Folder View to Solution View from the Git menu. Select
Settings > Source Control > Git Global Settings > Automatically load the solution when
opening a Git repository.

Open a project locally from a previously cloned GitHub repo

1. Open Visual Studio.

2. On the start window, select Open a project or solution.

Visual Studio opens an instance of File Explorer, where you can browse to your solution or
project, and then select it to open it.

 Tip

If you opened the project or solution recently, select it from the Open recent section.

Start coding!

Use the IDE

You can also use the Git menu or the Select Repository control in the Visual Studio IDE to
interact with a repository's folders and files.
Here's how.

To clone a repo and open a project

1. In the Visual Studio IDE, select the Git menu, and then select Clone Repository.

2. Follow the prompts to connect to the Git repository that includes the files that you're
looking for.

To open local folders and files

1. In the Visual Studio IDE, select the Git menu, select Local Repositories, and then select
Open Local Repository.

2. Follow the prompts to connect to the Git repository that has the files that you're looking
for.

Browse to an Azure DevOps repo

Here's how to browse to and clone an Azure DevOps repo by using Visual Studio.

1. Open Visual Studio.

2. On the start window, select Clone a repository.

 

3. In the Browse a repository section, select Azure DevOps.

4. Follow the prompts to clone an Azure DevOps repo that includes the files that you're
looking for, and then open your project.

Related content
Feel free to dive into any of the following language-specific tutorials:

Visual Studio tutorials | C#

Visual Studio tutorials | Visual Basic
Visual Studio tutorials | C++
Visual Studio tutorials | Python
Visual Studio tutorials | JavaScript, TypeScript, and [Link]

For more information, see:

About Git in Visual Studio

Brpwse a repo
Manage a repo
Learn to use the code editor with C#
08/22/2024

In this 10-minute introduction to the code editor in Visual Studio, we'll add code to a file to
look at some of the ways that Visual Studio makes writing, navigating, and understanding C#
code easier.

If you haven't already installed Visual Studio, go to the Visual Studio downloads page to
install it for free.

This article assumes you're already familiar with C#. If you aren't, we suggest you look at a
tutorial such as Get started with C# and [Link] Core in Visual Studio first.

 Tip

To follow along with this article, make sure you have the C# settings selected for Visual
Studio. For information about selecting settings for the integrated development
environment (IDE), see Select environment settings.

Create a new code file

Start by creating a new file and adding some code to it.

1. Open Visual Studio. Press Esc, or choose Continue without code on the start window, to
open the development environment.

2. From the File menu on the menu bar, choose New > File, or press Ctrl+N.

3. In the New File dialog box, under the General category, choose Visual C# Class, and then
choose Open.

A new file opens in the editor with the skeleton of a C# class. You don't have to create a
full Visual Studio project to gain some of the benefits that the code editor offers—all you
need is a code file.
Use code snippets
Visual Studio provides useful code snippets that you can use to quickly and easily generate
commonly used code blocks. Code snippets are available for different programming languages
including C#, Visual Basic, and C++.

Let's add the C# void Main snippet to our file.

1. Place your cursor just above the final closing brace } in the file, and type the characters
svm . svm stands for static void Main —don't worry if you don't know what that means

yet.

A pop-up dialog box appears with information about the svm code snippet.

2. Press Tab twice to insert the code snippet.

 You'll see the static void Main() method signature get added to the file. The Main()
method is the entry point for C# applications.

Available code snippets vary for different programming languages. You can look at the
available code snippets for your language by choosing Edit > IntelliSense > Insert Snippet or
pressing Ctrl+K, Ctrl+X, and then choosing the folder for your programming language. For C#,
the snippet list looks like this:

The list includes snippets for creating a class, a constructor, a for loop, an if or switch
statement, and more.

Comment out code

The toolbar, which is the row of buttons under the menu bar in Visual Studio, helps make you
more productive as you code. For example, you can toggle IntelliSense completion mode,
increase or decrease a line indent, or comment out code that you don't want to compile.

Let's comment out some code.

1. Paste the following code into the Main() method body.

 C#

// someWords is a string array.

string[] someWords = {
"the",
"quick",
"brown",
"fox",
"jumps"
};

string[] moreWords = {
"over",
"the",
"lazy",
"dog"
};

// Alphabetically sort the words.

IEnumerable<string> query = from word in someWords
orderby word
select word;

2. We're not using the moreWords variable, but we might use it later so we don't want to
delete it. Instead, we'll comment out those lines. Select the entire definition of moreWords
down to the closing semicolon, and then choose the Comment out the selected lines
button on the toolbar. If you prefer to use the keyboard, press Ctrl+E, Ctrl+C.

The C# comment characters // are added to the beginning of each selected line to
comment out the code.

Collapse code blocks

We don't want to see the empty constructor that was generated for Class1 , so to unclutter our
view of the code, let's collapse it. Choose the small gray box with the minus sign inside it in the
margin of the first line of the constructor. Or, if you prefer to use the keyboard, place the
cursor anywhere in the constructor code and press Ctrl+M, Ctrl+M.
The code block collapses to just the first line, followed by an ellipsis ( ... ). To expand the code
block again, select the same gray box that now has a plus sign in it, or press Ctrl+M, Ctrl+M
again. This feature is called Outlining and is especially useful when you're collapsing long
methods or entire classes.

View symbol definitions

The Visual Studio editor makes it easy to inspect the definition of a type, method, or variable.
One way is to go to the definition, in whichever file has it, by choosing Go to Definition or
pressing F12 anywhere a symbol is referenced. An even quicker way that doesn't move your
focus away from the code you're working on is to use Peek Definition.

Let's peek at the definition of the string type.

1. Right-click on any occurrence of string and choose Peek Definition from the content
menu. Or, press Alt+F12.

A pop-up window appears with the definition of the String class. You can scroll within
the pop-up window, or even peek at the definition of another type from the peeked code.

2. Close the peek definition window by choosing the small box with an "x" at the top right
of the pop-up window.

Use IntelliSense to complete words

IntelliSense is an invaluable resource when you're coding. It can show you information about
available members of a type, or parameter details for different overloads of a method. You can
also use IntelliSense to complete a word after you type enough characters to disambiguate it.

Let's add a line of code to print out the ordered strings to the console window, which is the
standard place for output from the program to go.

1. Below the query variable, start typing the following code:

 C#

foreach (string str in qu

You'll see an IntelliSense pop-up appear with information about the query symbol.

2. To insert the rest of the word query by using IntelliSense word completion, press Tab.

3. Finish off the code block to look like the following code. You can practice further with
code snippets by entering cw and then pressing Tab twice to generate the
[Link] statement.

C#

foreach (string str in query)

{
[Link](str);
}

Refactor a name
Nobody gets code right the first time, and one of the things you might have to change is the
name of a variable or method. Let's try out Visual Studio's refactor functionality to rename the
someWords variable to unsortedWords .

1. Place your cursor over the definition of the someWords variable, and choose Rename from
the right-click or context menu, or press F2.

A Rename dialog box appears at the top right of the editor.

 2. Enter the desired name unsortedWords. You'll see that the reference to unsortedWords in
the query assignment statement is also automatically renamed. Before you press Enter,
select the Include comments checkbox in the Rename pop-up box.

3. Press Enter, or choose Apply in the Rename dialog box.

Both occurrences of someWords in your code have been renamed, as well as the text
someWords in your code comment.

Next steps
Learn about projects and solutions

See also
Code snippets
Navigate code
Outlining
Go To Definition and Peek Definition
Refactoring
Use IntelliSense
Compile and build in Visual Studio
Article • 02/03/2025

For a first introduction to building within the IDE, see Walkthrough: Building an application.

You can use any of the following methods to build an application: the Visual Studio IDE, the
MSBuild command-line tools, and Azure Pipelines:

ﾉ Expand table

Build Method Benefits

IDE - Create builds immediately and test them in a debugger.

- Run multi-processor builds for C++ and C# projects.
- Customize different aspects of the build system.

CMake - Build C++ projects using the CMake tool

- Use the same build system across Linux and Windows platforms.

MSBuild command - Build projects without installing Visual Studio.

line - Run multi-processor builds for all project types.
- Customize most areas of the build system.

Azure Pipelines - Automate your build process as part of a continuous integration/continuous

delivery pipeline.
- Apply automated tests with every build.
- Employ virtually unlimited cloud-based resources for build processes.
- Modify the build workflow and create build activities to perform deeply
customized tasks.

The documentation in this section goes into further details of the IDE-based build process. For
more information on the other methods, see CMake, MSBuild and Azure Pipelines, respectively.

Building from the IDE

When you create a project, Visual Studio created default build configurations for the project
and the solution that contains the project. These configurations define how the solutions and
projects are built and deployed. Project configurations in particular are unique for a target
platform (such as Windows or Linux) and build type (such as debug or release). You can edit
these configurations however you like, and can also create your own configurations as needed.

For a first introduction to building within the IDE, see Walkthrough: Building an application.

Next, see Building and cleaning projects and solutions in Visual Studio to learn about the
different customizations you can make to the process. Customizations include changing output
directories, specifying custom build events, managing project dependencies, managing build
log files, and suppressing compiler warnings.

From there, you can explore a variety of other tasks:

Understand build configurations

Configure projects to target platforms
Manage project and solution properties.
Specify build events in C# and Visual Basic
Set build options
Build multiple projects in parallel

Related content
Building (compiling) website projects
CMake projects in Visual Studio
Tutorial: Learn to debug C# code using
Visual Studio
Article • 10/24/2024

This article introduces the features of the Visual Studio debugger in a step-by-step
walkthrough. If you want a higher-level view of the debugger features, see First look at
the debugger. When you debug your app, it usually means that you're running your
application with the debugger attached. When you do this task, the debugger provides
many ways to see what your code is doing while it runs. You can step through your code
and look at the values stored in variables, you can set watches on variables to see when
values change, you can examine the execution path of your code, see whether a branch
of code is running, and so on. If this exercise is the first time that you've tried to debug
code, you might want to read Debugging for absolute beginners before going through
this article.

Although the demo app is C#, most of the features are applicable to C++, Visual Basic,
F#, Python, JavaScript, and other languages supported by Visual Studio (F# doesn't
support Edit-and-continue. F# and JavaScript don't support the Autos window). The
screenshots are in C#.

In this tutorial, you will:

＂ Start the debugger and hit breakpoints.

＂ Learn commands to step through code in the debugger
＂ Inspect variables in data tips and debugger windows
＂ Examine the call stack

Prerequisites
You must have Visual Studio 2022 installed and the .NET desktop development
workload.

If you haven't already installed Visual Studio, go to the Visual Studio downloads page
to install it for free.

If you already have Visual Studio but the .NET desktop development workload isn't
installed, go to Tools > Get Tools and Features..., which launches the Visual Studio
Installer. In the Visual Studio Installer, choose the .NET desktop development workload,
then choose Modify.
Create a project
First, you create a .NET Core console application project. The project type comes with all
the template files you need, before you've even added anything!

1. Open Visual Studio. If the start window isn't open, select File > Start Window.

2. On the start window, select Create a new project.

3. On the Create a new project window, enter console in the search box. Next, choose
C# from the Language list, and then choose Windows from the Platform list.

After you apply the language and platform filters, choose the Console App
template, and then select Next.

７ Note

If you don't see the Console App template, you can install it from the Create a
new project window. In the Not finding what you're looking for? message,
choose the Install more tools and features link. Then, in the Visual Studio
Installer, choose the .NET desktop development workload.

4. In the Configure your new project window, enter GetStartedDebugging in the

Project name box. Then, select Next.
 5. In the Additional information window, ensure .NET 8.0 is selected in the
Framework dropdown menu, and then select Create.

Visual Studio opens your new project.

Create the application

In [Link], replace all of the default code with the following code:

C#

using System;

class ArrayExample
{
static void Main()
{
char[] letters = { 'f', 'r', 'e', 'd', ' ', 's', 'm', 'i', 't', 'h'};
string name = "";
int[] a = new int[10];
for (int i = 0; i < [Link]; i++)
{
name += letters[i];
a[i] = i + 1;
SendMessage(name, a[i]);
}
[Link]();
}

static void SendMessage(string name, int msg)

{
[Link]("Hello, " + name + "! Count to " + msg);
}
}

Start the debugger!

Mostly, we use keyboard shortcuts here, because it's a fast way to execute debugger
commands. Equivalent commands, such as toolbar or menu commands, are also noted.

1. To start the debugger, select F5, or choose the Debug Target button in the
Standard toolbar, or choose the Start Debugging button in the Debug toolbar, or
choose Debug > Start Debugging from the menu bar.
 F5 starts the app with the debugger attached to the app process. Since we haven't
done anything special to examine the code, the app runs to completion and you
see the console output.

Windows Command Prompt

Hello, f! Count to 1
Hello, fr! Count to 2
Hello, fre! Count to 3
Hello, fred! Count to 4
Hello, fred ! Count to 5
Hello, fred s! Count to 6
Hello, fred sm! Count to 7
Hello, fred smi! Count to 8
Hello, fred smit! Count to 9
Hello, fred smith! Count to 10

2. To stop the debugger, select Shift+F5, or choose the Stop Debugging button in
the Debug toolbar, or choose Debug > Stop Debugging from the menu bar.

3. In the console window, select any key to close the console window.

Set a breakpoint and start the debugger

1. In the for loop of the Main function, set a breakpoint by clicking in the left margin
on the following line of code:

name += letters[i];

A red circle appears where you set the breakpoint.

Breakpoints are an essential feature of reliable debugging. You can set breakpoints
where you want Visual Studio to pause your running code so you can look at the
values of variables or the behavior of memory, or know whether or not a branch of
code is getting run.
 2. To start debugging, select F5, or choose the Debug Target button in the Standard
toolbar, or choose the Start Debugging button in the Debug toolbar, or choose
Debug > Start Debugging from the menu bar. The app starts and the debugger
runs to the line of code where you set the breakpoint.

The yellow arrow points to the statement on which the debugger paused. App
execution is paused at the same point, with the statement not yet executed.

When the app isn't running, F5 starts the debugger, which runs the app until it
reaches the first breakpoint. If the app is paused at a breakpoint, then F5 will
continue running the app until it reaches the next breakpoint.

Breakpoints are a useful feature when you know the line or section of code that
you want to examine in detail. For more about the different types of breakpoints
you can set, such as conditional breakpoints, see Using breakpoints.

Navigate code and inspect data by using data

tips
1. While code execution is paused on the name += letters[i] statement, hover over
the letters variable to see a data tip showing the array size and element type,
char[10] .

７ Note

One of the most useful features of the debugger is its ability to inspect a
variable. Often, when you're trying to debug an issue, you're attempting to
 find out whether variables have values that you expect at a particular time.
Viewing data tips is a good way to check that.

2. Expand the letters variable to view all its array elements and their values.

3. Hover over the name variable to see its current value, which is an empty string.

4. To advance the debugger to the next statement, select F10, or choose the Step
Over button in the Debug toolbar, or choose Debug > Step Over from the menu
bar. Select F10 twice more to move past the SendMessage method call.

F10 advances the debugger without stepping into function or methods, although
their code still executes. In this way, we skipped debugging the code in the
SendMessage method, which we're not interested in right now.

5. To iterate through the for loop a few times, select F10 repeatedly. During each
loop iteration, pause at the breakpoint, and then hover over the name variable to
check its value in the data tip.

The value of the variable changes with each iteration of the for loop, showing
values of f , then fr , then fre , and so on. To advance the debugger through the
loop faster, select F5 instead, which advances to your breakpoint instead of the
next statement.

6. While code execution is paused in the for loop of the Main method, select F11, or
choose the Step Into button from the Debug toolbar, or choose Debug > Step
Into from the menu bar, until you reach the SendMessage method call.

The debugger should be paused at this line of code:

 SendMessage(name, a[i]);

7. To step into the SendMessage method, select F11 again.

The yellow pointer advances into the SendMessage method.

F11 helps you examine the execution flow of your code in more depth. To step into
a method from a method call, select F11. By default, the debugger skips stepping
into nonuser methods. To learn about debugging nonuser code, see Just My Code.

Once you've finished debugging the SendMessage method, you're ready to return
to the for loop of the main method.

8. To leave the SendMessage method, select Shift+F11, or choose the Step Out button
in the Debug toolbar, or choose Debug > Step Out from the menu bar.

Step Out resumes app execution and advances the debugger until the current
method or function returns.

You see the yellow pointer back in the for loop of the Main method, paused at the
SendMessage method call. For more information on different ways to move through

your code, see Navigate code in the debugger.

Navigate code using Run to Click

1. Select F5 to advance to the breakpoint again.

2. In the code editor, hover over the [Link] method call in the
SendMessage method until the Run to Click button appears. The tooltip for the

button shows "Run execution to here."

 3. Choose the Run to Click button. Alternatively, with your cursor at the
[Link] statement, select Ctrl+F10. Or, right-click the

[Link] method call, and choose Run to Cursor from the context menu.

The debugger advances to the [Link] method call.

Using the Run to Click button is similar to setting a temporary breakpoint, and is
handy for getting around quickly within a visible region of your app code in an
open file.

Restart your app quickly

To rerun your app from the beginning in the debugger, select Ctrl+Shift+F5, or choose
the Restart button in the Debug toolbar, or choose Debug > Restart from the menu
bar.

Restart stops the debugger and then restarts it, in one step. When the debugger
restarts, it runs to the first breakpoint, which is the breakpoint you previously set inside
the for loop, and then pause.

Inspect variables with the Autos and Locals

windows
The Autos and Locals windows show variable values while you're debugging. The
windows are only available during a debug session. The Autos window shows variables
used on the current line that the debugger is at and the preceding line. The Locals
window shows variables defined in the local scope, which is usually the current function
or method.
 1. While the debugger is paused, view the Autos window at the bottom of the code
editor.

If the Autos window is closed, select Ctrl+D, A, or choose Debug > Windows >
Autos from the menu bar.

2. With the debugger still paused, view the Locals window, in a tab next to the Autos
window.

If the Locals window is closed, select Ctrl+D, L, or choose Debug > Windows >
Locals.

3. In the Locals window, expand the letters variable to see its array elements and
their values.

For more about the Autos and Locals windows, see Inspect variables in the Autos and
Locals windows.

Set a watch
You can specify a variable, or an expression, that you want to keep an eye on as you step
through code—by adding it to the Watch window.

1. While the debugger is paused, right-click the name variable and choose Add
Watch.

The Watch window opens by default at the bottom of the code editor.

2. Now that you've set a watch on the name variable, step through your code to see
the value of the name variable change with each for loop iteration.

Unlike the other variable windows, the Watch window always shows the variables
that you're watching. Variables that are out of scope are displayed as unavailable.
For more information about the Watch window, see Watch variables with Watch
windows.

Examine the call stack

The Call Stack can help you understand the execution flow of your app, by showing the
order in which methods and functions are getting called.

1. While the debugger is paused in the for loop, view the Call Stack window, which
opens by default in the lower right pane of the code editor.

If the Call Stack window is closed, select Ctrl+D, C, or choose Debug > Windows >
Call Stack from the menu bar.

In the Call Stack window, you see the yellow pointer at the current Main method.

2. Select F11 a few times until you see the debugger pause in the SendMessage
method.

The top line of the Call Stack window shows the current function, which is the
SendMessage method. The second line shows that the SendMessage method was

called from the Main method.

７ Note

The Call Stack window is similar to the Debug perspective in some IDEs, like
Eclipse.

In the Call Stack window, you can double-click a line of code to go to that source
code, which changes the current scope under inspection by the debugger. This
action doesn't advance the debugger.

You can also use right-click menus from the Call Stack window to do other things.
For example, you can insert breakpoints into specified functions, advance the
debugger by using Run to Cursor, or go to source code.

For more about the Call Stack, see How to: Examine the Call Stack.
Next steps
In this tutorial, you've learned how to start the debugger, step through code, and
inspect variables. You might want to get a high-level look at debugger features along
with links to more information.

First look at the debugger

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Get started with unit testing
Article • 01/21/2025

Use Visual Studio to define and run unit tests to maintain code health, ensure code
coverage, and find errors and faults before your customers do. Run your unit tests
frequently to make sure your code is working properly.

In this article, the code uses C# and C++, illustrations are in C#, but the concepts and
features apply to .NET languages, C++, Python, JavaScript, and TypeScript.

Create unit tests

This section describes how to create a unit test project.

1. Open the project that you want to test in Visual Studio.

For the purposes of demonstrating an example unit test, this article tests a simple
"Hello World" C# or C++ Console project named HelloWorld. The sample code for
such a project is as follows:

.NET

namespace HelloWorld
{
public class Program
{
public static void Main()
{
[Link]("Hello World!");
}
}
}

2. In Solution Explorer, select the solution node. Then, from the top menu bar, select
File > Add > New Project.

3. In the new project dialog box, find the unit test project to use.

Type test in the search box to find a unit test project template for the test
framework you want to use, such as MSTest (C#) or the Native Unit Test project
(C++), and select it.
Starting in Visual Studio 2017 version 14.8, the .NET languages include built-in
templates for NUnit and xUnit. For C++, in this example select the Native Unit Test
project, which uses Microsoft Native Unit Test Framework. (To use a different C++
test framework, see Writing unit tests for C/C++). For Python, see Set up unit
testing in Python code to set up your test project.

 Tip

For C# only, you can create unit test projects from code using a faster
method. For more information, see Create unit test projects and test
methods. To use this method with .NET Core or .NET Standard, Visual Studio
2019 or later is required.

The following illustration shows an MSTest unit test, which is supported in .NET.

Click Next, choose a name for the test project, and then click Create.

The project is added to your solution.

4. In the unit test project, add a reference to the project you want to test by right-
clicking on References or Dependencies and then choosing Add Reference or Add
Project Reference.

5. Select the project that contains the code you'll test and click OK.

6. Add code to the unit test method.

For example, you might use the following code by selecting the correct
documentation tab that matches your test framework: MSTest, NUnit, or xUnit
(supported on .NET only), or C++ Microsoft Native Unit Test Framework.
 MSTest

using [Link];
using [Link];
using System;

namespace HelloWorldTests
{
[TestClass]
public class UnitTest1
{
private const string Expected = "Hello World!";
[TestMethod]
public void TestMethod1()
{
using (var sw = new StringWriter())
{
[Link](sw);
[Link]();

var result = [Link]().Trim();

[Link](Expected, result);
}
}
}
}

Run unit tests

1. Open Test Explorer.

To open Test Explorer, choose Test > Test Explorer from the top menu bar (or press
Ctrl + E, T).

2. Run your unit tests by clicking Run All (or press Ctrl + R, V).
 After the tests have completed, a green check mark indicates that a test passed. A
red "x" icon indicates that a test failed.

 Tip

You can use Test Explorer to run unit tests from the built-in test framework
(MSTest) or from third-party test frameworks. You can group tests into categories,
filter the test list, and create, save, and run playlists of tests. You can also debug
tests and analyze test performance and code coverage.

View live unit test results (Visual Studio

Enterprise)
If you are using the MSTest, xUnit, or NUnit testing framework in Visual Studio 2017 or
later, you can see live results of your unit tests.

７ Note

To follow these steps, Visual Studio Enterprise is required, along with .NET code and
one of the following test frameworks: MSTest, xUnit, or NUnit.

1. Turn live unit testing from the Test menu by choosing Test > Live Unit Testing >
Start.
2. View the results of the tests within the code editor window as you write and edit
code.

3. Click a test result indicator to see more information, such as the names of the tests
that cover that method.
For more information about live unit testing, see Live unit testing.

Use a third-party test framework

You can run unit tests in Visual Studio by using third-party test frameworks such as
NUnit, Boost, or Google C++ Testing Framework, depending on your programming
language. To use a third-party framework:

Use the NuGet Package Manager to install the NuGet package for the framework
of your choice.

(.NET) Starting in Visual Studio 2017 version 14.6, Visual Studio includes pre-
configured test project templates for NUnit and xUnit test frameworks. The
templates also include the necessary NuGet packages to enable support.

(C++) In Visual Studio 2017 and later versions, some frameworks like Google C++
Testing Framework are already included. For more information, see Write unit tests
for C/C++ in Visual Studio.

To add a unit test project:

1. Open the solution that contains the code you want to test.

2. Right-click on the solution in Solution Explorer and choose Add > New Project.

3. Select a unit test project template.

In this example, select NUnit

 The project template includes NuGet references to NUnit and NUnit3TestAdapter.

4. Add a reference from the test project to the project that contains the code you
want to test.

Right-click on the project in Solution Explorer, and then select Add > Reference.
(You can also add a reference from the right-click menu of the References or
 Dependencies node.)

5. Add code to your test method.

6. Run the test from Test Explorer or by right-clicking on the test code and choosing
Run Test(s) (or Ctrl + R, T).

Next steps
Unit test basics

Create and run unit tests for managed code

Write unit tests for C/C++

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community

Visual Studio deployment documentation
Learn how to deploy applications, services, and components using Visual Studio

About deployment

ｅ OVERVIEW

First look at deployment

Overview of Publish

[Link] web apps

ｇ TUTORIAL

Publish tool

Get publish settings from IIS

Publish with Git

C++ applications

ｃ HOW-TO GUIDE

Installer package

Setup project

.NET./.NET Core apps

ｇ TUTORIAL

Publish tool

ClickOnce

Installer package

ｃ HOW-TO GUIDE
Package a desktop app for Windows Store

.NET Framework desktop apps

ｇ TUTORIAL

ClickOnce

Installer package

Deploy to Azure

ｇ TUTORIAL

[Link] Core app to App Service

[Link] to App Service (.NET Framework)

[Link] web app to Azure Web Apps

[Link] Core web app to Azure Container Apps

Azure Functions

Deploy with GitHub Actions

Deploy Entity Framework Core app with GitHub Actions

Deploy Docker containers

ｃ HOW-TO GUIDE

Deploy to Azure Container Registry

Deploy to Azure App Service

Deploy to Docker Hub

Deploy without a Dockerfile

Additional deployment types

ｃ HOW-TO GUIDE

[Link] apps on Linux App Service

Containerized apps

Publish NuGet packages

Create a database and add tables in
.NET Framework applications using
Visual Studio
Article • 02/03/2025

７ Note

Datasets and related classes are legacy .NET Framework technologies from the
early 2000s that enable applications to work with data in memory while the
applications are disconnected from the database. The technologies are especially
useful for applications that enable users to modify data and persist the changes
back to the database. Although datasets have proven to be a very successful
technology, we recommend that new .NET applications use Entity Framework Core.
Entity Framework provides a more natural way to work with tabular data as object
models, and it has a simpler programming interface.

You can use Visual Studio to create and update a local database file in SQL Server
Express LocalDB. You can also create a database by executing Transact-SQL statements
in the SQL Server Object Explorer tool window in Visual Studio. In this topic, you create
an .mdf file and add tables and keys by using the Table Designer.

Prerequisites
To complete this walkthrough, you need the .NET desktop development and Data
storage and processing workloads installed in Visual Studio. To install them, open Visual
Studio Installer and choose Modify (or More > Modify) next to the version of Visual
Studio you want to modify. See Modify Visual Studio.

７ Note

The procedures in this article apply only to .NET Framework Windows Forms
projects, not to .NET Core Windows Forms projects.

Create a project and a local database file

 1. Create a new Windows Forms App (.NET Framework) project and name it
SampleDatabaseWalkthrough.

2. On the menu bar, select Project > Add New Item. If you see a small dialog box
with a box for a filename, choose Show All Templates.

3. In the list of item templates, scroll down and select Service-based Database.

4. Name the database [Link], and then select Add.

Add a data source

1. If the Data Sources window isn't open, open it by pressing Shift+Alt+D or
selecting View > Other Windows > Data Sources on the menu bar.

2. In the Data Sources window, select Add New Data Source.

 The Data Source Configuration Wizard opens.

3. On the Choose a Data Source Type page, choose Database and then choose Next.

4. On the Choose a Database Model page, choose Next to accept the default
(Dataset).

5. On the Choose Your Data Connection page, select the [Link] file in
the dropdown list, and then choose Next.

6. On the Save the Connection String to the Application Configuration File page,
choose Next.

7. On the Choose your Database Objects page, you see a message that says the
database doesn't contain any objects. Choose Finish.

Ｕ Caution

In a real application, you should store the connection string securely, as described
in Connection strings and configuration files. For best security, use an
authentication method that doesn't rely on storing a password in the connection
string, such as Windows Authentication for an on-premises SQL Server database.
See Save and edit connection strings.

View properties of the data connection

You can view some of the properties of the [Link] file by opening the
Properties window of the data connection:

Select View > SQL Server Object Explorer (or Ctrl+\, Ctrl+S) to open the SQL
Server Object Explorer window. Expand (localdb)\MSSQLLocalDB > Databases,
and then right-click on [Link] (it might be listed as a full path) and
select Properties.

Alternatively, you can select View > Server Explorer, if that window isn't already
open. Open the Properties window by expanding the Data Connections node,
right-clicking on [Link], and then selecting Properties.

 Tip

If you can't expand the Data Connections node, or the [Link]

connection is not listed, select the Connect to Database button in the Server
Explorer toolbar. In the Add Connection dialog box, make sure that Microsoft
SQL Server Database File is selected under Data source, and then browse to
and select the [Link] file. Finish adding the connection by
selecting OK.

To view the connection string, you can open the [Link] file in Solution Explorer. You
should see an entry under the connectionStrings element that resembles the following
code:

XML

<connectionStrings>
<add
name="[Link]
String"
connectionString="Data Source=
(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\[Link];I
ntegrated Security=True"
providerName="[Link]" />
</connectionStrings>

Create tables and keys by using Table Designer

In this section, you create two tables, a primary key in each table, and a few rows of
sample data. you also create a foreign key to specify how records in one table
correspond to records in the other table.
Create the Customers table
1. In Server Explorer or SQL Server Object Browser, expand the Data Connections
node, and then expand the [Link] node.

2. Right-click on Tables and select Add New Table.

The Table Designer opens and shows a grid with one default row, which represents
a single column in the table that you're creating. By adding rows to the grid, you
add columns in the table.

3. In the grid, add a row for each of the following entries:

ﾉ Expand table

Column name Data type Allow nulls

CustomerID nchar(5) False (cleared)

CompanyName nvarchar(50) False (cleared)

ContactName nvarchar (50) True (selected)

Phone nvarchar (24) True (selected)

4. Right-click on the CustomerID row, and then select Set Primary Key.

5. Right-click on the default row ( Id ), and then select Delete.

6. Name the Customers table by updating the first line in the script pane to match
the following sample:

SQL

CREATE TABLE [dbo].[Customers]

7. Add an index constraint to the Customers table. Add a comma at the end of the
Phone line, then add the following sample before the closing parenthesis:

SQL

CONSTRAINT [PK_Customers] PRIMARY KEY ([CustomerID])

You should see something like this:

 8. In the upper-left corner of Table Designer, select Update, or press Shift+Alt+U.

9. In the Preview Database Updates dialog box, select Update Database.

The Customers table is created in the local database file.

Create the Orders table

1. Add another table, and then add a row for each entry in the following table:

ﾉ Expand table

Column name Data type Allow nulls

OrderID int False (cleared)

CustomerID nchar(5) False (cleared)

OrderDate datetime True (selected)

OrderQuantity int True (selected)

2. Set OrderID as the primary key, and then delete the default row.

3. Name the Orders table by updating the first line in the script pane to match the
following sample:

SQL

CREATE TABLE [dbo].[Orders]

 4. Add an index constraint to the Customers table. Add a comma at the end of the
OrderQuantity line, then add the following sample before the closing parenthesis:

SQL

CONSTRAINT [PK_Orders] PRIMARY KEY ([OrderId])

5. In the upper-left corner of the Table Designer, select Update, or press

Shift+Alt+U..

6. In the Preview Database Updates dialog box, select Update Database.

The Orders table is created in the local database file. If you expand the Tables node
in Server Explorer, you see the two tables:

If you don't see it, hit the Refresh toolbar button.

Create a foreign key

1. In the context pane on the right side of the Table Designer grid for the Orders
table, right-click on Foreign Keys and select Add New Foreign Key.
 2. In the text box that appears, replace the text ToTable with Customers.

3. In the T-SQL pane, update the last line to match the following sample:

SQL

CONSTRAINT [FK_Orders_Customers] FOREIGN KEY ([CustomerID]) REFERENCES

[Customers]([CustomerID])

4. In the upper-left corner of the Table Designer, select Update (Shift+Alt+U).

5. In the Preview Database Updates dialog box, select Update Database.

The foreign key is created.

Populate the tables with data

1. In Server Explorer or SQL Server Object Explorer, expand the node for the sample
database.

2. Open the shortcut menu for the Tables node, select Refresh, and then expand the
Tables node.

3. Open the shortcut menu for the Customers table, and then select Show Table Data
or View Data.

4. Add whatever data you want for some customers.

You can specify any five characters you want as the customer IDs, but choose at
least one that you can remember for use later in this procedure.

5. Open the shortcut menu for the Orders table, and then select Show Table Data or
View Data.

6. Add data for some orders. As you enter each row, it's saved in the database.
 ） Important

Make sure that all order IDs and order quantities are integers and that each
customer ID matches a value that you specified in the CustomerID column of
the Customers table.

Congratulations! You now know how to create tables, link them with a foreign key, and
add data.

Related content
Accessing data in Visual Studio

Feedback
Was this page helpful?  Yes  No

Provide product feedback | Ask the community