Learn Blazor For Cross-Platform Mobile Development Using Mobile Blazor Bindings

 

Here in this article, we will do the following things,

• Learn how to install Mobile Blazor Binding
• Create our first Mobile Blazor Binding Application
• Create a simple Mobile Game application for kids to learn the alphabet with sound.
• Add Text to Speech functionality using Xamarin Essentials.

Note

If you are interested in my Kids learn Alphabet Mobile App for your kids, then you can download it for free from this link and have fun with kids between 2 and 6 years.

 

This app is targeted only for Android now.

 

Don't forget to share your comments.

 

You need to request access in order to download the app.

 

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

 

On Jan 14, 2020 Microsoft introduced a new Experimental Mobile Blazor Binding for developing Cross-Platform Mobile applications using Blazor. Yes, for now this is only an experimental release but we can still start working and learn about using Mobile Blazor Binding to develop our Mobile application using the Blazor code. For all the C# programmers this will be great start to developing a mobile application using C# code, and you don't need to know much about Xamarin, Andorid or IOS development.

 

Mobile Blazor Binding is the combination of Blazor and Xamarin.Forms. The UI design part is based on the Xamarin.Forms UI Controls and the components and code part is based on Blazor. The combination of Blazor and Xamarin.Forms allows the user to create Native Mobile app development for both IOS and Android using the Web programming pattern. All the design and code part for both Andorid and IOS can be made from the Blazor project and using the Android and IOS project the app can be run on appropriate emulator or device.

 

For more details refer here.

 

Getting Started with Mobile Blazor Binding Application

 

When we create the Mobile Blazor Binding application we can see by default 3 projects will be added in our solution. In the solution, we can find 3 projects. 

 

Blazor Project

The Blazor project is where we design our page UI and do all business logic for mobile application development using Blazor. Note  -- for the UI design part we will be using the same Xamarin.Forms UI controls in our Razor pages. In our code part, we can see more in detail about adding new pages creating our own Game using Blazor code.

 

Android Project

 

We can also see the Android project has been added in our solution and this project is used for building and running the Blazor application in Android Emulator or on the Android Device.

 

IOS Project

 

We can also see the IOS project has been added in our solution and this project is used for building and running the Blazor application in IOS Simulator or on the IOS Device.

 

 

 

Prerequisites

 

In order to work with Mobile Blazor Binding you need to have .NET Core 3.0 or higher version SDK. You need to have Visual Studio or Visual Studio for Mac,ASP.NET Web Development and Mobile Development with Xamarine.Forms Workloads installed on your computer. Here for my article I have installed the Visual Studio 2019 latest version and used .NET Core 3.0 SDK,

• Visual Studio 2019  
•  .NET Core 3.0 SDK

Installing Mobile Blazor Binding Template

 

After installing the prerequisites you are ready to work with Mobile Blazor Binding, but for working with Mobile Blazor Binding we need the template to be installed. For this, open your command prompt.

 

Click Windows Start: Type CMD and press enter in the command prompt.

 

In the command prompt enter the below code to install the Microsoft MobileBlazorBindings Templates.

 

We need to run the below code in CMD or from the shell.

 

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

 

Wait for few seconds for the template to be installed.

 

 

 

Now we have installed the Mobile Blazor Binding Template and it's time for us to create our first Mobile Blazor Binding application.

 

Code part

 

Creating Mobile Blazor Binding Application

 

Click Windows Start: Type CMD and press enter in the command prompt.

 

From the Command prompt go to your Drive and Folder where you want to create the application.

 

Here I have created folder under D:> Drive and I will create my project under the Android/Blazor Folder.

 

For creating the Project in the command prompt run the below command:

 

dotnet new mobileblazorbindings -o ShanuMobile

 

Note that ShanuMobile is the projectName. You can add your needed project name over there.

 

Mobile Blazor Binding Solution Structure

 

 

When we create the Mobile Blazor Binding Blazor application we can see by default 3 projects will be added in our solution. In the solution, we can find 3 projects.

 

Blazor Project

The Blazor project is where we design our page UI and do all business logic for mobile application development using Blazor. Note --  for the UI design part we will be using the same Xamarin.Forms UI controls in our Razor pages. In our code part, we can see more in detail about adding new page creating our own game using Blazor code.

 

 

 

Here we have created the project name as “ShanuMobile” as the Blazor project and in this project, we can see the Microsoft.MobileBlazorBinding and Xamarin.Forms Packages have been added by default. Also the Blazor project contains some files. 

 

imports.razor

 

The Import.razor file has the default needed import of Xamarin.Forums and MobileBlazorBindings to create native mobile app for Android and IOS using the Xamarin.Forms with Blazor code.

 

 

 

App.cs

 

In the App.cs class we will give the default razor page to be loaded, here in the below code we can see as HellowWorldRazor page has been added to show by default.

 

 

 

Counter.Razor

 

By default we can see the Counter.Razor page has been added. Here on this page, we can see the Xamarin.Forums UI controls have been used, for example, like StaclkLayout, also we can see the Blazor code functions have been added to perform the increment in the button click event.

 

 

 

HellowWorld.Razor

 

In the HellowWorld razor page we can see the page was made as the ContentPage, and this page will be loaded first and added to the Counter page inside the content page of Helloworld to perform the Increment functions.

 

 

 

Android Project

 

We can also see the Android project has been added in our solution and this project is used for building and running the Blazor application in Android Emulator or on the Android Device.

 

 

 

Here we have created the project name as “ShanuMobile” and the Android project has been created by default as ShanuMobile.Android.

 

Here we don’t have much to deal with, as we will be adding our Blazor App in MainActivity to run our mobile application in Android. We can also add the App display Name in Label here by default. The project name has been added in the Label. You can change it if needed;  also we can change the icon for the app from the MainActivity. In order to run our Blazor app in Android mobile Device or in Emulator then set the Android project as Startup Project.

 

 

 

IOS Project

 

We can also see the IOS project has been added in our solution and this project is used for building and running the Blazor application in IOS Simulator or on the IOS Device.

 

 

 

Here we don’t have much to deal with, as we will be adding our Blazor App in AppDelegate to run our mobile application in IOS. In order to run our Blazor app in IOS mobile Device or in Simulator then set the IOS project as Startup Project.

 

 

 

Run the Blazor APP in Android

 

Now we can see the Counter Demo in Android Device or in the Android Emulator. For this first set the Android project as Startup Project. For this right click the Android project and click on “Set as Startup Project”. You can run the application in the Android connected device via USB or by the installed Android Emulator.

 

 

 

Here I have connected my Samsung Galaxy Note 10 mobile via USB and selected my mobile device to run the Blazor Mobile Application. You can connect to your Android device or select or Install Android Emulator to run in the emulator.

 

Once selected our Android Device runs the application and waits for a few seconds. We can see our mobile application will be running in our connected Android mobile device.

 

 

 

Kids learn Alphabet Mobile Game Creation using Blazor

 

What is Shanu Kids Learn Alphabet Game?

 

 

 

The main aim of this game is for kids age from 3 to 7 years old to learn the alphabet. The game has functions, like each alphabet character will be displayed with appropriate words with images and when the alphabet character, word and image display, kids can also hear the speech sound which will be more interactive. Whenever the next letters are displayed kids can see the appropriate word image with sound. Kids also can listen to the sound again and again for the same alphabet character by clicking the PLAY Sound button.

 

For example, when the Kids Learn Alphabet apps opens,  by default we display the alphabet letter A with the Image “Apple,” and next we display the text as “A for Apple” and also play the sound which pronounces “A for Apple. " If the kids want to listen again  they can click on the PLAY SOUND button. In this way, kids can learn the alphabet easily and the image showing will be fun. This app is very simple for kids to learn. The app also has “First <<”,” Last >>”,” Next >” and “Previous <” button to show the next previous first and last character of the alphabet. When the user clicks on “First <<” button then it displays the first alphabet letter as “A” for Apple with appropriate image and sound. When the user clicks on the  “Last >>” button then it displays the last alphabet as “Z” for Zebra with the appropriate image and sound. The ” Next >” and “Previous <” button will display the next and previous character of the alphabet.

 

In this game, we will have used Xamarin.Essentials for Text to Speech functionality in order to use speech functionality in order to pronounce the Alphabet sound for making the learning more interesting and helpful for the kids.

 

Step 1 - Add Game.Razor page

 

Right click the Blazor Project and click on Add New Item and select the Razor Component and give the name as Game.razor and click Add.

 

 

 

The added page will look like this.

 

 

 

Step 2 - Adding Xamarin.Essentials package to the Blazor Project

 

For using the text to speech functionality in our Mobile Game App we need to install the Xamarin.Essentials packages to the Blazor project. For this right click on the Blazor project and click on Manage NUGet Packages.

 

 

 

Select Browse and search for the Xamarin Essentials and click on Install. Wait for few seconds for the packages to install on your project.

 

Adding the Alphabet Images

 

In our Kids learn Alphabet game we display images for each character. For this, first I have download the free to use, share and edit icons from iconfinder.com. All the icons used here are free for commercial purposes. We have download all the images from the Alphabet from A to Z.

 

 

 

We can see  we have collected all the images and copied them all and  add them to the Android project under the Drawable folder like  the below image:

 

 

 

Step 3 - Game Design Part coding

 

Now open the Game.Razor page and replace the code with the below code for our mobile Kids Learn Alphabet design. Next we display the image and source, and dynamically bind to the Image from the code. By default first we bind the image as “Apple.png” and show the first image as “Apple. " Next we add the label to display the text as per the alphabet and we bind the result from the code dynamically based on the current alphabet selected. By default we display the text as “A for Apple” and next we design the buttons for first, next, previous and last alphabet display, and finally we add one more button to play the sound of the currently-selected alphabet words.

<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>

Step 4 - Game Code Part

 

Now open the Game.Razor page and replace the code with the below code for our mobile game code part at the bottom of the above design.

 

First we declared all the needed variables. Here we have created an array for displaying the character and the appropriate words.

 

When user clicks on the ”First <<” button then call the showFirstAlphabet() method and display the first array of both Alphabets and AlphabetNames and set the CurrentIndex as 0 and call the playSound() method to pronounce the selected curAlphabetNM string using the Xamarin.Essentials.TextToSpeech.SpeakAsync.

 

When user clicks on the ”Next >” button then call the showNextAlphabet() method and display the Next Array of both AlphabetNames from the CurrentIndex and call the

playSound() method to pronounce the selected curAlphabetNM string using the Xamarin.Essentials.TextToSpeech.SpeakAsync.

 

When user clicks on the ”Previous <” button then call the showprevAlphabet() method and display the previous array of both Alphabets and AlphabetNames from the CurrentIndex and call the playSound() method to pronounce the selected curAlphabetNM string using the Xamarin.Essentials.TextToSpeech.SpeakAsync.

 

When user clicks on the ”Last >>” button then call the showLastAlphabet() method and display the last Array of both Alphabets and AlphabetNames and set the CurrentIndex

as maxAlphabetValue and call the playSound() method to pronounce the selected curAlphabetNM string using the Xamarin.Essentials.TextToSpeech.SpeakAsync.

 

When “Play Sound” Button is clicked call the playSound() method to pronounce the selected curAlphabetNM string using the Xamarin.Essentials.TextToSpeech.SpeakAsync.

@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());
    }
}

Step 5 - Add the Game.razor page to the main Content page

 

In the HelloWorld we add the Game razor page on the content page to load the game. Also we change the title from  Hello World to “Shanu Kids Game.”

 

 

 

Step 6 - Run the Application in Android Device or in Emulator

 

Here we have used the Samsung Galaxy Note 10 Android app to run our game. You can run in any Android Device on your installed Android emulator.

 

 

Conclusion

 

Mobile Blazor Bindings is an experimental release and not for production use. But for now, it will be a good place for getting started and working with Mobile Blazor Bindings for developing native mobile apps using` Blazor. This is really needed for all the Web Developers as well the C# lovers who are not very familiar with Native app development or  Xamarin. We as the C# lovers will always love to work with this kind of native mobile application development. Let’s wait for the production release, and until then let's experiment more with Mobile Blazor Bindings. Hope you all enjoy reading this article.