Tutorial: Create a picture viewer Windows Forms app in Visual Studio

Applies to: Visual Studio Visual Studio for Mac

Note

This article applies to Visual Studio 2017. If you're looking for the latest Visual Studio documentation, see Visual Studio documentation. We recommend upgrading to the latest version of Visual Studio. Download it here

In this series of three tutorials, you'll 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. To learn more, 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 a layout element
• Run your application

Prerequisites

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

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 menu bar, select File > New > Project.

   

3. On the left side of the New Project dialog box, select either Visual C# or Visual Basic, and then select Windows Desktop.

4. In the project templates list, select Windows Forms App (.NET Framework). Name the new form PictureViewer, and then select OK.

   Note

   If you don't see the Windows Forms App (.NET Framework) template, use the Visual Studio Installer to install the .NET desktop development workload.

   

   For more information, see the Install Visual Studio page.

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'll 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 Form1.cs [Design] for C# or Form1.vb [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 has changed. 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, click 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 button 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 steps

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