Tutorial: Create a simple application

with Visual C# or Visual Basic

Visual Studio 2015
Other versions

After completing this tutorial, you will be familiar with many of the tools,
dialog boxes and designers that you can use to develop applications with
Visual Studio. It will create a simple 'Hello everyone' style application, it will design the
user interface, will add code and debug errors, while learning to work in the
integrated development environment (IDE).

This topic contains the following sections:

Configure the IDE

Create a simple application

Debug and test the application

Note

This tutorial is based on Visual Studio Professional, which provides the template for
WPF application in which you will create the project for this tutorial. Visual Studio Express for
Windows desktop also provides that template, but Visual Studio does not.
Express for Windows and Visual Studio Express for Web. For more information
preliminary on how to use Visual Studio Express for Windows, visit theCenter of
software development for Windows Store applicationsTo obtain
preliminary information on how to use Visual Studio Express for Web, seeGet
Started with [Link](Introduction to [Link]). Likewise the Visual edition.
The studio and the configuration I used determine the names and locations of
some elements of the user interface. ConsultCustomize the settings of
development in Visual Studio.

Configure the IDE

When you start Visual Studio for the first time, Visual Studio will prompt you to sign in with
a Microsoft service account (MSA).Logging in to Visual StudioIt is not
It is necessary to log in and you can do it later.
When starting Visual Studio, you must choose a configuration combination that applies a
set of predefined customizations to the IDE. Each combination of options has been
designed to make application development easier.

This tutorial assumes that you applied the General Development Settings, which implies
the least amount of IDE customization. If you have already chosen C# or Visual Basic (both
valid options), it should not change the configuration. If you want to change the
configuration, you can use the Assistant to import and export settings.
ConsultCustomize development settings in Visual Studio.

After opening Visual Studio, you can identify the tool windows,
menus and toolbars and the main window space. The windows of
tools are fitted to the left and right sides of the application window,
with a quick start, the menu bar and the standard toolbar at the bottom
superior. In the center of the application window is the main page. When you
load a solution or a project, the editors and designers appear in the space
Where is the homepage. When developing an application, you will spend most of the time
of the time in this central area.

Figure 2: Visual Studio IDE

You can create additional customizations in Visual Studio, such as changing the type of
source and the text size in the editor or the color theme of the IDE, through the box
dialogue options. Depending on the combination of options you have applied,
Some elements of this dialog box may not appear automatically.
You can ensure that all possible options appear by checking the box.
Show all settings.

Figure 3: Options dialog

In this example, you will change the IDE's color theme from light to dark. You may continue.
to create a project if you wish.

To change the color theme of the IDE

To open the Options dialog box, select the Tools menu.

the top part and then the Options element....

2. Change the color theme to Dark, and then click OK.

The colors of Visual Studio must match the following image:

The color theme used for the images in the rest of this tutorial is the light theme.
For more information on how to customize the IDE, seeCustomize the
Visual Studio development configuration.
Create a simple application
Create the project

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

To create the WPF project

1. Create a new project. In the menu bar, choose File, New,

Project....

You can also write New project in the Quick Start box to do
the same.

2. To select the WPF Application template of Visual C# or Visual Basic, choose from the
left panel Installed, Templates, Visual C#, Windows, for example and,
then choose WPF Application in the central panel. Name the project
HelloWPFApp at the bottom of the New Project dialog.
 O

Visual Studio creates the HelloWPFApp project and the solution and the Explorer
solutions show the different files. WPF Designer shows a design view and
a XAML view of [Link] in a two-panel view. You can slide the
divider to show more or less of any of the views. You can choose to view only the
visual view or just the XAML view. (For more information, seeWPF Designer
for Windows Forms developersThe following elements appear in the
Solution Explorer:

Figure 5: Project Elements

After creating the project, you can customize it. Through the Properties window,
(found in the View menu), can display and change the options of the
project elements, controls, and other elements of an application. Through the
properties of the project and the property pages, can display and change them
project and solution options.

To change the name of [Link]

1. In the following procedure, a more specific name will be assigned to

MainWindow. In the Solution Explorer, select [Link].
You should see the Properties window, but if not, choose the Very menu.
property window element. Change the property file name to
[Link].
 The Solutions Explorer shows that the file name is now
[Link] and if you expand the [Link] node (focusing on the
node and pressing the right arrow key), you will see that the name of
[Link] or [Link] is now [Link] or
[Link]. This code file is nested under the node of
xaml file to show that they are very closely related to each other.

Warning

This change produces an error that you will learn to debug and fix in a later step.

2. In the Solution Explorer, open [Link] in the designer view

(pressing the Enter key while the node is focused) and select the bar
by the window title with the mouse.

In the Properties window, change the value of the Title property to Greetings.

The title bar of [Link] now reads Greetings.

Design the user interface (UI)

We will add three types of controls to this application: a TextBlock control, two
RadioButton controls and a Button control.

To add a TextBlock control

1. Open the windowToolboxby choosing the menuSee the item

Toolbox.

2. In the toolbox, search for the TextBlock control.

3. Add a TextBlock control to the design surface. To do this, choose the

Drag the TextBlock element to the window on the design surface. Center the
control near the top of the window.

The window should be similar to the following illustration:

Figure 7: Greetings Window with the TextBlock control

The XAML markup should look similar to the following:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap"

Center
Margin="237,57,221,238"><Run
TextBlock
TextBlock

To customize the text in the text block

1. In the XAML view, search for the TextBlock markup and change the attribute of
Select a message option and then choose the Display button.

2. If the TextBlock does not expand to fit the Design view, enlarge the control
TextBlock (with the edge capture handles) so that everything is displayed
text.

3. Save the changes by pressing Ctrl-s or using the File menu item.

Next, you will add two [Link] the form.

To add radio buttons

1. In the Toolbox, look for the RadioButton control.

2. Add two RadioButton controls to the design surface by choosing the
RadioButton element and dragging it to the design surface window two
sometimes. Also, move the buttons (by selecting them and using the keys of
(address) so that the buttons appear next to each other under the control
TextBlock.

The window should be similar to the one shown below:

Figure 8: RadioButtons in the Greetings window.

3. In the Properties window of the left RadioButton control, change the

propertyName(the property located at the top of the window
Properties) to RadioButton1. Make sure you have selected RadioButton and not
the background grid of the form; the Type field of the window
Field properties Name must indicate RadioButton.

4. In the Properties window of the right RadioButton control, change the

propertyName RadioButton2 and then save the changes by pressing
Ctrl-s or using the File menu item. Make sure you have selected
RadioButton before changing and saving.
Now you can add the text to display for each RadioButton control. The
The following procedure updates the Content property of a RadioButton control.

To add the text to display for each radio button

On the design surface, open the contextual menu of RadioButton1

pressing the right mouse button while selecting RadioButton1,
choose Edit text and then write Hello.

2. Open the context menu of RadioButton2 by right-clicking.

mouse while selecting RadioButton2, choose Edit text and then type
Goodbye.

The last element of the user interface that you will add is a [Link].

To add the Button control

1. In the toolbox, search for the Button control, and then add it to
the design surface in the RadioButton controls by selecting the button and
dragging it to the form in design view.

2. In the XAML view, change the value of the Button control's Content to
Button
use the File menu.

The markup should be similar to the following example: <Button

Display
75

The window should resemble that of the following illustration.

Figure 9: Final user interface of Greetings

Add code to the Show button

When this application is run, a message box appears after a

user select a radio button and then the Show button. A will appear
cuadro de mensaje para Hello y otro para Goodbye. Para crear este comportamiento,
You need to add code to the Button_Click event in [Link] or [Link].

Add code to display message boxes

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

The [Link] or [Link] opens with the cursor in the event

Button_Click. You can also add a click event handler from the
next way (if the pasted code has a red zigzag line underneath
some name, probably did not select the RadioButton controls in the
design surface and changed their name) :

For Visual Basic, the event handler should be similar to:

VB

Private Sub Button_Click_1(sender As Object, eAs

RoutedEventArgs

End Sub

For Visual C#, the event handler should be similar to:

 C#

private void Button_Click_1(object sender, RoutedEventArgs e)

{

2. For Visual Basic, write the following code:

VB

If [Link] = True Then

[Link]("Hello.")
Else [Link] = True
Goodbye.
End If

For Visual C#, write the following code:

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

3. Save the application.

Debug and test the application

Next, you will debug the application to search for errors and test that the two boxes
The messages appear correctly. The following instructions indicate how to compile.
and start the debugger, but later I could readCompile a WPF application
(WPF)yDebug WPFfor more information.

Search and correct errors

In this step, you will look for the error that occurred earlier when changing the name of the
XAML file of the main window.

To start debugging and look for the error

1. Start the debugger by selecting Debug after Start Debugging.

 A dialog box appears indicating that an exception has occurred.
IOException: The resource '[Link]' could not be found.

2. Choose the Accept button and then stop the debugger.

We have changed the name of [Link] to [Link] at the beginning of this

tutorial, but the code still references [Link] as the URI of
application startup, so the project cannot be started.

To specify [Link] as the startup URI

1. In the Solution Explorer, open the [Link] file (in the project of
C#) or the [Link] file (in the Visual Basic project) in the view
XAML (cannot be opened in Design view). To do this, select the file and
press Enter or double-click on it.
 2. Change StartupUri="[Link]" to StartupUri="[Link]" and
then save the changes with Ctrl-s.

Restart the debugger (press F5). You should see the Greetings window of the
application.

To debug with breakpoints

By adding some breakpoints you can test the code during the
debugging. You can add breakpoints by selecting Debug in the menu
main, then switch breakpoints or by clicking on the margin
left of the editor next to the line of code where you want it to occur
interruption.

To add breakpoints

1. Open [Link] or [Link] and select the following line:

[Link]("Hello.")

2. Add a breakpoint in the menu by selecting Debug afterwards

Toggle breakpoints.

A red circle appears next to the line of code in the left margin of
the editor's window.

3. Select the following line: [Link]('Goodbye.').

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

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

The line [Link]("Hello.") is highlighted in yellow. At the bottom

In the IDE, the Automatic, Local Variables, and Inspection windows are docked
together on the left side, while the Call Stack, Breakpoints windows
Interruption, Command, Immediate, and Exit are coupled together on the side
law.

6. In the menu bar, choose Debug, Step Out to exit.

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

7. Select the Accept button in the message box to close it.

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

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

9. Press the F5 key to continue debugging. When the dialog box appears
Message, select the Accept button in the message box to close it.

10. Press the SHIFT + F5 keys (press SHIFT first and then, while
keep it pressed, press F5) to stop debugging.

11. In the menu bar, choose Debug, Disable all breakpoints

interruption.

Compile a release version of the application

Now that you have verified that everything works, you can prepare a version of
launch of the application.

To clean the solution files and create a release version

1. In the main menu, select Compile, then Clean Solution to

delete the intermediate and output files that were created during the
previous compilations. This is not necessary, but the outputs are cleaned up
debug compilation.
2. Change the build configuration of HelloWPFApp from Debug to
Liberate through the dropdown control in the toolbar
(says "Debug" currently).

3. Compile the solution with Compile, Compile Solution, or press the F6 key.
Congratulations on completing this tutorial! You can find the created .exe in the
solution and project directory (... \HelloWPFApp\HelloWPFApp\bin\Release\). If
if you want to explore more examples, seeExamples of Visual Studio.