Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blazor MAUI tutorial 7.0 updates #27618

Merged
merged 1 commit into from
Nov 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 32 additions & 9 deletions aspnetcore/blazor/hybrid/tutorials/maui.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,27 +26,35 @@ This tutorial shows you how to build and run a .NET MAUI Blazor app. You learn h

## Create a .NET MAUI Blazor app

Launch Visual Studio 2022.

In the Start Window, select **Create a new project**:
Launch Visual Studio. In the **Start Window**, select **Create a new project**:

:::image type="content" source="maui/_static/new-solution.png" alt-text="New solution.":::

In the **Create a new project** window, use the **Project type** drop-down to filter **MAUI** templates:
In the **Create a new project** window, use the **Project type** dropdown to filter **MAUI** templates:

:::image type="content" source="maui/_static/new-project-1.png" alt-text="Filter templates to .NET MAUI.":::

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 **`MauiBlazor`**, choose a suitable location for the project, and select the **Create** button.
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.

:::image type="content" source="maui/_static/configure-project.png" alt-text="Configure the project.":::

Wait for Visual Studio to create the project and for the project's dependencies to be restored:
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.":::

Wait for Visual Studio to create the project and for the project's dependencies to be restored. Monitor the progress in **Solution Explorer** by opening the **Dependencies** entry.

Dependencies restoring:

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

Dependencies restored:

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

## Run the app on Windows

Expand All @@ -66,9 +74,9 @@ If you followed the guidance in the [Run the app on Windows](#run-the-app-on-win

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

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

:::image type="content" source="maui/_static/android-emulators-android-emulator-button.png" alt-text="Android Emulators drop-down selection for the Android Emulator button.":::
:::image type="content" source="maui/_static/android-emulators-android-emulator-button.png" alt-text="Android Emulators dropdown selection for the Android Emulator 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:

Expand Down Expand Up @@ -99,12 +107,27 @@ Wait for Visual Studio to download, unzip, and create an Android Emulator. When

Close the **Android Device Manager** window. Wait until the emulated phone window appears, the Android OS loads, and the home screen appears.

> [!IMPORTANT]
> The emulated phone must be powered on with the Android OS loaded in order to load and run the app in the debugger. If the emulated phone isn't running, turn on the phone with the **Power** button using either the <kbd>Ctrl</kbd>+<kbd>P</kbd> keyboard shortcut or by selecting the **Power** button in the UI:
>
> :::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:

:::image type="content" source="maui/_static/pixel5-api30.png" alt-text="Pixel 5 API 30 emulator button.":::

Visual Studio builds the project and deploys the app to the emulator.

Starting the emulator, loading the emulated phone and OS, and deploying and running the app can take several minutes depending on the speed of the system and whether or not [hardware acceleration](/xamarin/android/get-started/installation/android-emulator/hardware-acceleration) is enabled. You can monitor the progress of the deployment by inspecting Visual Studio's status bar at the bottom of the UI. The **Ready** indicator receives a checkmark and the emulator's deployment and app loading indicators disappear when the app is running:

During deployment:

:::image type="content" source="maui/_static/deploy-run-indicator-1.png" alt-text="The first deploy-run indicator that appears in the Visual Studio footer bar.":::

During app startup:

:::image type="content" source="maui/_static/deploy-run-indicator-2.png" alt-text="The second deploy-run indicator that appears in the Visual Studio footer bar.":::

The app running in the Android Emulator:

:::image type="content" source="maui/_static/running-app-android.png" alt-text="App running in the Android Emulator.":::
Expand Down
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.
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.
9 changes: 2 additions & 7 deletions aspnetcore/blazor/hybrid/tutorials/windows-forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ This tutorial shows you how to build and run a Windows Forms Blazor app. You lea
* [Supported platforms (Windows Forms documentation)](/dotnet/desktop/winforms/overview/)
* [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) with the **.NET desktop development** workload

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

## Visual Studio workload

If the **.NET desktop development** workload isn't installed, use the Visual Studio installer to install the workload. For more information, see [Modify Visual Studio workloads, components, and language packs](/visualstudio/install/modify-visual-studio).
Expand All @@ -32,13 +29,11 @@ If the **.NET desktop development** workload isn't installed, use the Visual Stu

## Create a Windows Forms Blazor project

Start Visual Studio 2022.

In the Start Window, select **Create a new project**:
Launch Visual Studio. In the **Start Window**, select **Create a new project**:

:::image type="content" source="windows-forms/_static/new-solution.png" alt-text="Create a new solution in Visual Studio.":::

In the **Create a new project** dialog, filter the **Project type** drop-down to **Desktop**. Select the C# project template for **Windows Forms App** and select the **Next** button:
In the **Create a new project** dialog, filter the **Project type** dropdown to **Desktop**. Select the C# project template for **Windows Forms App** and select the **Next** button:

:::image type="content" source="windows-forms/_static/create-project.png" alt-text="Create a new project in Visual Studio.":::

Expand Down
9 changes: 2 additions & 7 deletions aspnetcore/blazor/hybrid/tutorials/wpf.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,6 @@ This tutorial shows you how to build and run a WPF Blazor app. You learn how to:
* [Supported platforms (WPF documentation)](/dotnet/desktop/wpf/overview/)
* [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) with the **.NET desktop development** workload

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

## Visual Studio workload

If the **.NET desktop development** workload isn't installed, use the Visual Studio installer to install the workload. For more information, see [Modify Visual Studio workloads, components, and language packs](/visualstudio/install/modify-visual-studio).
Expand All @@ -33,13 +30,11 @@ If the **.NET desktop development** workload isn't installed, use the Visual Stu

## Create a WPF Blazor project

Start Visual Studio 2022.

In the Start Window, select **Create a new project**:
Launch Visual Studio. In the **Start Window**, select **Create a new project**:

:::image type="content" source="wpf/_static/new-solution.png" alt-text="Create a new solution in Visual Studio.":::

In the **Create a new project** dialog, filter the **Project type** drop-down to **Desktop**. Select the C# project template for **WPF Application** and select the **Next** button:
In the **Create a new project** dialog, filter the **Project type** dropdown to **Desktop**. Select the C# project template for **WPF Application** and select the **Next** button:

:::image type="content" source="wpf/_static/create-project.png" alt-text="Create a new project in Visual Studio.":::

Expand Down