diff --git a/.github/workflows/build-validation.yml b/.github/workflows/build-validation.yml index b144e62622..2f168db92c 100644 --- a/.github/workflows/build-validation.yml +++ b/.github/workflows/build-validation.yml @@ -3,7 +3,7 @@ name: 'Snippets 5000' # Controls when the action will run. Triggers the workflow on push or pull request on: - pull_request_target: + pull_request: paths: branches: '*' types: [opened, synchronize, reopened] diff --git a/dotnet-desktop-guide/net/winforms/get-started/create-app-visual-studio.md b/dotnet-desktop-guide/net/winforms/get-started/create-app-visual-studio.md index 027d577074..106064ea38 100644 --- a/dotnet-desktop-guide/net/winforms/get-started/create-app-visual-studio.md +++ b/dotnet-desktop-guide/net/winforms/get-started/create-app-visual-studio.md @@ -50,7 +50,7 @@ The first step to creating a new app is opening Visual Studio and generating the 01. Open Visual Studio. 01. Select **Create a new project**. - :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-create-new-project.png" alt-text="Create a new Windows Forms project in Visual Studio 2019 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-create-new-project.png" alt-text="Create a new Windows Forms project in Visual Studio 2019 for .NET."::: 01. In the **Search for templates** box, type **winforms**, and then press Enter. 01. In the **code language** dropdown, choose **C#** or **Visual Basic**. @@ -59,13 +59,13 @@ The first step to creating a new app is opening Visual Studio and generating the > [!IMPORTANT] > Don't select the **Windows Forms App (.NET _Framework_)** template. - :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-template-search.png" alt-text="Search for the Windows Forms template in Visual Studio 2019 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-template-search.png" alt-text="Search for the Windows Forms template in Visual Studio 2019 for .NET."::: 01. In the **Configure your new project** window, set the **Project name** to **Names** and click **Create**. You can also save your project to a different folder by adjusting the **Location** setting. - :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-config-new-project.png" alt-text="Configure new Windows Forms project in Visual Studio 2019 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-config-new-project.png" alt-text="Configure new Windows Forms project in Visual Studio 2019 for .NET."::: :::moniker-end @@ -85,17 +85,17 @@ The first step to creating a new app is opening Visual Studio and generating the The following image shows both C# and Visual Basic .NET project templates. If you applied the **code language** filter, you'll see the corresponding template. - :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-template-search.png" alt-text="Search for the Windows Forms template in Visual Studio 2022 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-template-search.png" alt-text="Search for the Windows Forms template in Visual Studio 2022 for .NET."::: 01. In the **Configure your new project** window, set the **Project name** to _Names_ and click **Next**. You can also save your project to a different folder by adjusting the **Location** path. - :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-config-new-project.png" alt-text="Configure new Windows Forms project in Visual Studio 2022 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-config-new-project.png" alt-text="Configure new Windows Forms project in Visual Studio 2022 for .NET."::: 01. Finally, in the **Additional information** window, select **.NET 6.0 (Long-term support)** for the **Framework** setting, and then click **Create**. - :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-select-framework.png" alt-text="Select the target framework for a Windows Forms project in Visual Studio 2022"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-select-framework.png" alt-text="Select the target framework for a Windows Forms project in Visual Studio 2022."::: :::moniker-end @@ -107,13 +107,13 @@ Support for Windows Forms in Visual Studio has four important components that yo :::moniker range="netdesktop-5.0" -:::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-main-window.png" alt-text="The important components of Visual Studio 2019 you should know when creating a Windows Forms project for .NET"::: +:::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-main-window.png" alt-text="The important components of Visual Studio 2019 you should know when creating a Windows Forms project for .NET."::: :::moniker-end :::moniker range="netdesktop-6.0" -:::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-main-window.png" alt-text="The important components of Visual Studio 2022 you should know when creating a Windows Forms project for .NET"::: +:::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-main-window.png" alt-text="The important components of Visual Studio 2022 you should know when creating a Windows Forms project for .NET."::: :::moniker-end @@ -169,13 +169,13 @@ You should have a form in the designer that looks similar to the following: :::moniker range="netdesktop-5.0" -:::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-form-preview.png" alt-text="Visual Studio 2019 designer with the form open for Windows Forms for .NET"::: +:::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-form-preview.png" alt-text="Visual Studio 2019 designer with the form open for Windows Forms for .NET."::: :::moniker-end :::moniker range="netdesktop-6.0" -:::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-form-preview.png" alt-text="Visual Studio 2022 designer with the form open for Windows Forms for .NET"::: +:::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-form-preview.png" alt-text="Visual Studio 2022 designer with the form open for Windows Forms for .NET."::: :::moniker-end diff --git a/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md b/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md index 115337c69d..4675ea9c8d 100644 --- a/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md +++ b/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md @@ -1,14 +1,16 @@ --- title: "Create a new app with Visual Studio tutorial" description: Follow this tutorial to learn how to create a new WPF app for .NET with Visual Studio 2019. -ms.date: 01/18/2021 +ms.date: 11/16/2021 ms.topic: tutorial dev_langs: - "csharp" - "vb" --- -# Tutorial: Create a new WPF app (WPF .NET) + + +# Tutorial: Create a new WPF app with .NET In this short tutorial, you'll learn how to create a new Windows Presentation Foundation (WPF) app with Visual Studio. Once the initial app has been generated, you'll learn how to add controls and how to handle events. By the end of this tutorial, you'll have a simple app that adds names to a list box. @@ -29,18 +31,32 @@ Here's a preview of the app you'll build while following this tutorial: ## Prerequisites -- [Visual Studio 2019 version 16.9 or later versions](https://visualstudio.microsoft.com/downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=inline+link&utm_content=download+vs2019+desktopguide+wpf) +:::moniker range="netdesktop-5.0" + +- [Visual Studio 2019 version 16.8 or later versions](https://visualstudio.microsoft.com/downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=inline+link&utm_content=download+vs2019+desktopguide+winforms) - Select the [Visual Studio Desktop workload](/visualstudio/install/modify-visual-studio?view=vs-2019&preserve-view=true#modify-workloads) - Select the [.NET 5 individual component](/visualstudio/install/modify-visual-studio?view=vs-2019&preserve-view=true#modify-individual-components) +:::moniker-end + +:::moniker range="netdesktop-6.0" + +- [Visual Studio 2022 version 17.0 or later versions](https://visualstudio.microsoft.com/downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=inline+link&0utm_content=download+vs2022+desktopguide+winforms) + - Select the [.NET desktop development workload](/visualstudio/install/modify-visual-studio?view=vs-2019&preserve-view=true#modify-workloads) + - Select the [.NET 6 individual component](/visualstudio/install/modify-visual-studio?view=vs-2019&preserve-view=true#modify-individual-components) + +:::moniker-end + ## Create a WPF app The first step to creating a new app is opening Visual Studio and generating the app from a template. +:::moniker range="netdesktop-5.0" + 01. Open Visual Studio. 01. Select **Create a new project**. - :::image type="content" source="media/create-app-visual-studio/vs-create-new-project.png" alt-text="Create a new WPF project in Visual Studio 2019 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-create-new-project.png" alt-text="Create a new WPF project in Visual Studio 2019 for .NET."::: 01. In the **Search for templates** box, type **wpf**, and then press Enter. 01. In the **code language** dropdown, choose **C#** or **Visual Basic**. @@ -49,7 +65,7 @@ The first step to creating a new app is opening Visual Studio and generating the > [!IMPORTANT] > Don't select the **WPF Application (.NET _Framework_)** template. - :::image type="content" source="media/create-app-visual-studio/vs-template-search.png" alt-text="Search for the WPF template in Visual Studio 2019 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-template-search.png" alt-text="Search for the WPF template in Visual Studio 2019 for .NET."::: 01. In the **Configure your new project** window, do the following: @@ -58,11 +74,46 @@ The first step to creating a new app is opening Visual Studio and generating the 01. Optionally, choose a different **Location** to save your code. 01. Select the **Next** button. - :::image type="content" source="media/create-app-visual-studio/vs-config-new-project.png" alt-text="Configure new WPF project in Visual Studio 2019 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-config-new-project.png" alt-text="Configure new WPF project in Visual Studio 2019 for .NET"::: 01. In the **Additional information** window, select **.NET 5.0 (Current)** for **Target Framework**. Select the **Create** button. - :::image type="content" source="media/create-app-visual-studio/vs-config-new-project-next.png" alt-text="Select target framework for new WPF project in Visual Studio 2019 for .NET"::: + :::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-config-new-project-next.png" alt-text="Select target framework for new WPF project in Visual Studio 2019 for .NET"::: + +:::moniker-end + +:::moniker range="netdesktop-6.0" + +01. Open Visual Studio. +01. Select **Create a new project**. + + :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-create-new-project.png" alt-text="Create a new WPF project in Visual Studio 2022 for .NET."::: + +01. In the **Search for templates** box, type _wpf_, and then press Enter. +01. In the **code language** dropdown, choose **C#** or **Visual Basic**. +01. In the templates list, select **WPF Application** and then select **Next**. + + > [!IMPORTANT] + > Don't select the **WPF Application (.NET _Framework_)** template. + + The following image shows both C# and Visual Basic .NET project templates. If you applied the **code language** filter, you'll see the corresponding template. + + :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-template-search.png" alt-text="Search for the WPF template in Visual Studio 2022 for .NET."::: + +01. In the **Configure your new project** window, do the following: + + 01. In the **Project name** box, enter _Names_. + 01. Select the **Place solution and project in the same directory** check box. + 01. Optionally, choose a different **Location** to save your code. + 01. Select the **Next** button. + + :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-config-new-project.png" alt-text="Configure new WPF project in Visual Studio 2022 for .NET"::: + +01. In the **Additional information** window, select **.NET 6.0 (Long-term support)** for **Target Framework**. Select the **Create** button. + + :::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-config-new-project-next.png" alt-text="Select target framework for new WPF project in Visual Studio 2022 for .NET"::: + +:::moniker-end Once the app is generated, Visual Studio should open the XAML designer pane for the default window, _MainWindow_. If the designer isn't visible, double-click on the _MainWindow.xaml_ file in the **Solution Explorer** pane to open the designer. @@ -70,7 +121,17 @@ Once the app is generated, Visual Studio should open the XAML designer pane for Support for WPF in Visual Studio has five important components that you'll interact with as you create an app: -:::image type="content" source="media/create-app-visual-studio/vs-main-window.png" alt-text="The important components of Visual Studio you should know when creating a WPF project for .NET"::: +:::moniker range="netdesktop-5.0" + +:::image type="content" source="media/create-app-visual-studio/netdesktop-5.0/vs-main-window.png" alt-text="The important components of Visual Studio you should know when creating a WPF project for .NET"::: + +:::moniker-end + +:::moniker range="netdesktop-6.0" + +:::image type="content" source="media/create-app-visual-studio/netdesktop-6.0/vs-main-window.png" alt-text="The important components of Visual Studio you should know when creating a WPF project for .NET"::: + +:::moniker-end 01. Solution Explorer @@ -98,7 +159,7 @@ Support for WPF in Visual Studio has five important components that you'll inter ## Examine the XAML -After your project is created, the XAML code editor is visible with a minimal amount of XAML code to display the window. If the editor isn't open, double-click the _MainWindow.xaml_ item in the **Solution Explorer**. You should see XAML similar to the following: +After your project is created, the XAML code editor is visible with a minimal amount of XAML code to display the window. If the editor isn't open, double-click the _MainWindow.xaml_ item in the **Solution Explorer**. You should see XAML similar to the following example: ```xaml ` represents the type of object being described by th - Namespaces - An XML namespace provides structure to the XML, determining what is or isn't allowed to be declared in the file. + An XML namespace provides structure to the XML, determining what XML content can be declared in the file. The main `xmlns` attribute imports the XML namespace for the entire file, and in this case, maps to the types declared by WPF. The other XML namespaces declare a prefix and import other types and objects for the XAML file. For example, the `xmlns:local` namespace declares the `local` prefix and maps to the objects declared by your project, the ones declared in the `Names` code namespace. @@ -131,17 +192,17 @@ The document root `` represents the type of object being described by th - `Title` attribute - Any normal attribute declared on the XAML object sets a property of that object. In this case the `Title` attribute sets the `Window.Title` property. + Any normal attribute declared on the XAML object sets a property of that object. In this case, the `Title` attribute sets the `Window.Title` property. ## Change the window -First, let's run the project and see the default output. You'll see that a window that pops up, without any controls, and a title of **MainWindow**: +First, run the project and see the default output. You'll see a window that pops up, without any controls, and a title of **MainWindow**: -:::image type="content" source="media/create-app-visual-studio/app-default.png" alt-text="A blank WPF app"::: +:::image type="content" source="media/create-app-visual-studio/app-default.png" alt-text="A blank WPF app" ::: For our example app, this window is too large, and the title bar isn't descriptive. Change the title and size of the window by changing the appropriate attributes in the XAML to the following values: -:::code language="xaml" source="snippets/create-app-visual-studio/csharp/Start.xaml" highlight="8"::: +:::code language="xaml" source="snippets/create-app-visual-studio/netdesktop-5.0/csharp/Start.xaml" highlight="8"::: ## Prepare the layout @@ -155,7 +216,7 @@ Before we add the new rows and columns, add a new attribute to the `` elem Next, define two rows and two columns, dividing the grid into four cells: -:::code language="xaml" source="snippets/create-app-visual-studio/csharp/LayoutStep2.xaml" highlight="9-21"::: +:::code language="xaml" source="snippets/create-app-visual-studio/netdesktop-5.0/csharp/LayoutStep2.xaml" highlight="9-21"::: Select the grid in either the XAML code editor or XAML designer, you'll see that the XAML designer shows each row and column: @@ -165,21 +226,21 @@ Select the grid in either the XAML code editor or XAML designer, you'll see that Now that the grid has been created, we can start adding controls to it. First, start with the label control. Create a new ` + diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/csharp/MainWindow.xaml.cs b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/csharp/MainWindow.xaml.cs new file mode 100644 index 0000000000..a0a957feb1 --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/csharp/MainWindow.xaml.cs @@ -0,0 +1,37 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; +using System.Windows; +using System.Windows.Controls; +using System.Windows.Data; +using System.Windows.Documents; +using System.Windows.Input; +using System.Windows.Media; +using System.Windows.Media.Imaging; +using System.Windows.Navigation; +using System.Windows.Shapes; + +namespace Names +{ + /// + /// Interaction logic for MainWindow.xaml + /// + public partial class MainWindow : Window + { + public MainWindow() + { + InitializeComponent(); + } + + private void ButtonAddName_Click(object sender, RoutedEventArgs e) + { + if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text)) + { + lstNames.Items.Add(txtName.Text); + txtName.Clear(); + } + } + } +} diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/csharp/Names.csproj b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/csharp/Names.csproj new file mode 100644 index 0000000000..4106cb0f2d --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/csharp/Names.csproj @@ -0,0 +1,10 @@ + + + + WinExe + net6.0-windows + enable + true + + + diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/Application.xaml b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/Application.xaml new file mode 100644 index 0000000000..19a53f9c84 --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/Application.xaml @@ -0,0 +1,9 @@ + + + + + diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/Application.xaml.vb b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/Application.xaml.vb new file mode 100644 index 0000000000..084cbe917e --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/Application.xaml.vb @@ -0,0 +1,6 @@ +Class Application + + ' Application-level events, such as Startup, Exit, and DispatcherUnhandledException + ' can be handled in this file. + +End Class diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/AssemblyInfo.vb b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/AssemblyInfo.vb new file mode 100644 index 0000000000..025ee7271e --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/AssemblyInfo.vb @@ -0,0 +1,11 @@ +Imports System.Windows + +'The ThemeInfo attribute describes where any theme specific and generic resource dictionaries can be found. +'1st parameter: where theme specific resource dictionaries are located +'(used if a resource is not found in the page, +' or application resource dictionaries) + +'2nd parameter: where the generic resource dictionary is located +'(used if a resource is not found in the page, +'app, and any theme specific resource dictionaries) + diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/MainWindow.xaml b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/MainWindow.xaml new file mode 100644 index 0000000000..f9978ecc4e --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/MainWindow.xaml @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/MainWindow.xaml.vb b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/MainWindow.xaml.vb new file mode 100644 index 0000000000..f61b30bdba --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/MainWindow.xaml.vb @@ -0,0 +1,8 @@ +Class MainWindow + Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs) + If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then + lstNames.Items.Add(txtName.Text) + txtName.Clear() + End If + End Sub +End Class diff --git a/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/NamesVB.vbproj b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/NamesVB.vbproj new file mode 100644 index 0000000000..4616fe42c1 --- /dev/null +++ b/dotnet-desktop-guide/net/wpf/get-started/snippets/create-app-visual-studio/netdesktop-6.0/vb/NamesVB.vbproj @@ -0,0 +1,22 @@ + + + + WinExe + net6.0-windows + Names + true + + + + + + + + + + + + + + +