diff --git a/aspnetcore/blazor/hybrid/tutorials/maui.md b/aspnetcore/blazor/hybrid/tutorials/maui.md index dc317afd2cc7..0783c0bbff9c 100644 --- a/aspnetcore/blazor/hybrid/tutorials/maui.md +++ b/aspnetcore/blazor/hybrid/tutorials/maui.md @@ -5,7 +5,7 @@ description: Build a .NET MAUI Blazor app step-by-step. monikerRange: '>= aspnetcore-6.0' ms.author: riande ms.custom: mvc -ms.date: 11/08/2022 +ms.date: 11/15/2022 uid: blazor/hybrid/tutorials/maui --- # Build a .NET MAUI Blazor app @@ -21,7 +21,7 @@ This tutorial shows you how to build and run a .NET MAUI Blazor app. You learn h * [Supported platforms (.NET MAUI documentation)](/dotnet/maui/supported-platforms) * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) with the **.NET Multi-platform App UI development** workload. -* [Microsoft Edge `WebView2`](https://developer.microsoft.com/microsoft-edge/webview2/): `WebView2` is required on Windows when running a native app. When developing .NET MAUI Blazor apps and only running them in Visual Studio's emulators, `WebView2` isn't required. +* [Microsoft Edge :::no-loc text="WebView2":::](https://developer.microsoft.com/microsoft-edge/webview2/): :::no-loc text="WebView2"::: is required on Windows when running a native app. When developing .NET MAUI Blazor apps and only running them in Visual Studio's emulators, :::no-loc text="WebView2"::: isn't required. * [Enable hardware acceleration](/dotnet/maui/android/emulator/hardware-acceleration) to improve the performance of the Android emulator. ## Create a .NET MAUI Blazor app @@ -38,11 +38,15 @@ Select the **.NET MAUI Blazor App** template and then select the **Next** button :::image type="content" source="maui/_static/new-project-2.png" alt-text="Choose a template."::: -In the **Configure your new project** dialog, set the **Project name** to **:::no-loc text="MauiBlazor":::**, choose a suitable location for the project, and select the **Next** button. +In the **Configure your new project** dialog: + +* Set the **Project name** to **:::no-loc text="MauiBlazor":::**. +* Choose a suitable location for the project. +* Select the **Next** button. :::image type="content" source="maui/_static/configure-project.png" alt-text="Configure the project."::: -In the **Additional information** dialog, select the framework version with the **Framework** dropdown list. Select the **Create** button. +In the **Additional information** dialog, select the framework version with the **Framework** dropdown list. Select the **Create** button: :::image type="content" source="maui/_static/additional-information.png" alt-text="Additional information dialog for selecting the framework version and creating the project."::: @@ -112,7 +116,7 @@ Close the **Android Device Manager** window. Wait until the emulated phone windo > > :::image type="content" source="maui/_static/android-phone-power-button.png" alt-text="The Android Emulator's Power button."::: -In the Visual Studio toolbar, select the **Pixel 5 - {VERSION}** button to build and run the project, where the `{VERSION}` placeholder is the Android version. In the following example, the Android version is `API 30 (Android 11.0 - API 30)`, and a later version appears depending on the Android SDK installed: +In the Visual Studio toolbar, select the **:::no-loc text="Pixel 5 - {VERSION}":::** button to build and run the project, where the `{VERSION}` placeholder is the Android version. In the following example, the Android version is **:::no-loc text="API 30 (Android 11.0 - API 30)":::**, and a later version appears depending on the Android SDK installed: :::image type="content" source="maui/_static/pixel5-api30.png" alt-text="Pixel 5 API 30 emulator button."::: diff --git a/aspnetcore/blazor/hybrid/tutorials/maui/_static/additional-information.png b/aspnetcore/blazor/hybrid/tutorials/maui/_static/additional-information.png index ec26ba4f9f82..088c99adb8d9 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/maui/_static/additional-information.png and b/aspnetcore/blazor/hybrid/tutorials/maui/_static/additional-information.png differ diff --git a/aspnetcore/blazor/hybrid/tutorials/windows-forms.md b/aspnetcore/blazor/hybrid/tutorials/windows-forms.md index 4abdbb4a80fc..1633810632f0 100644 --- a/aspnetcore/blazor/hybrid/tutorials/windows-forms.md +++ b/aspnetcore/blazor/hybrid/tutorials/windows-forms.md @@ -5,7 +5,7 @@ description: Build a Windows Forms Blazor app step-by-step. monikerRange: '>= aspnetcore-6.0' ms.author: riande ms.custom: mvc -ms.date: 11/08/2022 +ms.date: 11/15/2022 uid: blazor/hybrid/tutorials/windows-forms --- # Build a Windows Forms Blazor app @@ -37,11 +37,15 @@ In the **Create a new project** dialog, filter the **Project type** dropdown to :::image type="content" source="windows-forms/_static/create-project.png" alt-text="Create a new project in Visual Studio."::: -In the **Configure your new project** dialog, set the **Project name** to **`WinFormsBlazor`**, choose a suitable location for the project, and select the **Next** button. +In the **Configure your new project** dialog: + +* Set the **Project name** to **:::no-loc text="WinFormsBlazor":::**. +* Choose a suitable location for the project. +* Select the **Next** button. :::image type="content" source="windows-forms/_static/configure-project.png" alt-text="Configure the project."::: -In the **Additional information** dialog, select the framework version, which must be .NET 6.0 or later. Select the **Create** button: +In the **Additional information** dialog, select the framework version with the **Framework** dropdown list. Select the **Create** button: :::image type="content" source="windows-forms/_static/additional-information.png" alt-text="The Additional Information dialog."::: @@ -49,7 +53,7 @@ Use [NuGet Package Manager](/nuget/consume-packages/install-use-packages-visual- :::image type="content" source="windows-forms/_static/nuget-package-manager.png" alt-text="Use Nuget Package Manager in Visual Studio to install the Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet package."::: -In **Solution Explorer**, right-click the project's name, `WinFormsBlazor` and select **Edit Project File** to open the project file (`WinFormsBlazor.csproj`). +In **Solution Explorer**, right-click the project's name, **:::no-loc text="WinFormsBlazor":::**, and select **Edit Project File** to open the project file (`WinFormsBlazor.csproj`). At the top of the project file, change the SDK to `Microsoft.NET.Sdk.Razor`: @@ -186,7 +190,7 @@ In **Solution Explorer**, double-click on the `Form1.cs` file to open the design Open the **Toolbox** by either selecting the **Toolbox** button along the left edge of the Visual Studio window or selecting the **View** > **Toolbox** menu command. -Locate the `BlazorWebView` control under `Microsoft.AspNetCore.Components.WebView.WindowsForms`. Drag the `BlazorWebView` from the **Toolbox** into the `Form1` designer. Be careful not to accidentally drag a `WebView2` control into the form. +Locate the **`BlazorWebView`** control under **`Microsoft.AspNetCore.Components.WebView.WindowsForms`**. Drag the `BlazorWebView` from the **Toolbox** into the `Form1` designer. Be careful not to accidentally drag a **`WebView2`** control into the form. :::image type="content" source="windows-forms/_static/toolbox.png" alt-text="BlazorWebView in the Toolbox."::: diff --git a/aspnetcore/blazor/hybrid/tutorials/windows-forms/_static/additional-information.png b/aspnetcore/blazor/hybrid/tutorials/windows-forms/_static/additional-information.png index 0488c26e6f44..954f6698b3f2 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/windows-forms/_static/additional-information.png and b/aspnetcore/blazor/hybrid/tutorials/windows-forms/_static/additional-information.png differ diff --git a/aspnetcore/blazor/hybrid/tutorials/wpf.md b/aspnetcore/blazor/hybrid/tutorials/wpf.md index 636c398cabab..24465a75df7d 100644 --- a/aspnetcore/blazor/hybrid/tutorials/wpf.md +++ b/aspnetcore/blazor/hybrid/tutorials/wpf.md @@ -5,7 +5,7 @@ description: Build a Windows Presentation Foundation (WPF) app step-by-step. monikerRange: '>= aspnetcore-6.0' ms.author: riande ms.custom: mvc -ms.date: 11/08/2022 +ms.date: 11/15/2022 uid: blazor/hybrid/tutorials/wpf --- # Build a Windows Presentation Foundation (WPF) Blazor app @@ -38,11 +38,15 @@ In the **Create a new project** dialog, filter the **Project type** dropdown to :::image type="content" source="wpf/_static/create-project.png" alt-text="Create a new project in Visual Studio."::: -In the **Configure your new project** dialog, set the **Project name** to **`WpfBlazor`**, choose a suitable location for the project, and select the **Next** button. +In the **Configure your new project** dialog: + +* Set the **Project name** to **:::no-loc text="WpfBlazor":::**. +* Choose a suitable location for the project. +* Select the **Next** button. :::image type="content" source="wpf/_static/configure-project.png" alt-text="Configure the project."::: -In the **Additional information** dialog, select the framework version, which must be .NET 6.0 or later. Select the **Create** button: +In the **Additional information** dialog, select the framework version with the **Framework** dropdown list. Select the **Create** button: :::image type="content" source="wpf/_static/additional-information.png" alt-text="The Additional Information dialog for the WPF project."::: @@ -50,7 +54,7 @@ Use [NuGet Package Manager](/nuget/consume-packages/install-use-packages-visual- :::image type="content" source="wpf/_static/nuget-package-manager.png" alt-text="Use Nuget Package Manager in Visual Studio to install the Microsoft.AspNetCore.Components.WebView.Wpf NuGet package."::: -In **Solution Explorer**, right-click the `WpfBlazor` project and select **Edit Project File** to open the project file (`WpfBlazor.csproj`). +In **Solution Explorer**, right-click the project's name, **:::no-loc text="WpfBlazor":::**, and select **Edit Project File** to open the project file (`WpfBlazor.csproj`). At the top of the project file, change the SDK to `Microsoft.NET.Sdk.Razor`: @@ -63,14 +67,15 @@ At the top of the project file, change the SDK to `Microsoft.NET.Sdk.Razor`: Additional open issue on it: https://github.com/dotnet/maui/issues/5861 --> -Set the project's namespace, `WpfBlazor` in this tutorial, as the app's root namespace by adding the following property group to the project file: +In the project file's existing `` add the following markup to set the app's root namespace, which is `WpfBlazor` in this tutorial: ```xml - - WpfBlazor - +WpfBlazor ``` +> [!NOTE] +> The preceding guidance on setting the project's root namespace is a temporary workaround. For more information, see [[Blazor][Wpf] Root namespace related issue (dotnet/maui #5861)](https://github.com/dotnet/maui/issues/5861). + Save the changes to the project file (`WpfBlazor.csproj`). Add an `_Imports.razor` file to the root of the project with an [`@using`](xref:mvc/views/razor#using) directive for . diff --git a/aspnetcore/blazor/hybrid/tutorials/wpf/_static/additional-information.png b/aspnetcore/blazor/hybrid/tutorials/wpf/_static/additional-information.png index f9bddfe4cbef..1bad9cae7e68 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/wpf/_static/additional-information.png and b/aspnetcore/blazor/hybrid/tutorials/wpf/_static/additional-information.png differ