Skip to content

Commit

Permalink
.NET MAUI Blazor Hybrid tutorial updates (#25942)
Browse files Browse the repository at this point in the history
  • Loading branch information
guardrex authored May 23, 2022
1 parent 5001764 commit cf144b6
Show file tree
Hide file tree
Showing 14 changed files with 39 additions and 31 deletions.
66 changes: 37 additions & 29 deletions aspnetcore/blazor/hybrid/tutorials/maui.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@ This tutorial shows you how to build and run a .NET MAUI Blazor app. You learn h
## Prerequisites

* [Supported platforms (.NET MAUI documentation)](/dotnet/maui/supported-platforms)
* [Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/) with the **Mobile development with .NET** workload.
* [Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/) 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.
* [Enable hardware acceleration](/dotnet/maui/android/emulator/hardware-acceleration) to improve the performance of the Android emulator.

> [!NOTE]
> Blazor Hybrid has reached General Availablility (GA) and is fully supported for production workloads. Visual Studio and Visual Studio for Mac are in prerelease for working on Blazor Hybrid apps and may be modified before final release. We recommend keeping Visual Studio 2022 Preview updated for the best tooling experience.
> Blazor Hybrid has reached General Availability (GA) and is fully supported for production workloads. Visual Studio and Visual Studio for Mac are in prerelease for working on Blazor Hybrid apps and may be modified before final release. We recommend keeping Visual Studio 2022 Preview updated for the best tooling experience.
## Create a .NET MAUI Blazor app

Expand All @@ -52,60 +52,68 @@ Wait for Visual Studio to create the project and for the project's dependencies

:::image type="content" source="maui/_static/restored-dependencies.png" alt-text="Restored dependencies.":::

In the **Android SDK License Acceptance** window, select the **Accept** button:
## Run the app on Windows

In the Visual Studio toolbar, select the **Windows Machine** button to build and start the project:

:::image type="content" source="maui/_static/windows-machine-button.png" alt-text="Windows Machine button.":::

If Developer Mode isn't enabled, you're prompted to enable it in **Settings** > **For developers** > **Developer Mode**. Set the switch to **On**:

:::image type="content" source="maui/_static/windows-developer-mode.png" alt-text="Windows Developer Mode enabled.":::

:::image type="content" source="maui/_static/android-sdk-license.png" alt-text="Android SDK License Acceptance window.":::
The app running as a Windows desktop app:

Wait for Visual Studio to download the Android SDK and Android Emulator.
:::image type="content" source="maui/_static/running-app-windows.png" alt-text="App running on Windows.":::

## Run the app in the Android Emulator

In the Visual Studio toolbar, select the **Android Emulator** button to build the project:
If you followed the guidance in the [Run the app on Windows](#run-the-app-on-windows) section, select the **Stop Debugging** button in the toolbar to stop the running Windows app:

:::image type="content" source="maui/_static/android-emulator-button.png" alt-text="Android Emulator button.":::
:::image type="content" source="maui/_static/stop-debugging-button.png" alt-text="Stop Debugging button.":::

In the **New Device** window, select the **Create** button:
In the Visual Studio toolbar, select the start configuration drop-down button. Select **Android Emulators** > **Android Emulator**:

:::image type="content" source="maui/_static/new-android-device.png" alt-text="New Android Device window.":::
:::image type="content" source="maui/_static/android-emulators-android-emulator-button.png" alt-text="Android Emulators drop-down selection for the Android Emulator button.":::

In the **License Acceptance** window, select the **Accept** button:
Android SDKs are required to build apps for Android. In the **Error List** panel, a message appears asking you to double-click the message to install the required Android SDKs:

:::image type="content" source="maui/_static/license-acceptance.png" alt-text="License Acceptance window.":::
:::image type="content" source="maui/_static/error-list.png" alt-text="Visual Studio Error List with message asking you to click the message to install Android SDKs.":::

Wait for Visual Studio to download, unzip, and create an Android Emulator.
The **Android SDK License Acceptance** window appears, select the **Accept** button for each license that appears. An additional window appears for the **Android Emulator** and **SDK Patch Applier** licenses. Select the **Accept** button.

> [!NOTE]
> [Enable hardware acceleration](/xamarin/android/get-started/installation/android-emulator/hardware-acceleration) to improve the performance of the Android emulator.
Wait for Visual Studio to download the Android SDK and Android Emulator. You can track the progress by selecting the background tasks indicator in the lower-left corner of the Visual Studio UI:

Close the **Android Device Manager** window.
:::image type="content" source="maui/_static/background-tasks-indicator.png" alt-text="Visual Studio background tasks indicator.":::

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:
The indicator shows a checkmark when the background tasks are complete:

:::image type="content" source="maui/_static/pixel5-api30.png" alt-text="Pixel 5 API 30 emulator button.":::
:::image type="content" source="maui/_static/background-tasks-indicator-checked.png" alt-text="Visual Studio background tasks indicator checked.":::

Visual Studio starts the Android Emulator, builds the project, and deploys the app to the emulator.
In the toolbar, select the **Android Emulator** button:

The app running in the Android Emulator:
:::image type="content" source="maui/_static/android-emulator-button.png" alt-text="Android Emulator button.":::

:::image type="content" source="maui/_static/running-app-android.png" alt-text="App running in the Android Emulator.":::
In the **Create a Default Android Device** window, select the **Create** button:

## Run the app on Windows
:::image type="content" source="maui/_static/new-android-device.png" alt-text="Create a Default Android Device window.":::

In the Visual Studio toolbar, select the start configuration drop-down button:
Wait for Visual Studio to download, unzip, and create an Android Emulator. When the Android phone emulator is ready, select the **Start** button.

:::image type="content" source="maui/_static/windows-machine-button-1.png" alt-text="Start configuration button.":::
> [!NOTE]
> [Enable hardware acceleration](/xamarin/android/get-started/installation/android-emulator/hardware-acceleration) to improve the performance of the Android emulator.
Select the **Windows Machine** button to build and start the project:
Close the **Android Device Manager** window. Wait until the emulated phone window appears, the Android OS loads, and the home screen appears.

:::image type="content" source="maui/_static/windows-machine-button-2.png" alt-text="Windows Machine 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:

If Developer Mode isn't enabled, you're prompted to enable it in **Settings** > **For developers** > **Developer Mode**. Set the switch to **On**:
:::image type="content" source="maui/_static/pixel5-api30.png" alt-text="Pixel 5 API 30 emulator button.":::

:::image type="content" source="maui/_static/windows-developer-mode.png" alt-text="Windows Developer Mode enabled.":::
Visual Studio builds the project and deploys the app to the emulator.

The app running as a Windows desktop app:
The app running in the Android Emulator:

:::image type="content" source="maui/_static/running-app-windows.png" alt-text="App running on Windows.":::
:::image type="content" source="maui/_static/running-app-android.png" alt-text="App running in the Android Emulator.":::

## Next steps

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
2 changes: 1 addition & 1 deletion aspnetcore/blazor/hybrid/tutorials/windows-forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ This tutorial shows you how to build and run a Windows Forms Blazor app. You lea
* [Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/) with the **.NET desktop development** workload

> [!NOTE]
> Blazor Hybrid has reached General Availablility (GA) and is fully supported for production workloads. Visual Studio and Visual Studio for Mac are in prerelease for working on Blazor Hybrid apps and may be modified before final release. We recommend keeping Visual Studio 2022 Preview updated for the best tooling experience.
> Blazor Hybrid has reached General Availability (GA) and is fully supported for production workloads. Visual Studio and Visual Studio for Mac are in prerelease for working on Blazor Hybrid apps and may be modified before final release. We recommend keeping Visual Studio 2022 Preview updated for the best tooling experience.
## Visual Studio workload

Expand Down
2 changes: 1 addition & 1 deletion aspnetcore/blazor/hybrid/tutorials/wpf.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ This tutorial shows you how to build and run a WPF Blazor app. You learn how to:
* [Visual Studio 2022 Preview](https://visualstudio.microsoft.com/vs/preview/) with the **.NET desktop development** workload

> [!NOTE]
> Blazor Hybrid has reached General Availablility (GA) and is fully supported for production workloads. Visual Studio and Visual Studio for Mac are in prerelease for working on Blazor Hybrid apps and may be modified before final release. We recommend keeping Visual Studio 2022 Preview updated for the best tooling experience.
> Blazor Hybrid has reached General Availability (GA) and is fully supported for production workloads. Visual Studio and Visual Studio for Mac are in prerelease for working on Blazor Hybrid apps and may be modified before final release. We recommend keeping Visual Studio 2022 Preview updated for the best tooling experience.
## Visual Studio workload

Expand Down

0 comments on commit cf144b6

Please sign in to comment.