diff --git a/aspnetcore/blazor/hybrid/class-libraries.md b/aspnetcore/blazor/hybrid/class-libraries.md index b3ef863e1f3a..538ae455680e 100644 --- a/aspnetcore/blazor/hybrid/class-libraries.md +++ b/aspnetcore/blazor/hybrid/class-libraries.md @@ -19,7 +19,7 @@ This article builds on the general concepts found in the following articles: * * -The examples in this article share assets between a Blazor Server app and a .NET MAUI Blazor app in the same solution: +The examples in this article share assets between a Blazor Server app and a .NET MAUI Blazor Hybrid app in the same solution: * Although a Blazor Server app is used, the guidance applies equally to Blazor WebAssembly apps sharing assets with a Blazor Hybrid app. * Projects are in the same [solution](/visualstudio/ide/solutions-and-projects-in-visual-studio#solutions), but an RCL can supply shared assets to projects outside of a solution. @@ -266,7 +266,7 @@ HELD PER https://github.com/dotnet/AspNetCore.Docs/pull/26331#discussion_r927174 The following example: -* Assumes that a `CustomService` class must be implemented for each hosting model, including the platforms of a .NET MAUI Blazor app, because the code for the service differs for each platform (Android, macOS, Windows, iOS) and a Blazor Server/Blazor WebAssembly app. +* Assumes that a `CustomService` class must be implemented for each hosting model, including the platforms of a .NET MAUI Blazor Hybrid app, because the code for the service differs for each platform (Android, macOS, Windows, iOS) and a Blazor Server/Blazor WebAssembly app. * Places an interface for the service in the Razor class library (RCL). The RCL is named `SharedLibrary`. The interface defines a method that returns a message. `Interfaces/ICustomService.cs` in the RCL: diff --git a/aspnetcore/blazor/hybrid/developer-tools.md b/aspnetcore/blazor/hybrid/developer-tools.md index db9886592f8e..228b0e334f3b 100644 --- a/aspnetcore/blazor/hybrid/developer-tools.md +++ b/aspnetcore/blazor/hybrid/developer-tools.md @@ -43,7 +43,7 @@ If the project isn't already configured for browser developer tools, add support To use browser developer tools with a Windows app: -1. Run the .NET MAUI Blazor app for Windows and navigate to an app page that uses a . The developer tools console is unavailable from s without a Blazor :::no-loc text="Web View":::. +1. Run the .NET MAUI Blazor Hybrid app for Windows and navigate to an app page that uses a . The developer tools console is unavailable from s without a Blazor :::no-loc text="Web View":::. 1. Use the keyboard shortcut Ctrl+Shift+I to open browser developer tools. 1. Developer tools provide a variety of features for working with apps, including which assets the page requested, how long assets took to load, and the content of loaded assets. The following example shows the **Console** tab to see the console messages, which includes any exception messages generated by the framework or developer code: @@ -74,7 +74,7 @@ To use Safari developer tools with an iOS app: 1. Open desktop Safari. 1. Select the **Safari** > **Preferences** > **Advanced** > **Show Develop menu in the menu bar** checkbox. -1. Run the .NET MAUI Blazor app in the iOS simulator and navigate to an app page that uses a . The developer tools console is unavailable from s without a Blazor :::no-loc text="Web View":::. +1. Run the .NET MAUI Blazor Hybrid app in the iOS simulator and navigate to an app page that uses a . The developer tools console is unavailable from s without a Blazor :::no-loc text="Web View":::. 1. Return to Safari. Select **Develop** > **{REMOTE INSPECTION TARGET}** > **0.0.0.0**, where the `{REMOTE INSPECTION TARGET}` placeholder is either the devices's plain name (for example, `MacBook Pro`) or the device's serial number (for example `XMVM7VFF10`). If multiple entries for **0.0.0.0** are present, select the entry that highlights the . The is highlighted in blue in the iOS simulator when the correct **0.0.0.0** entry is selected. ![Safari Develop Simulator open showing two entries for "0.0.0.0" with the second entry selected because it highlights the BlazorWebView in the Visual Studio emulator UI.](~/blazor/hybrid/developer-tools/_static/ios.png) @@ -119,7 +119,7 @@ To use Safari developer tools with a macOS app: 1. Open desktop Safari. 1. Select the **Safari** > **Preferences** > **Advanced** > **Show Develop menu in the menu bar** checkbox. -1. Run the .NET MAUI Blazor app in macOS. +1. Run the .NET MAUI Blazor Hybrid app in macOS. 1. Return to Safari. Select **Develop** > **{REMOTE INSPECTION TARGET}** > **0.0.0.0**, where the `{REMOTE INSPECTION TARGET}` placeholder is either the devices's plain name (for example, `MacBook Pro`) or the device's serial number (for example `XMVM7VFF10`). If multiple entries for **0.0.0.0** are present, select the entry that highlights the . The is highlighted in blue in macOS when the correct **0.0.0.0** entry is selected. 1. The **Web Inspector** window appears for the . 1. Developer tools provide a variety of features for working with apps, including which assets the page requested, how long assets took to load, and the content of loaded assets. The following example shows the **Console** tab, which includes any exception messages generated by the framework or developer code: diff --git a/aspnetcore/blazor/hybrid/reuse-razor-components.md b/aspnetcore/blazor/hybrid/reuse-razor-components.md index 0144563519e5..e51c06cab7cd 100644 --- a/aspnetcore/blazor/hybrid/reuse-razor-components.md +++ b/aspnetcore/blazor/hybrid/reuse-razor-components.md @@ -62,12 +62,12 @@ Where you want to pack platform-specific features into a class library that can The following example demonstrates the concepts for images in an app that organizes photographs: -* A .NET MAUI Blazor app uses `InputPhoto` from an RCL that it references. +* A .NET MAUI Blazor Hybrid app uses `InputPhoto` from an RCL that it references. * The .NET MAUI app also references a .NET MAUI class library. * `InputPhoto` in the RCL injects an `ICameraService` interface, which is defined in the RCL. * `CameraService` partial class implementations for `ICameraService` are in the .NET MAUI class library (`CameraService.Windows.cs`, `CameraService.iOS.cs`, `CameraService.Android.cs`), which references the RCL. -![A .NET MAUI Blazor app uses InputPhoto from a Razor class library (RCL) that it references. The .NET MAUI app also references a .NET MAUI class library. InputPhoto in the RCL injects an ICameraService interface defined in the RCL. CameraService partial class implementations for ICameraService are in the .NET MAUI class library (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs), which references the RCL.](~/blazor/hybrid/reuse-razor-components/_static/diagram4.png) +![A .NET MAUI Blazor Hybrid app uses InputPhoto from a Razor class library (RCL) that it references. The .NET MAUI app also references a .NET MAUI class library. InputPhoto in the RCL injects an ICameraService interface defined in the RCL. CameraService partial class implementations for ICameraService are in the .NET MAUI class library (CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs), which references the RCL.](~/blazor/hybrid/reuse-razor-components/_static/diagram4.png) ## Additional resources diff --git a/aspnetcore/blazor/hybrid/root-component-parameters.md b/aspnetcore/blazor/hybrid/root-component-parameters.md index b3fb10357b12..10254ed5c365 100644 --- a/aspnetcore/blazor/hybrid/root-component-parameters.md +++ b/aspnetcore/blazor/hybrid/root-component-parameters.md @@ -25,12 +25,12 @@ The following example passes a view model to the root component, which further p * [Data binding and MVVM: Commanding (.NET MAUI documentation)](/dotnet/maui/xaml/fundamentals/mvvm#commanding): Explains data binding with MVVM using a keypad example. * [.NET MAUI Samples](https://github.com/dotnet/maui-samples): Provides sample code for `KeypadViewModel.cs`, which is required for this article's example. Implement the `Views/KeypadPage.xaml`/`Views/KeypadPage.xaml.cs` in the app if you wish to see the view model used in a content page. -Although the keypad example focuses on implementing the MVVM pattern in .NET MAUI Blazor apps: +Although the keypad example focuses on implementing the MVVM pattern in .NET MAUI Blazor Hybrid apps: * The dictionary of objects passed to root components can include any type for any purpose where you need to pass one or more parameters to the root component for use by Razor components in the app. * The concepts demonstrated by the following .NET MAUI Blazor example are the same for Windows Forms Blazor apps and WPF Blazor apps. -Place the view model into the .NET MAUI Blazor app. The view model is available from the .NET MAUI sample app: +Place the view model into the .NET MAUI Blazor Hybrid app. The view model is available from the .NET MAUI sample app: [`KeypadViewModel.cs` (`dotnet/maui-samples` GitHub repository)](https://github.com/dotnet/maui-samples/blob/main/6.0/XAML/Fundamentals/XamlSamples/ViewModels/KeypadViewModel.cs) diff --git a/aspnetcore/blazor/hybrid/tutorials/maui.md b/aspnetcore/blazor/hybrid/tutorials/maui.md index f6272a9f88d3..7f2bbc05f8a4 100644 --- a/aspnetcore/blazor/hybrid/tutorials/maui.md +++ b/aspnetcore/blazor/hybrid/tutorials/maui.md @@ -1,7 +1,7 @@ --- -title: Build a .NET MAUI Blazor app +title: Build a .NET MAUI Blazor Hybrid app author: guardrex -description: Build a .NET MAUI Blazor app step-by-step. +description: Build a .NET MAUI Blazor Hybrid app step-by-step. monikerRange: '>= aspnetcore-6.0' ms.author: riande ms.custom: mvc @@ -9,16 +9,16 @@ ms.date: 11/18/2022 uid: blazor/hybrid/tutorials/maui zone_pivot_groups: blazor-hybrid-tutorial-vs-operating-systems --- -# Build a .NET MAUI Blazor app +# Build a .NET MAUI Blazor Hybrid app [!INCLUDE[](~/includes/not-latest-version.md)] :::zone pivot="windows" -This tutorial shows you how to build and run a .NET MAUI Blazor app. You learn how to: +This tutorial shows you how to build and run a .NET MAUI Blazor Hybrid app. You learn how to: > [!div class="checklist"] -> * Create a .NET MAUI Blazor app project in Visual Studio +> * Create a .NET MAUI Blazor Hybrid app project in Visual Studio > * Run the app on Windows > * Run the app on an emulated mobile device in the Android Emulator @@ -26,7 +26,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](https://visualstudio.microsoft.com/vs/) with the **.NET Multi-platform App UI development** workload. -* [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. +* [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 Hybrid 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. For more information on prerequisites and installing software for this tutorial, see the following resources in the .NET MAUI documentation: @@ -34,7 +34,7 @@ For more information on prerequisites and installing software for this tutorial, * [Supported platforms for .NET MAUI apps](/dotnet/maui/supported-platforms) * [Installation (Visual Studio)](/dotnet/maui/get-started/installation?tabs=vswin) -## Create a .NET MAUI Blazor app +## Create a .NET MAUI Blazor Hybrid app Launch Visual Studio. In the **Start Window**, select **Create a new project**: @@ -44,10 +44,13 @@ In the **Create a new project** window, use the **Project type** dropdown to fil :::image type="content" source="maui/_static/win/new-project-1.png" alt-text="Filter templates to .NET MAUI."::: -Select the **.NET MAUI Blazor App** template and then select the **Next** button: +Select the **.NET MAUI Blazor Hybrid App** template and then select the **Next** button: :::image type="content" source="maui/_static/win/new-project-2.png" alt-text="Choose a template."::: +> [!NOTE] +> In .NET 7.0 or earlier, the template is named **.NET MAUI Blazor App**. + In the **Configure your new project** dialog: * Set the **Project name** to **:::no-loc text="MauiBlazor":::**. @@ -151,7 +154,7 @@ The app running in the Android Emulator: In this tutorial, you learned how to: > [!div class="checklist"] -> * Create a .NET MAUI Blazor app project in Visual Studio +> * Create a .NET MAUI Blazor Hybrid app project in Visual Studio > * Run the app on Windows > * Run the app on an emulated mobile device in the Android Emulator @@ -159,10 +162,10 @@ In this tutorial, you learned how to: :::zone pivot="macos" -This tutorial shows you how to build and run a .NET MAUI Blazor app. You learn how to: +This tutorial shows you how to build and run a .NET MAUI Blazor Hybrid app. You learn how to: > [!div class="checklist"] -> * Create a .NET MAUI Blazor app project in Visual Studio for Mac +> * Create a .NET MAUI Blazor Hybrid app project in Visual Studio for Mac > * Run the app on macOS with Mac Catalyst > * Run the app on an emulated mobile device in the Android Emulator @@ -187,7 +190,7 @@ For more information on prerequisites and installing software on macOS for this * [Supported platforms for .NET MAUI apps](/dotnet/maui/supported-platforms) * [Installation (Visual Studio for Mac)](/dotnet/maui/get-started/installation?tabs=vsmac) -## Create a .NET MAUI Blazor app +## Create a .NET MAUI Blazor Hybrid app Launch Visual Studio for Mac. If the **Start Window** isn't open, select **Show Start Window** from the **File** menu. @@ -195,17 +198,26 @@ Select the **New** button to create a new app: :::image type="content" source="maui/_static/mac/step01.png" alt-text="Visual Studio for Mac Start ."::: + + Select the **.NET MAUI Blazor App** project template and select the **Continue** button: -:::image type="content" source="maui/_static/mac/step02.png" alt-text="Choose a template for your new project dialog with the .NET MAUI Blazor App project template selected."::: +:::image type="content" source="maui/_static/mac/step02.png" alt-text="Choose a template for your new project dialog with the .NET MAUI Blazor Hybrid App project template selected."::: + + Select the target framework with the **Target framework** dropdown and select the **Continue** button: -:::image type="content" source="maui/_static/mac/step03.png" alt-text="Configure your new .NET MAUI Blazor App dialog with the .NET 7.0 target framework selected."::: +:::image type="content" source="maui/_static/mac/step03.png" alt-text="Configure your new .NET MAUI Blazor Hybrid App dialog with the .NET 7.0 target framework selected."::: Name the project in the **Project name** field and select the **Create** button. The project name for this demonstration is `MauiBlazor`: -:::image type="content" source="maui/_static/mac/step04.png" alt-text="Configure your new .NET MAUI Blazor App dialog with an project name of MauiBlazor."::: +:::image type="content" source="maui/_static/mac/step04.png" alt-text="Configure your new .NET MAUI Blazor Hybrid App dialog with an project name of MauiBlazor."::: ## Run the app on macOS with Mac Catalyst @@ -217,7 +229,7 @@ An alternative to using the play button to build and start the app is to select The app running on macOS with Mac Catalyst: -:::image type="content" source="maui/_static/mac/step06.png" alt-text="The .NET MAUI Blazor app running in Apple Safari."::: +:::image type="content" source="maui/_static/mac/step06.png" alt-text="The .NET MAUI Blazor Hybrid app running in Apple Safari."::: ## Run the app in the Android Emulator @@ -276,7 +288,7 @@ The app running on the emulated Android mobile device: In this tutorial, you learned how to: > [!div class="checklist"] -> * Create a .NET MAUI Blazor app project in Visual Studio for Mac +> * Create a .NET MAUI Blazor Hybrid app project in Visual Studio for Mac > * Run the app on macOS with Mac Catalyst > * Run the app on an emulated mobile device in the Android Emulator diff --git a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/additional-information.png b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/additional-information.png index 088c99adb8d9..2913cc0d25a1 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/additional-information.png and b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/additional-information.png differ diff --git a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/configure-project.png b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/configure-project.png index 5581881a6b7a..5c1332bdc982 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/configure-project.png and b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/configure-project.png differ diff --git a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restored.png b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restored.png index 12a3693c701f..2ce02d76e81b 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restored.png and b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restored.png differ diff --git a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restoring.png b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restoring.png index 93f13a2335e2..cd90da7e976a 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restoring.png and b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/dependencies-restoring.png differ diff --git a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/new-project-2.png b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/new-project-2.png index 7ae1eaf2e21a..2931b8af4312 100644 Binary files a/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/new-project-2.png and b/aspnetcore/blazor/hybrid/tutorials/maui/_static/win/new-project-2.png differ