Thursday, December 16, 2021

Explore .NET MAUI Apps with .NET 6.0 & Visual Studio 2022 Version 17.1.0 Preview 1.1

The birth of .NET MAUI among the family of .NET products is very exciting. Although we did have Xamarin to develop cross-platform mobile applications in the past, .NET MAUI is a little different because it uses a unified version .NET 6.0 for mobile devices and desktop computers.

MAUI is not yet officially released. The current bits offer a glimpse into what the final product will look like. In this article, I will introduce you to .NET MAUI Apps. 

Meantime, this is the environment that I am using:

  • Windows 11 Version 21H2
  • Visual Studio 2022 Version 17.1.0 Preview 1.1
  • .NET 6.0.101
Source code for this application can be found at: https://github.com/medhatelmasry/FirstMauiApp

Setup

You will find installation instructions for .NET MAUI at: https://docs.microsoft.com/en-us/dotnet/maui/get-started/installation

The only workload I installed in Visual Studio 2022 (Preview) is "Mobile development with .NET", as shown below:


It is also worth noting that I do not have any other Android development application (like Android Studio) installed on my computer. The above Visual Studio 2022 workload also installed an Android emulator.

Application

Let's get started exploring what apps we can develop with .NET MAUI. Start Visual Studio 2022 (Preview) and select "Create a new project":


Enter "maui" in the filter field. You will discover that there are three MAUI-related projects that you can create - namely: 
  1. .NET MAUI App
  2. .NET MAUI Blazor App
  3. .NET MAUI Class Library
In this tutorial, I will explore the first in the above list - .NET MAUI App. Select this project type then click Next:


I named my application FirstMauiApp:


Firstly, let's run our app on Windows. From the drop-down-list at the top of Visual Studio 2022, make sure you have chosen "Windows Machine".


Click on "Windows Machine" to run the application. Soon after, you should experience the following application running on your desktop:


Stop the application by either closing it or clicking on the red square button on the top of Visual Studio 2022. You will find that the application gets installed in your "Apps and Features" on windows. You can, of course, uninstall it if you so desire.

Adding our own page

Add “.NET MAUI ContentPage (Preview)” named ToonPage.xaml:


Edit App.xaml.cs so that it starts ToonPage instead of MainPage.

MainPage = new ToonPage();

Run the application. It should look like this:

Stop the application.

We will modify ToonPage so that it reads an online API that contains some cartoon characters. If you point your browser to https://api4all.azurewebsites.net/api/people it will show the following data:

[{"id":1,"lastName":"Flintstone","firstName":"Fred","occupation":"Mining Manager","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/fred.png","votes":0},{"id":2,"lastName":"Rubble","firstName":"Barney","occupation":"Mining Assistant","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/barney.png","votes":0},{"id":3,"lastName":"Rubble","firstName":"Betty","occupation":"Nurse","gender":"F","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/betty.png","votes":0},{"id":4,"lastName":"Flintstone","firstName":"Wilma","occupation":"Teacher","gender":"F","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/wilma.png","votes":0},{"id":5,"lastName":"Rubble","firstName":"Bambam","occupation":"Baby","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/bambam.png","votes":0},{"id":6,"lastName":"Flintstone","firstName":"Pebbles","occupation":"Baby","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/pebbles.png","votes":0},{"id":7,"lastName":"Flintstone","firstName":"Dino","occupation":"Pet","gender":"F","pictureUrl":"https://api4all.azurewebsites.net/images/flintstone/dino.png","votes":0},{"id":8,"lastName":"Mouse","firstName":"Micky","occupation":"Hunter","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/disney/MickyMouse.png","votes":0},{"id":9,"lastName":"Duck","firstName":"Donald","occupation":"Sailor","gender":"M","pictureUrl":"https://api4all.azurewebsites.net/images/disney/DonaldDuck.png","votes":0}]

Each JSON object contains the following properties:

id (int)
lastName (string)
firstName (string)
occupation (string)
gender (string)
pictureUrl (string)
votes (int)

To represent the above data, we will add a class named Toon with the following content:

public class Toon {
  [JsonPropertyName("id")]
  public int Id { get; set; }

  [JsonPropertyName("lastName")]
  public string LastName { get; set; }

  [JsonPropertyName("firstName")]
  public string FirstName { get; set; }

  [JsonPropertyName("occupation")]
  public string Occupation { get; set; }

  [JsonPropertyName("gender")]
  public string Gender { get; set; }

  [JsonPropertyName("pictureUrl")]
  public string PictureUrl { get; set; }

  [JsonPropertyName("votes")]
  public int Votes { get; set; }

  public string FullName {
    get {
        return string.Format("{0} {1}", this.FirstName, this.LastName);
    }
  }

  public override string ToString() {
    return string.Format($"{Id}\t{FullName}\t{Occupation}\t{Gender}\t{PictureUrl}\t{Votes}");
  }
}

You will need to resolve the appropriate namespace for JsonPropertyName. This will add the following to your using statements:

using System.Text.Json.Serialization;

We will need to update the UI file named ToonPage.xaml, so that we  can display the contents of the Toon[] array. In ToonPage.xaml, replace the existing <Label .... /> control with:

<CollectionView x:Name="cvToons" ItemsLayout="VerticalGrid, 2">
  <CollectionView.ItemTemplate>
    <DataTemplate>
      <Grid Padding="10" RowDefinitions="60" ColumnDefinitions="70,*">
        <Image Grid.RowSpan="2" 
        Source="{Binding PictureUrl}" 
        Aspect="AspectFit"
        HeightRequest="60" 
        WidthRequest="60">
          <Image.Clip>
            <RectangleGeometry Rect="0,0,160,160"/>
          </Image.Clip>
        </Image>

        <Label Grid.Column="1" 
        Text="{Binding FullName}" 
        FontAttributes="Bold"
        TextColor="Black"
        VerticalOptions="Start"
        LineBreakMode="TailTruncation" />

        <Label Grid.Column="1" 
        Text="{Binding Occupation}"
        LineBreakMode="TailTruncation"
        FontAttributes="Italic" 
        TextColor="Black"
        VerticalOptions="End" />

      </Grid>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

Next, add the following method to your ToonPage.xaml.cs file, which reads the content of the API, hydrates it into an array of Toon objects Toon[], then binds the data to the CollectionView control with ID cvToons:

public async void GetToonsAsync() {
  HttpClient client = new HttpClient();
  var stream = client.GetStreamAsync("https://api4all.azurewebsites.net/api/people");
  var data = await JsonSerializer.DeserializeAsync<Toon[]>(await stream);
  Dispatcher.Dispatch(() => cvToons.ItemsSource = data);
}

You will need to resolve the namespace for the JsonSerializer class, which is:

using System.Text.Json;

Finally, append a call to the above method in the constructor by adding this statement just below InitializeComponent():

GetToonsAsync();

Run your application and you will see the following output:


Let us see what this app looks like in an android emulator. To setup an emulator, choose Tools >> Android >> Android Device Manager...


You can configure an Android device of your choice. In my case, even though I configured both Pixel 4 & Pixel 5, I found Pixel 4 to be more cooperative.


You can start the emulator of your choice from within the "Android Device Manager".

Choose the android emulator of your choice in the run drop-down-list at the top of Visual Studio 2022:


Run your app in the Android emulator. This is what it should look like:

I hope you found this useful. I am sure this product will evolve and, perhaps, change by the time it is finally released.

No comments:

Post a Comment