学习使用 Mobile Blazor Bindings 为儿童开发字母学习手机游戏

• 下载源代码 - 600 KB

引言

在本文中，我们将学习如何开始并使用新的 Mobile Blazor Binding，通过 Blazor 来开发跨平台移动应用程序。我们将涵盖以下主题：

• 如何安装 Mobile Blazor Binding
• 创建我们的第一个 Mobile Blazor Binding 应用程序
• 为孩子们创建一个简单的手机游戏应用程序，用来学习带声音的字母
• 使用 Xamarin Essentials 添加文本转语音功能

在 2020 年 1 月 14 日，微软推出了新的实验性 Mobile Blazor Binding，用于通过 Blazor 开发跨平台移动应用程序。是的，目前这只是一个实验性版本，但我们仍然可以开始使用和体验 Mobile Blazor Binding，通过 Blazor 代码来开发我们的移动应用程序。对于所有的 C# 程序员来说，这将是使用 C# 代码开发移动应用程序的一个良好开端。你不需要对 Xamarin、Android 或 iOS 开发有太多了解。

Mobile Blazor Binding 是 Blazor 和 Xamarin.Forms 的结合。UI 设计部分基于 Xamarin.Forms 的 UI 控件，而组件和代码部分则基于 Blazor。Blazor 和 Xamarin.Forms 的结合，允许用户使用 Web 编程模式为 iOS 和 Android 创建原生移动应用。所有针对 Android 和 iOS 的设计和代码部分都可以在 Blazor 项目中完成，然后使用 Android 和 iOS 项目在相应的模拟器或设备上运行该应用。

更多详情，请参考此链接。

注意： 如果您对我的“儿童学习字母”移动应用感兴趣，并想给您的孩子使用，可以从此链接免费下载，与 2 至 6 岁的孩子一起享受乐趣。

此应用目前仅针对 Android。

别忘了分享您的评论。

您需要请求访问权限才能下载该应用。

https://drive.google.com/file/d/13GqQJ2_TBaWcs_iwGQ3xk7eq6TTPqEat/view

Mobile Blazor Binding 应用程序入门

当我们创建 Mobile Blazor Binding 应用程序时，可以看到默认情况下，解决方案中会添加三个项目。在解决方案中，我们可以找到以下三个项目：

1. Blazor 项目

这是我们使用 Blazor 设计页面 UI 并执行移动应用程序开发所有业务逻辑的地方。请注意，在 UI 设计部分，我们将在 Razor 页面中使用与 Xamarin.Forms 相同的 UI 控件。在我们的代码部分，我们将更详细地了解如何使用 Blazor 代码添加新页面来创建我们自己的游戏。

2. Android 项目

我们还可以看到解决方案中添加了 Android 项目，该项目用于在 Android 模拟器或 Android 设备上构建和运行 Blazor 应用程序。

3. iOS 项目

我们还可以看到解决方案中添加了 iOS 项目，该项目用于在 iOS 模拟器或 iOS 设备上构建和运行 Blazor 应用程序。

背景

必备组件

要使用 Mobile Blazor Binding，您需要拥有 .NET Core 3.0 或更高版本的 SDK。您需要在计算机上安装 Visual Studio 或 Visual Studio for Mac，并安装 ASP.NET Web 开发和 Xamarin.Forms 移动开发工作负载。在本文中，我安装了最新版本的 Visual Studio 2019 并使用了 .NET Core 3.0 SDK。

• Visual Studio 2019
• .NET Core 3.0 SDK

安装 Mobile Blazor Binding 模板

安装完先决条件后，您就可以开始使用 Mobile Blazor Binding 了，但要使用 Mobile Blazor Binding，我们需要安装其模板。为此，请打开您的命令提示符。

点击 Windows 开始菜单：输入 CMD 并在命令提示符中按 Enter。

在命令提示符中，输入以下代码以安装 Microsoft MobileBlazorBindings 模板。

我们需要在 CMD 或 shell 中运行以下代码：

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta

等待几秒钟，模板即可安装完成。

Using the Code

创建 Mobile Blazor Binding 应用程序

点击 Windows 开始菜单：输入 CMD 并在命令提示符中按 Enter。

在命令提示符中，进入您想要创建应用程序的驱动器和文件夹。

在这里，我在 D:> 盘下创建了一个文件夹，我将在 Android/Blazor 文件夹下创建我的项目。

要在命令提示符中创建项目，请运行以下命令：

dotnet new mobileblazorbindings -o ShanuMobile

请注意，ShanuMobile 是 projectName。您可以在那里替换为您需要的项目名称。

Mobile Blazor Binding 解决方案结构

当我们创建 Mobile Blazor Binding Blazor 应用程序时，可以看到默认情况下解决方案中会添加三个项目。在解决方案中，我们可以找到 3 个项目，如下所示：

1. Blazor 项目

这是我们使用 Blazor 设计页面 UI 并执行移动应用程序开发所有业务逻辑的地方。请注意，在 UI 设计部分，我们将在 Razor 页面中使用与 Xamarin.Forms 相同的 UI 控件。在我们的代码部分，我们将更详细地了解如何使用 Blazor 代码添加新页面来创建我们自己的游戏。

在这里，我们创建的项目名称为“ShanuMobile”。它已作为 Blazor 项目被创建，在这个项目中，我们可以看到 Microsoft.MobileBlazorBinding 和 Xamarin.Forms 包已默认添加。此外，Blazor 项目还包含以下文件：

• Imports.razor

  Import.razor 文件包含了默认需要的 Xamarin.Forms 和 MobileBlazorBindings 的导入，以便使用 Blazor 代码为 Android 和 iOS 创建原生移动应用。

  

• App.cs

  在 App.cs 类中，我们会指定要加载的默认 razor 页面，在下面的代码中，我们可以看到 HelloWorldRazor 页面已被添加为默认显示。

  

• Counter.Razor

  默认情况下，我们可以看到已添加了 Counter.Razor 页面。在此页面中，我们可以看到示例中使用了 Xamarin.Form 的 UI 控件，如 StackLayout。我们还可以看到添加了 Blazor 代码函数，以在按钮点击事件中执行递增操作。

  

• HelloWorld.Razor

  在 HelloWorld Razor 页面中，我们可以看到该页面被设置为 ContentPage，此页面将首先加载，并且已将 Counter 页面添加到 Helloworld 的 content 页面内，以执行递增功能。

  

2. Android 项目

我们还可以看到解决方案中添加了 Android 项目，该项目用于在 Android 模拟器或 Android 设备上构建和运行 Blazor 应用程序。

在这里，我们创建的项目名称为“ShanuMobile”，并且默认创建了名为 ShanuMobile.Android 的 Android 项目。

在这里，我们没有太多需要处理的部分，因为我们将在 MainActivity 中添加我们的 Blazor 应用，以便在 Android 上运行我们的移动应用程序。我们还可以在此处的 Label 中添加应用显示名称，默认情况下，项目名称已添加到 Label 中。如果需要，您可以更改它，我们也可以从 MainActivity 更改应用的图标。为了在 Android 移动设备或模拟器上运行我们的 Blazor 应用，请将 Android 项目设置为启动项目。

3. iOS 项目

我们还可以看到解决方案中添加了 iOS 项目，该项目用于在 iOS 模拟器或 iOS 设备上构建和运行 Blazor 应用程序。

在这里，我们没有太多需要处理的部分，因为我们将在 AppDelegate 中添加我们的 Blazor 应用，以便在 iOS 上运行我们的移动应用程序。为了在 iOS 移动设备或模拟器上运行我们的 Blazor 应用，请将 iOS 项目设置为启动项目。

在 Android 上运行 Blazor 应用

现在我们可以在 Android 设备或 Android 模拟器上看到计数器演示。为此，首先将 Android 项目设置为启动项目。右键单击 Android 项目，然后点击“设为启动项目”。您可以通过 USB 将应用程序运行在连接的 Android 设备上，或通过已安装的 Android 模拟器运行。

在这里，我通过 USB 连接了我的三星 Galaxy Note 10 手机，并选择了我的移动设备来运行 Blazor 移动应用程序。您可以连接到您的 Android 设备或选择或安装 Android 模拟器来在模拟器中运行。

选择好我们的 Android 设备后，运行应用程序并等待几秒钟。我们可以看到我们的移动应用程序将在已连接的 Android 移动设备上运行。

使用 Blazor 创建儿童学习字母手机游戏

什么是 Shanu 儿童学习字母游戏？

这个游戏的主要目标是让 3 至 7 岁的儿童学习字母。游戏的功能包括：每个字母字符都会与相应的单词和图片一起显示，当字母字符、单词和图片显示时，孩子们还可以听到语音，这将更具互动性，孩子们会学习到这个字符，因为这个游戏具备字母、单词、图片和语音功能。每当下一个字母显示时，孩子们可以看到相应的单词图片和声音。孩子们还可以通过点击 PLAY Sound 按钮反复听同一个字母的发音。

例如，当“儿童学习字母”应用打开时，默认情况下，我们显示字母 A 以及图片 “Apple”，接着我们显示文本“A for Apple”，并播放发音为“A for Apple”的声音。如果孩子们想再次听发音，他们可以点击 PLAY SOUND 按钮。每当用户点击“PLAY Sound”按钮时，就会读出所选字母的单词。通过这种方式，孩子们可以轻松地学习字母，并且显示的图片对孩子们来说会很有趣，从而反复玩这个“儿童学习字母”游戏。这个应用非常简单，易于孩子们学习。应用还有“First <<”、“Last >>”、“ Next >”和“Previous <”按钮，用于显示下一个、上一个、第一个和最后一个字母字符。当用户点击“First <<”按钮时，会显示第一个字母“A for Apple”，并附上相应的图片和声音。当用户点击“Last >>”按钮时，会显示最后一个字母“Z for Zebra”，并附上相应的图片和声音，“ Next >”和“Previous <”按钮将显示下一个和上一个字母字符。

在这个游戏中，我们将使用 Xamarin.Essentials 来实现文本转语音功能，以便使用语音功能读出字母的声音，让学习对孩子们来说更有趣、更有帮助。

第一步：添加 Game.Razor 页面

右键单击 Blazor 项目，点击添加新项，选择 Razor 组件，将其命名为 Game.razor，然后点击添加。

第二步：向 Blazor 项目添加 Xamarin.Essentials 包

为了在我们的手机游戏应用中使用文本转语音功能，我们需要将 Xamarin.Essentials 包安装到 Blazor 项目中。为此，右键单击 Blazor 项目，然后点击管理 NUGet 包。

选择浏览，搜索 Xamarin Essentials，然后点击安装。等待几秒钟，让包安装到您的项目中。

添加字母图片

在我们的“儿童学习字母”游戏中，我们为每个字符显示图片。为此，我首先从 iconfinder.com 下载了可免费使用、分享和编辑的图标。此处使用的所有图标均可免费用于商业目的。我们下载了从字母 A 到 Z 的所有图片，例如，A for Apple 的图片，B for Ball 的图片。像这样，我们下载了图片，并更改了图片名称，使其与单词相同，例如，apple 的图片我将图片名称保持为“Apple”，zebra 的图片名称保持为“Zebra”。

我们可以看到，从字母 A 到 Z，我们已经收集了所有图片，将所有这些图片复制并添加到 Android 项目的 Drawable 文件夹下，如下图所示。

第三步：游戏设计部分编码

现在打开 Game.Razor 页面，并用以下代码替换原有代码，以设计我们的“儿童学习字母”移动应用。接下来，我们显示图片，并从代码中动态绑定图片的源。默认情况下，我们首先将图片绑定为“Apple.png”，并显示第一张图片为“Apple”。然后，我们添加标签以根据字母显示文本，并根据当前选择的字母从代码中动态绑定结果。默认情况下，我们显示的文本是“A for Apple”。接下来，我们设计用于显示第一个、下一个、上一个和最后一个字母的按钮。最后，我们再添加一个按钮，用于播放当前所选字母单词的声音。

<Frame CornerRadius="10" BackgroundColor="Color.Gold">

    <StackLayout Orientation="StackOrientation.Horizontal" 
                 HorizontalOptions="LayoutOptions.Center">
        <Label Text="Kids learn Alphabet Game!"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" FontSize="25" />
    </StackLayout>
</Frame>

<Frame CornerRadius="10" BackgroundColor="Color.Yellow">
    <StackLayout Orientation="StackOrientation.Horizontal" 
                 HorizontalOptions="LayoutOptions.Center">
        <Image Source="ImageSource.FromFile(curImgName)" 
               HeightRequest="230" WidthRequest="230" />
    </StackLayout>
</Frame>

<Frame CornerRadius="10" BackgroundColor="Color.LightGreen">
    <StackLayout Orientation="StackOrientation.Horizontal" 
                 HorizontalOptions="LayoutOptions.Center">
        <Label Text="@(curAlphabetNM)"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" FontSize="48" />
    </StackLayout>
</Frame>

<Frame CornerRadius="10" BackgroundColor="Color.DarkBlue">
    <StackLayout Orientation="StackOrientation.Horizontal" 
                 HorizontalOptions="LayoutOptions.Center">
        <Button Text="<<" BackgroundColor="Color.LightSkyBlue" 
                          OnClick="@showFirstAlphabet" />

        <Button Text=">" BackgroundColor="Color.LightSkyBlue" OnClick="@showNextAlphabet"/>

        <Button Text="<" BackgroundColor="Color.LightSkyBlue" OnClick="@showprevAlphabet"/>
        <Button Text="<<" BackgroundColor="Color.LightSkyBlue"  OnClick="@showLastAlphabet"/>
    </StackLayout>
</Frame>

<Frame CornerRadius="10" BackgroundColor="Color.DarkKhaki">
    <StackLayout Orientation="StackOrientation.Horizontal" 
                 HorizontalOptions="LayoutOptions.Center">
        <Button Text="Play Sound" 
                BackgroundColor="Color.LightYellow" OnClick="@playSound"/>
    </StackLayout>
</Frame>

第四步：游戏代码部分

现在打开 Game.Razor 页面，并将以下代码替换到上述设计代码的底部，作为我们移动游戏的代码部分。

首先声明所有需要的变量，这里我们创建了两个数组，用于显示字符和相应的单词。

当用户点击“First <<”按钮时，调用 showFirstAlphabet() 方法，显示 Alphabets 和 AlphabetNames 数组的第一个元素，将 CurrentIndex 设置为 0，并调用 playSound() 方法，使用 Xamarin.Essentials.TextToSpeech.SpeakAsync 读出所选的 curAlphabetNM 字符串。

当用户点击“Next >”按钮时，调用 showNextAlphabet() 方法，根据 CurrentIndex 显示 AlphabetNames 数组的下一个元素，并调用 playSound() 方法，使用 Xamarin.Essentials.TextToSpeech.SpeakAsync 读出所选的 curAlphabetNM 字符串。

当用户点击“Previous <” 按钮时，调用 showprevAlphabet() 方法，根据 CurrentIndex 显示 Alphabets 和 AlphabetNames 数组的上一个元素，并调用 playSound() 方法，使用 Xamarin.Essentials.TextToSpeech.SpeakAsync 读出所选的 curAlphabetNM 字符串。

当用户点击“Last >>” 按钮时，调用 showLastAlphabet() 方法，显示 Alphabets 和 AlphabetNames 数组的最后一个元素，将 CurrentIndex 设置为 maxAlphabetValue，并调用 playSound() 方法，使用 Xamarin.Essentials.TextToSpeech.SpeakAsync 读出所选的 curAlphabetNM 字符串。

当点击“Play Sound”按钮时，调用 playSound() 方法，使用 Xamarin.Essentials.TextToSpeech.SpeakAsync 读出所选的 curAlphabetNM 字符串。

@code {
    String curAlphabetNM = "A for Apple";
    String curImgName = "Apple.png";

    private static readonly string[] Alphabets = new[]
         {
          "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
          "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
          "U", "V", "W", "X", "Y", "Z"
         };

    private static readonly string[] AlphabetNames = new[]
       {
          "Apple", "Ball", "Cat", "Dog", "Elephant", 
          "Fish", "Goat", "Hat", "IceCream", "Juice",
          "kite", "Lion", "Mouse", "Noodle", "Orange", 
          "Pencil", "Quarter", "Rose", "Sun", "Toy",
          "Umbrella", "Van", "Watch", "Xylophone", "Yellow", "Zebra"
       };

    int CurrentIndex = 0;
    int maxAlphabetValue = 25;

    void showFirstAlphabet()
    {
        CurrentIndex = 0;
        playSound();
    }

    void showNextAlphabet()
    {
        if (CurrentIndex<maxAlphabetValue)
        {
            CurrentIndex = CurrentIndex+1;
        }

        playSound();
    }

    void showprevAlphabet()
    {
        if (CurrentIndex>0)
        {
            CurrentIndex = CurrentIndex-1;
        }

        playSound();
    }

    void showLastAlphabet()
    {
        CurrentIndex = maxAlphabetValue;
        playSound();
    }

    void playSound()
    {
        curAlphabetNM = Alphabets[CurrentIndex].ToString() + 
                        " for " + AlphabetNames[CurrentIndex].ToString();
        curImgName = AlphabetNames[CurrentIndex].ToString()+".png";
        Xamarin.Essentials.TextToSpeech.SpeakAsync(curAlphabetNM).ContinueWith((t) =>
        {
        }, TaskScheduler.FromCurrentSynchronizationContext());
    }
}

第五步：将 Game.razor 页面添加到主内容页面

在 HelloWorld 中，我们将 Game razor 页面添加到内容页面以加载游戏。同时，我们将 Title 从 Hello World 更改为“Shanu Blazor Mobile!”。

第六步：在 Android 设备或模拟器中运行应用程序

在这里，我使用了三星 Galaxy Note 10 Android 应用来运行我的游戏。您可以在任何Android 设备或您已安装的Android 模拟器上运行。

关注点

Mobile Blazor Bindings 是一个实验性版本，不适用于生产环境。但就目前而言，它为我们提供了一个很好的起点，让我们开始使用 Mobile Blazor Bindings，通过 Blazor 开发原生移动应用。对于所有不太熟悉原生应用开发或 Xamarin 的 Web 开发者以及 C# 爱好者来说，这确实是他们所需要的。作为 C# 的爱好者，我们总是喜欢从事这种原生移动应用程序的开发，更何况是使用 Blazor，这对我们来说就像是锦上添花。让我们期待正式版本的发布。在那之前，让我们继续对 Mobile Blazor Bindings 进行更多的实验。希望大家喜欢阅读这篇文章。很快，我将带来另一个新的有趣话题。

历史

• 2020 年 2 月 1 日：初始版本