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:
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:
- .NET MAUI App
- .NET MAUI Blazor App
- .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:
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:
Stop the application.
Edit App.xaml.cs so that it starts ToonPage instead of MainPage.
MainPage = new ToonPage();
Run the application. It should look like this:
We will modify ToonPage so that it reads an online API that contains some cartoon characters. If you point your browser to https://apipool.azurewebsites.net/api/toons 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://apipool.azurewebsites.net/api/toons");
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:
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