Edit

Share via


Tutorial: Create a picture viewer Windows Forms App (.NET Framework)

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

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.

    Screenshot shows the Create a new project option in the Visual Studio 2019 start window.

  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.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App in Visual Studio 2019.

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

    Screenshot shows the Configure your new project dialog box in Visual Studio 2019.

  1. Open Visual Studio.

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

    Screenshot shows the Create a new project option in the Visual Studio start window.

  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.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

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

    Screenshot shows the Configure your new project dialog box.

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

    Screenshot shows the Forms window with the Drag handle in the lower right.

    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.

    Screenshot shows the Containers group in the Toolbox tab.

  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.

    Screenshot show the form with the TableLayoutPanel control added.

    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.

    Screenshot shows the Properties window showing the TableLayoutPanel control.

  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.

    Screenshot shows the Properties window with Fill selected.

    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.

    Screenshot shows TableLayoutPanel tasks.

  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.

    Screenshot shows TableLayoutPanel column and row styles.

  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.

    Screenshot shows the form with resized TableLayoutPanel.

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.

    Screenshot shows the Windows Forms app running.

    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.

    Screenshot shows the Debugging toolbar where you can stop the app.

  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.