diff --git a/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-code.md b/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-code.md index 355be84c87c..485db501a6e 100644 --- a/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-code.md +++ b/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-code.md @@ -1,6 +1,6 @@ --- -title: "Tutorial: Add UI controls to a Windows Forms app" -description: Add UI controls for a picture box, checkbox, and button items to a picture viewer WinForms application with Visual Studio. +title: "Tutorial: Add code to the picture viewer Windows Forms app" +description: Learn how to add C# or VB code to support the UI controls for a picture box, checkbox, and button in a picture viewer WinForms application with Visual Studio. dev_langs: - "CSharp" - "VB" @@ -9,14 +9,14 @@ ms.author: meghaanand manager: mijacobs ms.subservice: general-ide ms.topic: tutorial -ms.date: 03/15/2023 +ms.date: 03/29/2024 ms.custom: vs-acquisition +#customer intent: As a developer, I want to learn how to add C# or VB code to my WinForms project to take actions when a user selects a control. --- # Tutorial: Add code to the picture viewer Windows Forms app in Visual Studio -In this series of three tutorials, you'll create a Windows Forms application that loads a picture and displays it. +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. -To learn more, see [Welcome to the Visual Studio IDE](../visual-studio-ide.md). Controls use C# or Visual Basic code to take the actions associated with them. @@ -30,13 +30,13 @@ In this third tutorial, you learn how to: ## Prerequisites -This tutorial builds on the previous tutorials, [Create a picture viewer application](tutorial-windows-forms-picture-viewer-layout.md) and [Add UI controls to the picture viewer](tutorial-windows-forms-picture-viewer-controls.md). -If you haven't done those tutorials, go through them first. +- This tutorial builds on the previous tutorials, [Create a picture viewer application](tutorial-windows-forms-picture-viewer-layout.md) and [Add UI controls to the picture viewer](tutorial-windows-forms-picture-viewer-controls.md). +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](tutorial-windows-forms-picture-viewer-code.md). -Your application calls an event handler when an action takes place, such as selecting a button. +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**. @@ -47,7 +47,7 @@ Your application calls an event handler when an action takes place, such as sele This tab displays the code file behind the form. - ![Screenshot shows the Form1.cs tab with Visual C sharp code.](../media/tutorial-windows-forms-picture-viewer-code/show-picture-button-code.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-code/show-picture-button-code.png" alt-text="Screenshot shows the Form1.cs tab with Visual C sharp code."::: > [!NOTE] > Your Form1.vb tab might display **showButton** as **ShowButton**. @@ -69,29 +69,29 @@ Your application calls an event handler when an action takes place, such as sele ``` --- - [!INCLUDE [devlang-control-csharp-vb](../includes/devlang-control-csharp-vb.md)] - 1. 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. -1. Double-click the **CheckBox** control in **Windows Forms Designer** to add a `checkBox1_CheckedChanged()` method. +1. 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#](#tab/csharp) + :::code language="csharp" source="../../snippets/csharp/VS_Snippets_VBCSharp/vbexpresstutorial1step6/cs/form1.cs" id="Snippet2"::: ### [VB](#tab/vb) + :::code language="vb" source="../../snippets/visualbasic/VS_Snippets_VBCSharp/vbexpresstutorial1step6/vb/form1.vb" id="Snippet2"::: --- 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**. All instances of that variable in the code are renamed. For more information, see [Rename refactoring](../../ide/reference/rename.md). +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](../../ide/reference/rename.md). ## Write code to open a dialog box @@ -101,28 +101,28 @@ 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. +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. 1. Type an *i* on the empty line between the two braces `{ }`or between `Private Sub...` and `End Sub`. An **IntelliSense** window opens. - ![Screenshot shows IntelliSense with Visual C sharp code.](../media/tutorial-windows-forms-picture-viewer-code/intellisense-window.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-code/intellisense-window.png" alt-text="Screenshot shows IntelliSense with Visual C sharp code."::: -1. The **IntelliSense** window should highlight the word `if`. Select the **Tab** key to insert `if`. +1. The **IntelliSense** window should highlight the word `if`. Select the **Tab** key twice to insert the `if` snippet. 1. Select **true** and then type `op` to overwrite it for C# or `Op` for Visual Basic. - ![Screenshot shows the event handler for the show button with the value true selected.](../media/tutorial-windows-forms-picture-viewer-code/show-button-handler-true-selected.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-code/show-button-handler-true-selected.png" alt-text="Screenshot shows the event handler for the show button with the value true selected."::: IntelliSense displays **openFileDialog1**. -1. Select **Tab** to add openFileDialog1. +1. Select **Tab** to add openFileDialog1. 1. 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 will show the **Open File** dialog box. + The `ShowDialog()` method shows the **Open File** dialog box. 1. Add parentheses `()` immediately after the "g" in `ShowDialog`. Your code should be `openFileDialog1.ShowDialog()`. @@ -178,13 +178,15 @@ As you type, IntelliSense suggests possible 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. - Add the code in the braces. + For C#, add the code in braces. + For Visual Basic, add the code between `Private Sub` and `End Sub`. ### [C#](#tab/csharp) ```csharp @@ -204,7 +206,7 @@ In this section, add the code for the other event handlers. ``` --- -1. Double-click the **Set the background color** button and add the code in braces. +1. Double-click the **Set the background color** button and add the code. ### [C#](#tab/csharp) ```csharp @@ -229,7 +231,7 @@ In this section, add the code for the other event handlers. ``` --- -1. Double-click the **Close** button and add the code in braces. +1. Double-click the **Close** button and add the code. ### [C#](#tab/csharp) ```csharp @@ -250,7 +252,7 @@ In this section, add the code for the other event handlers. ``` --- -1. Double-click the **Stretch** checkbox and add the code in braces. +1. Double-click the **Stretch** checkbox and add the code. ### [C#](#tab/csharp) ```csharp @@ -284,7 +286,7 @@ In this section, add the code for the other event handlers. ## Run your application -You can run your application at any time, while you're writing it. +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: @@ -297,13 +299,13 @@ Test all the controls. 1. Select the **Set the background color** button. The **Color** dialog box opens. - ![Screenshot shows the Color dialog box.](../media/tutorial-windows-forms-picture-viewer-code/color-dialog-box.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-code/color-dialog-box.png" alt-text="Screenshot shows your app with the Color dialog box."::: 1. Choose a color to set the background color. 1. Select **Show a picture** to display a picture. - ![Screenshot shows the Picture Viewer app with a picture displayed.](../media/tutorial-windows-forms-picture-viewer-code/run-picture-viewer.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-code/run-picture-viewer.png" alt-text="Screenshot shows the Picture Viewer app with a picture displayed."::: 1. Select and unselect **Stretch**. @@ -311,11 +313,9 @@ Test all the controls. 1. Select **Close** to exit the app. -## Next steps - Congratulations! -You've completed this series of tutorials. -You've done these programming and design tasks in the Visual Studio IDE: +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 @@ -324,6 +324,8 @@ You've done these programming and design tasks in the Visual Studio IDE: - 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. > [!div class="nextstepaction"] > [Tutorial 2: Create a timed math quiz](tutorial-windows-forms-math-quiz-create-project-add-controls.md) diff --git a/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-controls.md b/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-controls.md index f88f721d2a9..b86ced6cca2 100644 --- a/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-controls.md +++ b/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-controls.md @@ -1,18 +1,18 @@ --- title: "Tutorial: Add controls to a picture viewer app" -description: Add a picture box, a checkbox, and buttons to a picture viewer application in the Visual Studio integrated development environment (IDE). +description: Add a picture box, a checkbox, and buttons to a picture viewer application in the Visual Studio integrated development environment. author: anandmeg ms.author: meghaanand manager: mijacobs ms.subservice: general-ide ms.topic: tutorial -ms.date: 02/28/2023 +ms.date: 03/29/2024 +#customer intent: As a developer, I want to learn how to use controls with layout elements in a Visual Studio WinForms project in C# or VB. --- -# Tutorial: Add UI controls to the picture viewer Windows Forms app in Visual Studio +# Tutorial: Add controls to the picture viewer Windows Forms app in Visual Studio -In this series of three tutorials, you'll create a Windows Forms application that loads a picture and displays it. +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. -To learn more, see [Welcome to the Visual Studio IDE](../../get-started/visual-studio-ide.md). 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. @@ -27,13 +27,14 @@ In this second tutorial, you learn how to: ## Prerequisites -This tutorial builds on the previous tutorial, [Create a picture viewer application](tutorial-windows-forms-picture-viewer-layout.md). -If you haven't done that tutorial, go through that one first. +- This tutorial builds on the previous tutorial, [Create a picture viewer application](tutorial-windows-forms-picture-viewer-layout.md). +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'll add the PictureBox and a checkbox from the Toolbox in the Visual Studio IDE. +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**. @@ -44,11 +45,11 @@ You'll add the PictureBox and a checkbox from the Toolbox in the Visual Studio I If you don't see it, select **View** > **Toolbox** from the menu bar or **Ctrl**+**Alt**+**X**. In the toolbox, expand **Common Controls**. -1. Double-click **PictureBox** to add a PictureBox control to your form. Visual Studio IDE adds the PictureBox control to the first empty cell of the TableLayoutPanel. +1. 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. 1. Choose the new **PictureBox** control to select it, and then select the black triangle on the new PictureBox control to display its task list. - ![Screenshot shows the PictureBox Tasks dialog box with Dock in Parent Container highlighted.](../media/tutorial-windows-forms-picture-viewer-controls/picture-box-tasks-dialog.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-controls/picture-box-tasks-dialog.png" alt-text="Screenshot shows the PictureBox Tasks dialog box with Dock in Parent Container highlighted."::: 1. Select **Dock in Parent Container**, which sets the PictureBox **Dock** property to **Fill**. You can see that value in the **Properties** window. @@ -62,17 +63,17 @@ You'll add the PictureBox and a checkbox from the Toolbox in the Visual Studio I 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. -1. Choose the **Text** property and enter **Stretch**. +1. Choose the **Text** property and enter *Stretch*. - ![Screenshot shows checkbox control named Stretch.](../media/tutorial-windows-forms-picture-viewer-controls/checkbox-named-stretch.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-controls/checkbox-named-stretch.png" alt-text="Screenshot shows CheckBox control named Stretch."::: ## Add buttons in a layout panel -The controls so far have been added to the TableLayoutPanel. +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**, select **Containers**. + Open the **Toolbox**, and select **Containers**. Double-click **FlowLayoutPanel** to add a new control to the last cell of the TableLayoutPanel. 1. Set the FlowLayoutPanel's **Dock** property to **Fill**. @@ -86,25 +87,26 @@ These steps show you how to add four buttons to a new layout panel in the TableL 1. Double-click **Button** again to add another button. The IDE calls the next one **button2**. 1. Add two more buttons this way. - Another option is to select **button2**, and then select **Edit** > **Copy** or press **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. Notice that the IDE adds **button3** and **button4** to the FlowLayoutPanel. + 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. -1. Select the first button and set its **Text** property to **Show a picture**. +1. Select the first button and set its **Text** property to *Show a picture*. -1. Set the **Text** properties of the next three buttons to **Clear the picture**, **Set the background color**, and **Close**. +1. Set the **Text** properties of the next three buttons to *Clear the picture*, *Set the background color*, and *Close*. 1. 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. + 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. -1. Choose the **Close** button to select it. Then, to choose the rest of the buttons at the same time, press and hold the **Ctrl** key and choose them, too. +1. 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. 1. In the **Properties** window, set the **AutoSize** property to **True**. The buttons resize to fit their text. - ![Screenshot shows the Picture Viewer form with four buttons.](../media/tutorial-windows-forms-picture-viewer-controls/buttons-autosize.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-controls/buttons-autosize.png" alt-text="Screenshot shows the Picture Viewer form with four buttons."::: 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. @@ -119,17 +121,17 @@ Use these steps to give them more informative names. If you still have all the buttons selected, choose **Esc** to cancel the selection. 1. In the **Properties** window, look for **(Name)**. - Change the name to **closeButton**. + Change the name to *closeButton*. - ![Properties window with closeButton name](../media/tutorial-windows-forms-picture-viewer-controls/close-button-name-property.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-controls/close-button-name-property.png" alt-text="Screenshot shows the Properties window with closeButton name."::: The IDE doesn't accept names that contain spaces. -1. Rename the other three buttons to **backgroundButton**, **clearButton**, and **showButton**. - You can verify the names by choosing the control selector drop-down list in the **Properties** window. +1. 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. +You can change the name of any control, such as the TableLayoutPanel or CheckBox. ## Add dialog components @@ -151,21 +153,21 @@ In this section, you add an component 1. Double-click **ColorDialog** to add a component called **colorDialog1**. The components appear at the bottom of **Windows Forms Designer** as icons. - ![Dialog components](../media/tutorial-windows-forms-picture-viewer-controls/components-window-forms-designer.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-controls/components-window-forms-designer.png" alt-text="Screenshot shows the Dialog components at the bottom of the designer."::: 1. Choose the **openFileDialog1** icon and set two properties: - - Set the **Filter** property to the following: + - 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: **Select a picture file** + - 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 steps +## Next step Advance to the next tutorial to learn how to add code to your application. > [!div class="nextstepaction"] diff --git a/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-layout.md b/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-layout.md index 8f74abe8ef8..5fcf2555bf1 100644 --- a/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-layout.md +++ b/docs/get-started/csharp/tutorial-windows-forms-picture-viewer-layout.md @@ -6,13 +6,13 @@ ms.author: meghaanand manager: mijacobs ms.subservice: general-ide ms.topic: tutorial -ms.date: 02/24/2023 +ms.date: 03/29/2024 +#customer intent: As a developer, I want to learn how to use Visual Studio to create C# or VB WinForms projects, starting with adding a layout element. --- # Tutorial: Create a picture viewer Windows Forms app in Visual Studio -In this series of three tutorials, you'll create a Windows Forms application that loads a picture and displays it. +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. -To learn more, see [Welcome to the Visual Studio IDE](../visual-studio-ide.md). In this first tutorial, you learn how to: @@ -23,8 +23,9 @@ In this first tutorial, you learn how to: ## Prerequisites -You need Visual Studio to complete this tutorial. +- You need Visual Studio to complete this tutorial. Visit the [Visual Studio downloads page](https://visualstudio.microsoft.com/vs/) 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](../../install/modify-visual-studio.md#change-workloads-or-individual-components). ## Create your Windows Forms project @@ -35,27 +36,18 @@ When you create a picture viewer, the first step is to create a Windows Forms Ap 1. On the start window, select **Create a new project**. - ![Screenshot shows the Create a new project option in the Visual Studio start window.](../media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme-2019.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme-2019.png" alt-text="Screenshot shows the Create a new project option in the Visual Studio 2019 start window."::: 1. On the **Create a new project** window, search for *Windows Forms*. Then select **Desktop** from the **Project type** list. 1. 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.](../media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png) - - > [!NOTE] - > If you don't see the **Windows Forms App (.NET Framework)** template, you can install it from the **Create a new project** window. In the **Not finding what you're looking for?** message, select the **Install more tools and features** link. - > - > ![Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.](../media/tutorial-windows-forms-picture-viewer-layout/install-more-tools.png) - > - > Next, in Visual Studio Installer, select **.NET desktop development**. - > - > ![Screenshot shows .NET Core workload in the Visual Studio Installer.](../media/tutorial-windows-forms-picture-viewer-layout/install-dot-net-desktop-env.png) - > - > Select **Modify** in the Visual Studio Installer. You might be prompted to save your work. Next, select **Continue** to install the workload. + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms-2019.png" alt-text="Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App in Visual Studio 2019." lightbox="../media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms-2019.png"::: 1. In the **Configure your new project** window, name your project *PictureViewer*, then select **Create**. + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/configure-new-project-2019.png" alt-text="Screenshot shows the Configure your new project dialog box in Visual Studio 2019."::: + ::: moniker-end ::: moniker range=">=vs-2022" @@ -63,28 +55,17 @@ When you create a picture viewer, the first step is to create a Windows Forms Ap 1. On the start window, select **Create a new project**. - ![Screenshot shows the Create a new project option in the Visual Studio start window.](../media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme.png" alt-text="Screenshot shows the Create a new project option in the Visual Studio start window."::: 1. On the **Create a new project** window, search for *Windows Forms*. Then select **Desktop** from the **Project type** list. 1. 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.](../media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png) - - > [!NOTE] - > If you don't see the **Windows Forms App (.NET Framework)** template, you can install it from the **Create a new project** window. In the **Not finding what you're looking for?** message, select the **Install more tools and features** link. - > - > ![Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.](../media/tutorial-windows-forms-picture-viewer-layout/install-more-tools.png) - > - > Next, in Visual Studio Installer, select **.NET desktop development**. - > - > ![Screenshot shows .NET Core workload in the Visual Studio Installer.](../media/tutorial-windows-forms-picture-viewer-layout/install-dot-net-desktop-env.png) - > - > Select **Modify** in the Visual Studio Installer. You might be prompted to save your work. Next, select **Continue** to install the workload. + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png" alt-text="Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App." lightbox="../media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png"::: 1. In the **Configure your new project** window, name your project *PictureViewer*, then select **Create**. - ![Screenshot shows the Configure your new project dialog box.](../media/tutorial-windows-forms-picture-viewer-layout/configure-new-project.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/configure-new-project.png" alt-text="Screenshot shows the Configure your new project dialog box."::: ::: moniker-end @@ -95,7 +76,7 @@ At this point, Visual Studio displays an empty form in the **Windows Form Design ## 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](tutorial-windows-forms-picture-viewer-controls.md). +Your picture viewing app contains a picture box, a checkbox, and four buttons, which you add in [the next tutorial](tutorial-windows-forms-picture-viewer-controls.md). 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. @@ -123,10 +104,10 @@ This section shows you how to change the title of your form, resize the form, an 1. 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.](../media/tutorial-windows-forms-picture-viewer-layout/windows-form-drag-handle.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/windows-form-drag-handle.png" alt-text="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 has changed. + 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. 1. On the left side of the Visual Studio IDE, select the **Toolbox** tab. @@ -134,26 +115,26 @@ This section shows you how to change the title of your form, resize the form, an 1. Select the small triangle symbol next to **Containers** to open the group. - ![Screenshot shows the Containers group in the Toolbox tab.](../media/tutorial-windows-forms-picture-viewer-layout/toolbox-container-table-layout-panel.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/toolbox-container-table-layout-panel.png" alt-text="Screenshot shows the Containers group in the Toolbox tab."::: 1. 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.](../media/tutorial-windows-forms-picture-viewer-layout/table-layout-format-added.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/table-layout-format-added.png" alt-text="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**, click anywhere inside the form to close it. + > 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. 1. 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.](../media/tutorial-windows-forms-picture-viewer-layout/table-layout-panel-properties.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/table-layout-panel-properties.png" alt-text="Screenshot shows the Properties window showing the TableLayoutPanel control."::: 1. 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.](../media/tutorial-windows-forms-picture-viewer-layout/dock-property.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/dock-property.png" alt-text="Screenshot shows the Properties window with Fill selected."::: *Docking* refers to how a window is attached to another window or area. @@ -165,21 +146,21 @@ This section shows you how to change the title of your form, resize the form, an Select the triangle to display the control's task list. - ![Screenshot shows TableLayoutPanel tasks.](../media/tutorial-windows-forms-picture-viewer-layout/table-layout-panel-tasks.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/table-layout-panel-tasks.png" alt-text="Screenshot shows TableLayoutPanel tasks."::: 1. Select **Edit Rows and Columns** to display the **Column and Row Styles** dialog box. -1. Select **Column1** and set its size to 15 percent. Be sure the **Percent** button is selected. +1. Select **Column1** and set its size to 15 percent. Be sure the **Percent** option is selected. 1. Select **Column2** and set it to 85 percent. - ![Screenshot shows TableLayoutPanel column and row styles.](../media/tutorial-windows-forms-picture-viewer-layout/layout-column-row-styles-size-percent.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/layout-column-row-styles-size-percent.png" alt-text="Screenshot shows TableLayoutPanel column and row styles."::: -1. 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. +1. 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.](../media/tutorial-windows-forms-picture-viewer-layout/form-layout.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/form-layout.png" alt-text="Screenshot shows the form with resized TableLayoutPanel."::: Your layout is complete. @@ -204,13 +185,13 @@ To run the app, follow these steps. Visual Studio runs your app. A window with the title **Picture Viewer** appears. - ![Screenshot shows the Windows Forms app running.](../media/tutorial-windows-forms-picture-viewer-layout/run-empty-windows-forms-app.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/run-empty-windows-forms-app.png" alt-text="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.](../media/tutorial-windows-forms-picture-viewer-layout/debug-toolbar.png) + :::image type="content" source="../media/tutorial-windows-forms-picture-viewer-layout/debug-toolbar.png" alt-text="Screenshot shows the Debugging toolbar where you can stop the app."::: 1. Use one of the following methods to stop your app: @@ -219,12 +200,12 @@ To run the app, follow these steps. - 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. + 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](../../debugger/debugger-feature-tour.md). -## Next steps +## Next step Advance to the next tutorial to learn how to add controls to your Picture Viewer program. > [!div class="nextstepaction"] diff --git a/docs/get-started/media/docs-programming-language-control.png b/docs/get-started/media/docs-programming-language-control.png index b6f3e655a48..65359d7d4a4 100644 Binary files a/docs/get-started/media/docs-programming-language-control.png and b/docs/get-started/media/docs-programming-language-control.png differ diff --git a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/configure-new-project-2019.png b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/configure-new-project-2019.png new file mode 100644 index 00000000000..6be936ca0aa Binary files /dev/null and b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/configure-new-project-2019.png differ diff --git a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/configure-new-project.png b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/configure-new-project.png index 013b602cc8b..78bac5b3cef 100644 Binary files a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/configure-new-project.png and b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/configure-new-project.png differ diff --git a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme-2019.png b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme-2019.png index 3e7a5062da3..a29ad3177ca 100644 Binary files a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme-2019.png and b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme-2019.png differ diff --git a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme.png b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme.png index 10abdebd2b3..686b3a06627 100644 Binary files a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme.png and b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-new-project-dark-theme.png differ diff --git a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms-2019.png b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms-2019.png new file mode 100644 index 00000000000..90b118100a9 Binary files /dev/null and b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms-2019.png differ diff --git a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png index 231fa7bb843..f5b6b7cd3f7 100644 Binary files a/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png and b/docs/get-started/media/tutorial-windows-forms-picture-viewer-layout/create-project-windows-forms.png differ diff --git a/docs/ide/code-snippets.md b/docs/ide/code-snippets.md index 8c678d7ac02..2d494d2f748 100644 --- a/docs/ide/code-snippets.md +++ b/docs/ide/code-snippets.md @@ -1,7 +1,7 @@ --- title: Create and reuse code block snippets description: Explore code snippets, which are small blocks of reusable code that you can insert into a code file, such as `try-finally` or `if-else` blocks, classes, or methods. -ms.date: 12/14/2022 +ms.date: 03/29/2024 ms.topic: conceptual f1_keywords: - vs.ExpansionManagerImport