diff --git a/docs/get-started/csharp/tutorial-wpf.md b/docs/get-started/csharp/tutorial-wpf.md index f79fb2d54b2..8ede426d0a0 100644 --- a/docs/get-started/csharp/tutorial-wpf.md +++ b/docs/get-started/csharp/tutorial-wpf.md @@ -1,8 +1,8 @@ --- title: "Hello World app with WPF in C#" -description: Create a simple Windows Desktop .NET application in C# with Visual Studio by using the Windows Presentation Foundation (WPF) UI framework. +description: In this tutorial, create a Windows Desktop .NET application in C# with Visual Studio by using the Windows Presentation Foundation (WPF) UI framework. ms.custom: vs-acquisition -ms.date: 10/18/2024 +ms.date: 12/03/2024 ms.subservice: general-ide ms.topic: tutorial dev_langs: @@ -10,26 +10,34 @@ dev_langs: author: anandmeg ms.author: meghaanand manager: mijacobs +#customer intent: As a developer, I want to create a straight-forward project using Visual Studio to learn how the product works and practice essential elements of the design process. --- -# Tutorial: Create a simple WPF application with C\# -By completing 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 UI, add code, and debug errors, while you learn about working in the integrated development environment ([IDE](visual-studio-ide.md)). +# Tutorial: Create a WPF application with C\# + +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](visual-studio-ide.md)). + +> [!div class="checklist"] +> - Configure the IDE +> - Create a project +> - Design the user interface +> - Debug and test the application ## Prerequisites -- If you haven't already installed Visual Studio, go to the [Visual Studio downloads](https://visualstudio.microsoft.com/downloads/?cid=learn-onpage-download-cta) page to install it for free. -- Make sure the **.NET desktop development** workload is installed. You can verify this configuration in the Visual Studio Installer. +- If you don't have Visual Studio, go to [Visual Studio downloads](https://visualstudio.microsoft.com/downloads/?cid=learn-onpage-download-cta) 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 WPF? +## What is Windows Presentation Foundation? -WPF, or Windows Presentation Foundation, is a UI (user interface) 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. +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, so if you have previously built applications with .NET using ASP.NET or Windows Forms, the programming experience should be familiar. WPF uses the Extensible Application Markup Language [XAML](../../xaml-tools/xaml-overview.md) to provide a declarative model for application programming. For more information, see [WPF .NET overview](/dotnet/desktop/wpf/overview/?view=netdesktop-6.0&preserve-view=true). +WPF is part of .NET. If you previously built applications with .NET using ASP.NET or Windows Forms, the programming experience should be familiar. WPF uses the [Extensible Application Markup Language](../../xaml-tools/xaml-overview.md) (XAML) to provide a declarative model for application programming. For more information, see [Desktop Guide (WPF .NET)](/dotnet/desktop/wpf/overview/?view=netdesktop-6.0&preserve-view=true). ## Configure the IDE -When you launch Visual Studio, the start window opens first. 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 left and right 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. +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 @@ -39,32 +47,32 @@ When you create an application in Visual Studio, you first create a project and 1. Open Visual Studio. -1. On the start window, choose **Create new project**. +1. On the start window, choose **Create a new project**. - ![View the 'Create a new project' window](../../get-started/media/vs-2019/start-window-create-new-project.png "Screenshot of the start window in Visual Studio 2019 with the 'Create a new project' option highlighted.") + :::image type="content" source="../../get-started/media/vs-2019/start-window-create-new-project.png" alt-text="Screenshot of the start window in Visual Studio 2019 with the 'Create a new project' option highlighted." lightbox="../../get-started/media/vs-2019/start-window-create-new-project.png"::: -1. On the **Create a new project** screen, search for "WPF," choose **WPF Application**, and then choose **Next**. +1. On the **Create a new project** screen, search for *WPF*. Choose **WPF Application**, and then choose **Next**. - :::image type="content" source="media/vs-2019/explore-ide-new-project-csharp-vs-2019.png" alt-text="Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted."::: + :::image type="content" source="media/vs-2019/explore-ide-new-project-csharp-vs-2019.png" alt-text="Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted." lightbox="media/vs-2019/explore-ide-new-project-csharp-vs-2019.png"::: -1. At the next screen, give the project a name, **HelloWPFApp**, and choose **Next**. +1. At the next screen, give the project a name, *HelloWPFApp*, and choose **Next**. :::image type="content" source="./media/vs-2019/explore-ide-name-project.png" alt-text="Screenshot of the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field." lightbox="./media/vs-2019/explore-ide-name-project.png"::: 1. In the **Additional information** window, **.NET Core 3.1** should already be selected for your target framework. If not, select **.NET Core 3.1**. Then, choose **Create**. - :::image type="content" source="./media/vs-2019/wpf-target-framework.png" alt-text="Screenshot that shows the Additional information window in Visual Studio with .NET Core 3.1 selected as the target framework for the new project." lightbox="./media/vs-2019/wpf-target-framework.png"::: + :::image type="content" source="./media/vs-2019/wpf-target-framework.png" alt-text="Screenshot that shows the Additional information window in Visual Studio with .NET Core 3.1 selected for the new project." lightbox="./media/vs-2019/wpf-target-framework.png"::: -Visual Studio creates the HelloWPFApp project and solution, and **Solution Explorer** shows the various files. The **WPF Designer** shows a design view and a XAML view of `MainWindow.xaml` 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. +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 `MainWindow.xaml` 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. -![WPF project and solution in the IDE](media/exploreide-wpfproject-cs.png "Screenshot of the HelloWPFApp project and solution in the Visual Studio IDE with the Solution Explorer open, and the XAML and designer views of 'MainWindow.xaml' open in the WPF Designer.") +:::image type="content" source="media/exploreide-wpfproject-cs.png " alt-text="Screenshot of the project and solution showing Solution Explorer and the XAML and designer views of MainWindow.xaml."::: > [!NOTE] -> For more information about XAML (eXtensible Application Markup Language), see the [XAML overview for WPF](/dotnet/framework/wpf/advanced/xaml-overview-wpf) page. +> For more information about XAML, see the [XAML overview for WPF](/dotnet/framework/wpf/advanced/xaml-overview-wpf) page. -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. +After you create the project, you can customize it. To do so, choose **Properties Window** from the **View** menu, or press **F4**. You can display and change options for project items, controls, and other items in an application. -![Properties window](../media/exploreide-hellowpfappfiles.png "Screenshot of the Solution Explorer window showing the Properties, References, and files in the HelloWPF app.") +:::image type="content" source="../media/exploreide-hellowpfappfiles.png" alt-text="Screenshot of the Solution Explorer window showing the Properties, References, and files in the HelloWPF app."::: ::: moniker-end @@ -74,26 +82,26 @@ After you create the project, you can customize it. To do so, choose **Propertie 1. On the start window, choose **Create a new project**. - :::image type="content" source="media/vs-2022/start-window-create-new-project.png" alt-text="Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted."::: + :::image type="content" source="media/vs-2022/start-window-create-new-project.png" alt-text="Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted." lightbox="media/vs-2022/start-window-create-new-project.png"::: -1. On the **Create a new project** screen, search for "WPF," choose **WPF Application**, and then choose **Next**. +1. On the **Create a new project** screen, search for *WPF*. Choose **WPF Application**, and then choose **Next**. - :::image type="content" source="media/vs-2022/explore-ide-new-project-csharp-wpf-vs-2022.png" alt-text="Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted."::: + :::image type="content" source="media/vs-2022/explore-ide-new-project-csharp-wpf-vs-2022.png" alt-text="Screenshot of the 'Create a new project' dialog with 'WPF' in the search box, and the 'WPF Application' template highlighted." lightbox="media/vs-2022/explore-ide-new-project-csharp-wpf-vs-2022.png"::: -1. At the next screen, give the project a name, **HelloWPFApp**, and choose **Next**. +1. At the next screen, give the project a name, *HelloWPFApp*, and choose **Next**. - :::image type="content" source="media/vs-2022/explore-ide-name-project.png" alt-text="Screenshot that shows the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field." lightbox="media/vs-2022/explore-ide-name-project.png"::: + :::image type="content" source="media/vs-2022/explore-ide-name-project.png" alt-text="Screenshot that shows the 'Configure your new project' dialog in with 'HelloWPFApp' entered in the Project name field." lightbox="media/vs-2022/explore-ide-name-project.png"::: 1. In the **Additional information** window, verify that **.NET 8.0** is selected for your target framework. Then, choose **Create**. - :::image type="content" source="media/vs-2022/wpf-target-framework.png" alt-text="Screenshot that shows the Additional information window in Visual Studio with .NET 8.0 selected as the target framework for the new project." lightbox="media/vs-2022/wpf-target-framework.png"::: + :::image type="content" source="media/vs-2022/wpf-target-framework.png" alt-text="Screenshot that shows the Additional information window with .NET 8.0 selected as the target framework for the new project." lightbox="media/vs-2022/wpf-target-framework.png"::: -Visual Studio creates the HelloWPFApp project and solution, and **Solution Explorer** shows the various files. The **WPF Designer** shows a design view and a XAML view of `MainWindow.xaml` 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. +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 `MainWindow.xaml` 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. -:::image type="content" source="media/vs-2022/explore-ide-wpf-project-cs.png" alt-text="Screenshot of the HelloWPFApp project and solution in Solution Explorer, and the XAML and designer views of 'MainWindow.xaml' open in the WPF Designer."::: +:::image type="content" source="media/vs-2022/explore-ide-wpf-project-cs.png" alt-text="Screenshot of the project and solution in Solution Explorer, and the XAML and designer views of 'MainWindow.xaml' open." lightbox="media/vs-2022/explore-ide-wpf-project-cs.png"::: > [!NOTE] -> For more information about XAML (eXtensible Application Markup Language), see the [XAML overview for WPF](/dotnet/framework/wpf/advanced/xaml-overview-wpf) page. +> For more information the Extensible Application Markup Language (XAML)), see [XAML overview for WPF](/dotnet/framework/wpf/advanced/xaml-overview-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. @@ -101,67 +109,71 @@ After you create the project, you can customize it. To do so, choose **Propertie ::: moniker-end -## Design the user interface (UI) +## Design the user interface -If the designer isn't open, select `MainWindow.xaml` and press **Shift**+**F7** to open the designer. +If the designer isn't open, select `MainWindow.xaml` and select **Shift**+**F7** to open the designer. -We add three types of controls to this application: a control, two controls, and a control. +In this tutorial, you add three types of controls to this application: a control, two controls, and a control. ### Add a TextBlock control +Follow these steps to add a TextBlock. + ::: moniker range="<=vs-2019" -1. Press **Ctrl**+**Q** to activate the search box and type **Toolbox**. Choose **View > Toolbox** from the results list. +1. Select **Ctrl**+**Q** to activate the search box and type **Toolbox**. Choose **View > Toolbox** from the results list. 1. In the **Toolbox**, expand the **Common WPF Controls** node to see the TextBlock control. - ![Toolbox with the TextBlock control highlighted](../media/exploreide-textblocktoolbox.png "Screenshot of the Toolbox window with the TextBlock control selected in the list of Common WPF Controls.") + :::image type="content" source="../media/exploreide-textblocktoolbox.png" alt-text="Screenshot of the Toolbox window with the TextBlock control selected in the list of Common WPF Controls."::: -1. Add a TextBlock control to the design surface by choosing the **TextBlock** item and dragging it to the window on the design surface. Center the control near the top of the window. In Visual Studio 2019 and later, you can use the red guidelines to center the control. +1. 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. In Visual Studio 2019 and later, you can use the guidelines to center the control. - Your window should resemble the following illustration: + Your window should resemble this illustration: - ![TextBlock control on the MainWindow form](media/explore-ide-window-with-textblock-only.png "Screenshot of the TextBlock control on the design surface of the MainWindow form.") + :::image type="content" source="media/explore-ide-window-with-textblock-only.png" alt-text="Screenshot of the TextBlock control on the design surface of the MainWindow form."::: - The XAML markup should look something like the following example: + The XAML markup should look like this example: - ```xaml - - - - ``` + ```xaml + + + + ``` ::: moniker-end ::: moniker range=">=vs-2022" -1. Press **Ctrl**+**Q** to activate the search box and type **Toolbox**. Choose **View > Toolbox** from the results list. +1. Select **Ctrl**+**Q** to activate the search box and type **Toolbox**. Choose **View > Toolbox** from the results list. 1. In the **Toolbox**, expand the **Common WPF Controls** node to see the TextBlock control. - :::image type="content" source="media/vs-2022/explore-ide-textblock-toolbox.png" alt-text="Screenshot of the Toolbox window with the TextBlock control selected in the list of Common WPF Controls."::: + :::image type="content" source="media/vs-2022/explore-ide-textblock-toolbox.png" alt-text="Screenshot of the Toolbox window with the TextBlock control selected in the list of Common WPF Controls."::: -1. Add a TextBlock control to the design surface by choosing the **TextBlock** item and dragging 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. +1. 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 the following image: + Your window should resemble this image: - :::image type="content" source="media/vs-2022/explore-ide-greetings-with-textblock-only.png" alt-text="Screenshot of the TextBlock control on the design surface. Guidelines are shown for positioning and resizing the control."::: + :::image type="content" source="media/vs-2022/explore-ide-greetings-with-textblock-only.png" alt-text="Screenshot of the TextBlock control on the design surface. Guidelines are shown for positioning and resizing the control."::: - The XAML markup should look something like the following example: + The XAML markup should look like this example: - ```xaml - - - - ``` + ```xaml + + + + ``` ::: moniker-end ### 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 something like the following example: + The XAML markup should look like this example: ```xaml @@ -169,32 +181,30 @@ We add three types of controls to this application: a ``` -1. Center the TextBlock again if you like, and then save your changes by pressing **Ctrl+S** or using the **File** menu item. - -Next, you add two [RadioButton](/dotnet/framework/wpf/controls/radiobutton) controls to the form. +1. 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](/dotnet/framework/wpf/controls/radiobutton) controls to the form. + ::: moniker range="<=vs-2019" 1. In the **Toolbox**, find the **RadioButton** control. - ![Toolbox window with RadioButton control selected](../media/exploreide-radiobuttontoolbox.png "Screenshot of the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.") + :::image type="content" source="../media/exploreide-radiobuttontoolbox.png" alt-text="Screenshot of the Toolbox window with the RadioButton control selected in the list of Common WPF Controls."::: -1. Add two RadioButton controls to the design surface by choosing the **RadioButton** item and dragging it to the window on the design surface. Move the buttons (by selecting them and using the arrow keys) so that the buttons appear side by side under the TextBlock control. Use the red guidelines to align the controls. +1. 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. Use the guidelines to align the controls. Your window should look like this: - ![MainWindow form with TextBlock and two radio buttons](media/explore-ide-window-with-radio-buttons.png "Screenshot of the Design window for MainWindow.xaml, showing a TextBlock control and two RadioButton controls positioned on the design surface.") + :::image type="content" source="media/explore-ide-window-with-radio-buttons.png" alt-text="Screenshot of the Design window for MainWindow.xaml, showing a TextBlock and two RadioButton controls on the design surface."::: -1. In the **Properties** window for the left RadioButton control, change the **Name** property (the property at the top of the **Properties** window) to `HelloButton`. +1. In the **Properties** window for the left RadioButton control, at the top, change the **Name** property to `HelloButton`. - ![RadioButton properties window](../media/exploreide-buttonproperties.png "Screenshot of the Properties window for a RadioButton control. The value of the Name property has been changed to 'HelloButton'.") + :::image type="content" source="../media/exploreide-buttonproperties.png" alt-text="Screenshot of the Properties window for a RadioButton control with the value of the Name property changed to HelloButton."::: 1. In the **Properties** window for the right RadioButton control, change the **Name** property to `GoodbyeButton`, and then save your changes. -Next, you add display text for each RadioButton control. The following procedure updates the **Content** property for a RadioButton control. - ::: moniker-end ::: moniker range=">=vs-2022" @@ -203,43 +213,43 @@ Next, you add display text for each RadioButton control. The following procedure :::image type="content" source="media/vs-2022/explore-ide-radiobutton-toolbox.png" alt-text="Screenshot of the Toolbox window with the RadioButton control selected in the list of Common WPF Controls."::: -1. Add two RadioButton controls to the design surface by choosing the **RadioButton** item and dragging it to the window on the design surface. Move the buttons (by selecting them and using the arrow keys) so that the buttons appear side by side under the TextBlock control. You can use the guidelines to align the controls. +1. 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: - :::image type="content" source="media/vs-2022/explore-ide-greetings-with-radiobuttons.png" alt-text="Screenshot of the Design window for Greetings.xaml, showing a TextBlock control and two RadioButton controls positioned on the design surface."::: + :::image type="content" source="media/vs-2022/explore-ide-greetings-with-radiobuttons.png" alt-text="Screenshot of the Design window for Greetings.xaml with a TextBlock and two RadioButton controls on the design surface."::: -1. In the **Properties** window for the left RadioButton control, change the **Name** property (the property at the top of the **Properties** window) to `HelloButton`. +1. In the **Properties** window for the left RadioButton control, at the top, change the **Name** property to `HelloButton`. - :::image type="content" source="media/vs-2022/explore-ide-button-properties.png" alt-text="Screenshot of the Properties window for a RadioButton control. The value of the Name property has been changed to HelloButton."::: + :::image type="content" source="media/vs-2022/explore-ide-button-properties.png" alt-text="Screenshot of the Properties window for a RadioButton control with the value of the Name property changed to HelloButton."::: 1. In the **Properties** window for the right RadioButton control, change the **Name** property to `GoodbyeButton`, and then save your changes. -Next, you add display text for each RadioButton control. The following procedure updates the **Content** property for a RadioButton control. - ::: moniker-end ### Add display text for each radio button -1. 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 the following example: +Next, add display text for each RadioButton control. The following procedure updates the **Content** property for a RadioButton control. - ```xaml - - - - - - ``` +- 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 + + + + + + ``` ### Set a radio button to be checked by default -In this step, we set HelloButton to be checked by default so that one of the two radio buttons is always selected. +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. 1. Add an **IsChecked** attribute and set it to **True**. Specifically, add `IsChecked="True"`. - The XAML markup should now look similar to the following example: + The XAML markup should now look similar to this example: ```xaml @@ -249,21 +259,21 @@ In this step, we set HelloButton to be checked by default so that one of the two ``` -The final UI element that you add is a [Button](/dotnet/framework/wpf/controls/button) control. - ### Add the button control +The final UI element that you add is a [Button](/dotnet/framework/wpf/controls/button) control. + ::: moniker range="<=vs-2019" -1. In the **Toolbox**, find the **Button** control, and then add it to the design surface under the RadioButton controls by dragging it to the form in the design view. If you're using Visual Studio 2019 or later, a red line helps you center the 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. A guideline helps you center the control. 1. 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 the following illustration. + Your window should resemble this illustration. - ![MainWindow form with control labels](media/explore-ide-window-with-control-labels-cs.png "Screenshot of the Design window for MainWindow.xaml showing a TextBlock control, two RadioButton controls labeled 'Hello' and 'Goodbye', and a button labeled 'Display'.") + :::image type="content" source="media/explore-ide-window-with-control-labels-cs.png" alt-text="Screenshot of the Design window with a TextBlock, Hello and Goodbye RadioButton controls, and a Display button."::: - The XAML markup should now look similar to the following example: + The XAML markup should now look similar to this example: ```xaml @@ -278,15 +288,15 @@ The final UI element that you add is a [Button](/dotnet/framework/wpf/controls/b ::: moniker range=">=vs-2022" -1. In the **Toolbox**, find the **Button** control, and then 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. +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. 1. 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 the following screenshot. + Your window should resemble this screenshot: - :::image type="content" source="media/vs-2022/explore-ide-greetings-with-control-labels-cs.png" alt-text="Screenshot of the Design window for Greetings.xaml showing a TextBlock control, two RadioButton controls labeled 'Hello' and 'Goodbye', and a button labeled 'Display'."::: + :::image type="content" source="media/vs-2022/explore-ide-greetings-with-control-labels-cs.png" alt-text="Screenshot of the Design window with a TextBlock, Hello and Goodbye RadioButton controls, and a button labeled Display." lightbox="media/vs-2022/explore-ide-greetings-with-control-labels-cs.png"::: - The XAML markup should now look similar to the following example: + The XAML markup should now look similar to this example: ```xaml @@ -307,27 +317,27 @@ When this application runs, a message box appears after a user chooses a radio b 1. On the design surface, double-click the **Display** button. - *MainWindow.xaml.cs* opens, with the cursor in the `Button_Click` event. - - ```csharp - private void Button_Click(object sender, RoutedEventArgs e) - { + *MainWindow.xaml.cs* opens, with the cursor in the `Button_Click` event. - } - ``` + ```csharp + private void Button_Click(object sender, RoutedEventArgs e) + { -1. Enter the following code: + } + ``` - ```csharp - if (HelloButton.IsChecked == true) - { - MessageBox.Show("Hello."); - } - else if (GoodbyeButton.IsChecked == true) - { - MessageBox.Show("Goodbye."); - } - ``` +1. Inside the braces, add the following code: + + ```csharp + if (HelloButton.IsChecked == true) + { + MessageBox.Show("Hello."); + } + else if (GoodbyeButton.IsChecked == true) + { + MessageBox.Show("Goodbye."); + } + ``` 1. Save the application. @@ -339,18 +349,18 @@ When this application runs, a message box appears after a user chooses a radio b 1. On the design surface, double-click the **Display** button. - *MainWindow.xaml.cs* opens, with the cursor in the `Button_Click` event. + *MainWindow.xaml.cs* opens, with the cursor in the `Button_Click` event. - ```csharp - private void Button_Click(object sender, RoutedEventArgs e) - { + ```csharp + 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 the following example: + + The XAML markup should now look similar to this example: ```xaml @@ -361,18 +371,18 @@ When this application runs, a message box appears after a user chooses a radio b ``` -1. Enter the following code: - - ```csharp - if (HelloButton.IsChecked == true) - { - MessageBox.Show("Hello."); - } - else if (GoodbyeButton.IsChecked == true) - { - MessageBox.Show("Goodbye."); - } - ``` +1. Inside the `Button_Click` braces, add the following code: + + ```csharp + if (HelloButton.IsChecked == true) + { + MessageBox.Show("Hello."); + } + else if (GoodbyeButton.IsChecked == true) + { + MessageBox.Show("Goodbye."); + } + ``` 1. Save the application. @@ -380,42 +390,43 @@ When this application runs, a message box appears after a user chooses a radio b ## Debug and test the application -Next, you 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, but later you might read [Build a WPF application (WPF)](/dotnet/framework/wpf/app-development/building-a-wpf-application-wpf) and [Debug WPF](../../debugger/debugging-wpf.md) for more information. +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)](/dotnet/framework/wpf/app-development/building-a-wpf-application-wpf) and [Debug WPF](../../debugger/debugging-wpf.md). ### Change the name of MainWindow.xaml -Let's give MainWindow a more specific name. In **Solution Explorer**, right-click on `MainWindow.xaml` and choose **Rename**. Rename the file to *Greetings.xaml*. + +Give MainWindow a more specific name. In **Solution Explorer**, right-click `MainWindow.xaml` and choose **Rename**. Rename the file to *Greetings.xaml*. 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 we caused earlier by changing the name of the `MainWindow.xaml` file. +In this step, you find the error that was caused earlier by changing the name of the `MainWindow.xaml` file. #### Start debugging and find the error ::: moniker range="<=vs-2019" -1. Start the debugger by pressing **F5** or selecting **Debug**, then **Start Debugging**. +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 has occurred: *Cannot locate resource mainwindow.xaml*. + A **Break Mode** window appears. The **Output** window indicates that an IOException occurred: *Cannot locate resource mainwindow.xaml*. - ![IOException message](../media/exploreide-ioexception.png "Screenshot of the Output window showing a System.IO.IOException with the message, Cannot locate resource mainwindow.xaml.") + :::image type="content" source="../media/exploreide-ioexception.png" alt-text="Screenshot of the Output window showing a System.IO.IOException with the message, Cannot locate resource mainwindow.xaml."::: 1. Stop the debugger by choosing **Debug** > **Stop Debugging**. -We renamed `MainWindow.xaml` to *Greetings.xaml*, but the code still refers to `MainWindow.xaml` as the startup URI for the application, so the project can't start. +You renamed `MainWindow.xaml` to *Greetings.xaml*, but the code still refers to `MainWindow.xaml` as the startup URI for the application, so the project can't start. ::: moniker-end ::: moniker range=">=vs-2022" -1. Start the debugger by pressing **F5** or selecting **Debug**, then **Start Debugging**. +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 has occurred: *Cannot locate resource mainwindow.xaml*. + A **Break Mode** window appears, and the **Output** window indicates that an IOException occurred: *Cannot locate resource mainwindow.xaml*. :::image type="content" source="media/vs-2022/explore-ide-ioexception.png" alt-text="Screenshot of the Output window showing a System.IO.IOException with the message, Cannot locate resource mainwindow.xaml."::: 1. Stop the debugger by choosing **Debug** > **Stop Debugging**. -We renamed `MainWindow.xaml` to `Greetings.xaml` at the start of this tutorial, but the code still refers to `MainWindow.xaml` as the startup URI for the application, so the project can't start. +You renamed `MainWindow.xaml` to `Greetings.xaml`, but the code still refers to `MainWindow.xaml` as the startup URI for the application, so the project can't start. ::: moniker-end @@ -434,15 +445,15 @@ As an optional step, it avoids confusion to change the title of your application Start the debugger again (press **F5**). You should now see the **Greetings** window of your application. ::: moniker range="vs-2019" -![Screenshot of running app](media/vs-2019/exploreide-wpf-running-app.png "Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.") +:::image type="content" source="media/vs-2019/exploreide-wpf-running-app.png" alt-text="Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible and 'Hello' selected." lightbox="media/vs-2019/exploreide-wpf-running-app.png"::: ::: moniker-end ::: moniker range=">=vs-2022" -:::image type="content" source="media/vs-2022/explore-ide-wpf-running-app.png" alt-text="Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected."::: +:::image type="content" source="media/vs-2022/explore-ide-wpf-running-app.png" alt-text="Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible and 'Hello' selected."::: ::: moniker-end -Now close the application window to stop debugging. + To stop debugging, close the application window ### Debug with breakpoints @@ -452,35 +463,35 @@ You can test the code during debugging by adding some breakpoints. You can add b ::: moniker range="vs-2019" -1. Open *Greetings.xaml.cs*, and select the following line: `MessageBox.Show("Hello.")` +1. Open *Greetings.xaml.cs*, and select this line: `MessageBox.Show("Hello.")` 1. 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. + A red circle appears next to the line of code in the far left margin of the editor window. -1. Select the following line: `MessageBox.Show("Goodbye.")`. +1. Select this line: `MessageBox.Show("Goodbye.")`. -1. Press the **F9** key to add a breakpoint, and then press **F5** to start debugging. +1. Press the **F9** key to add a breakpoint, and then select **F5** to start debugging. 1. In the **Greetings** window, choose the **Hello** radio button, and then choose the **Display** button. - The line `MessageBox.Show("Hello.")` is highlighted in yellow. At the bottom of the IDE, the Autos, Locals, and Watch windows are docked together on the left side, and the Call Stack, Breakpoints, Exception Settings, Command, Immediate, and Output windows are docked together on the right side. + The line `MessageBox.Show("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. - ![Breakpoint in the debugger](media/exploreide-debugbreakpoint.png "Screenshot of a debug session in Visual Studio. The code window for Greetings.xaml.cs shows execution stopped at a breakpoint with a line highlighted in yellow.") + :::image type="content" source="media/exploreide-debugbreakpoint.png" alt-text="Screenshot of a debug session, with the code window showing execution stopped at a breakpoint highlighted in yellow." lightbox="media/exploreide-debugbreakpoint.png"::: 1. On the menu bar, choose **Debug** > **Step Out**. - The application resumes execution, and a message box with the word "Hello" appears. + The application resumes execution, and a message box with the word "Hello" appears. -1. Choose the **OK** button on the message box to close it. +1. Choose **OK** on the message box to close it. 1. In the **Greetings** window, choose the **Goodbye** radio button, and then choose the **Display** button. - The line `MessageBox.Show("Goodbye.")` is highlighted in yellow. + The line `MessageBox.Show("Goodbye.")` is highlighted in yellow. -1. Choose the **F5** key to continue debugging. When the message box appears, choose the **OK** button on the message box to close it. +1. Choose the **F5** key to continue debugging. When the message box appears, choose **OK** on the message box to close it. -1. Close the application window to stop debugging. +1. To stop debugging, close the application window. 1. On the menu bar, choose **Debug** > **Disable All Breakpoints**. @@ -488,35 +499,35 @@ You can test the code during debugging by adding some breakpoints. You can add b ::: moniker range=">=vs-2022" -1. Open *Greetings.xaml.cs*, and select the following line: `MessageBox.Show("Hello.")` +1. Open *Greetings.xaml.cs*, and select this line: `MessageBox.Show("Hello.")` 1. 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. + A red circle appears next to the line of code in the far left margin of the editor window. -1. Select the following line: `MessageBox.Show("Goodbye.")`. +1. Select this line: `MessageBox.Show("Goodbye.")`. -1. Press the **F9** key to add a breakpoint, and then press **F5** to start debugging. +1. Press the **F9** key to add a breakpoint, and then select **F5** to start debugging. 1. In the **Greetings** window, choose the **Hello** radio button, and then choose the **Display** button. - The line `MessageBox.Show("Hello.")` is highlighted in yellow. At the bottom of the IDE, the Autos, Locals, and Watch windows are docked together on the left side, and the Call Stack, Breakpoints, Exception Settings, Command, Immediate, and Output windows are docked together on the right side. + The line `MessageBox.Show("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. - :::image type="content" source="media/vs-2022/explore-ide-debug-breakpoint.png" alt-text="Screenshot of a debug session in Visual Studio. The code window for Greetings.xaml.cs shows execution stopped at a breakpoint with a line highlighted in yellow."::: + :::image type="content" source="media/vs-2022/explore-ide-debug-breakpoint.png" alt-text="Screenshot of a debug session, with the code window showing execution stopped at a breakpoint highlighted in yellow." lightbox="media/vs-2022/explore-ide-debug-breakpoint.png"::: 1. On the menu bar, choose **Debug** > **Step Out**. - The application resumes execution, and a message box with the word "Hello" appears. + The application resumes execution, and a message box with the word "Hello" appears. -1. Choose the **OK** button on the message box to close it. +1. Choose **OK** on the message box to close it. 1. In the **Greetings** window, choose the **Goodbye** radio button, and then choose the **Display** button. - The line `MessageBox.Show("Goodbye.")` is highlighted in yellow. + The line `MessageBox.Show("Goodbye.")` is highlighted in yellow. -1. Choose the **F5** key to continue debugging. When the message box appears, choose the **OK** button on the message box to close it. +1. Choose the **F5** key to continue debugging. When the message box appears, choose **OK** on the message box to close it. -1. Close the application window to stop debugging. +1. To stop debugging, close the application window. 1. On the menu bar, choose **Debug** > **Disable All Breakpoints**. @@ -527,7 +538,7 @@ You can test the code during debugging by adding some breakpoints. You can add b 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. ::: moniker range="vs-2019" -![Screenshot of Live Visual Tree window](media/vs-2019/exploreide-live-visual-tree.png "Screenshot of the Live Visual Tree window, showing the tree of visual elements in the page while it is running.") +:::image type="content" source="media/vs-2019/exploreide-live-visual-tree.png" alt-text="Screenshot of the Live Visual Tree window, showing the tree of visual elements in the page while it's running."::: ::: moniker-end ::: moniker range=">=vs-2022" @@ -536,23 +547,23 @@ In the running app, you should see a widget that appears at the top of your wind ::: moniker-end ### Build a release version of the application -Now that you've verified that everything works, you can prepare a release build 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. -1. Change the build configuration for HelloWPFApp from **Debug** to **Release** by using the dropdown control on the toolbar (it says "Debug" currently). +1. Change the build configuration for HelloWPFApp from **Debug** to **Release** by using the dropdown control on the toolbar. It says **Debug** currently. 1. 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*). -## Next steps +## Related content + +- [Productivity tips](../../ide/productivity-features.md) + +## Next step Congratulations on completing this tutorial! To learn even more, continue with the following tutorials. > [!div class="nextstepaction"] > [Continue with more WPF tutorials](/dotnet/framework/wpf/getting-started/wpf-walkthroughs/) - -## See also - -- [Productivity tips](../../ide/productivity-features.md)