Creating a ListView MAUI MVVM .NET 9 [GamesCatalog] - Part 2

Part 1: Creating a MAUI .NET 9 Project [GamesCatalog] - Part 1

1. Let's create the grid that will receive the game information.

1.1. Creation of the model for the list item.

1.2. Code.

  public class UIIGDBGame
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string ReleaseDate { get; set; }
    public string CoverUrl { get; set; }
    public string Platforms { get; set; }
}

2. In the ViewModel, let's create the list with some sample items.

using CommunityToolkit.Mvvm.ComponentModel;
using GamesCatalog.Models.IGDBApi;
using System.Collections.ObjectModel;

namespace GamesCatalog.ViewModels.IGDBSearch
{
    public partial class IGDBResultsVM : ObservableObject
    {
        // List with a mock of games
        private ObservableCollection<UIIGDBGame> listGames = new ObservableCollection<UIIGDBGame>
        {
            new UIIGDBGame
            {
                Id = "1",
                Name = "Game 1",
                ReleaseDate = "01/01/2024",
                CoverUrl = "https://images.igdb.com/igdb/image/upload/t_cover_big/co2ed3.jpg",
                Platforms = "PC, PS4, PS5, Xbox One, Xbox Series X/S"
            },
            new UIIGDBGame
            {
                Id = "2",
                Name = "Game 2",
                ReleaseDate = "01/02/2024",
                CoverUrl = "https://images.igdb.com/igdb/image/upload/t_cover_big/co2ed3.jpg",
                Platforms = "PC, PS4, PS5, Xbox One, Xbox Series X/S"
            },
            new UIIGDBGame
            {
                Id = "3",
                Name = "Game 3",
                ReleaseDate = "01/03/2024",
                CoverUrl = "https://images.igdb.com/igdb/image/upload/t_cover_big/co2ed3.jpg",
                Platforms = "PC, PS4, PS5, Xbox One, Xbox Series X/S"
            }
        };

        public ObservableCollection<UIIGDBGame> ListGames
        {
            get => listGames;
            set => SetProperty(ref listGames, value);
        }
    }
}

3. Bind the ViewModels to the View.

using GamesCatalog.ViewModels;
using GamesCatalog.ViewModels.IGDBSearch;
namespace GamesCatalog.Views.IGDBSearch
{
    public partial class IGDBResults : ContentPage
    {
        public IGDBResults(IGDBResultsVM iGDBResultsVM)
        {
            InitializeComponent();
            base.BindingContext = iGDBResultsVM;
        }
    }
}

4. Creating the listing on the page.

4.1. To work better with XAML, I recommend downloading the following extension.

4.2. Let's add the addresses of the model, ViewModel, and the DataType to the page.

<ContentPage
    x:Class="GamesCatalog.Views.IGDBSearch.IGDBResults"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:model="clr-namespace:GamesCatalog.Models.IGDBApi"
    xmlns:vm="clr-namespace:GamesCatalog.ViewModels.IGDBSearch"
    Title="IGDBResults"
    x:DataType="vm:IGDBResultsVM">
</ContentPage>

4.3. And after the border of the search bar, let's add the list.

<Border
    Margin="5"
    Padding="5"
    BackgroundColor="Transparent"
    StrokeShape="RoundRectangle 10"
    VerticalOptions="FillAndExpand">
    
    <ScrollView>
        <StackLayout>
            <ListView
                CachingStrategy="RecycleElement"
                HasUnevenRows="True"
                ItemsSource="{Binding ListGames}"
                SelectionMode="None">
                
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="model:UIIGDBGame">
                        <ViewCell>
                            <Border
                                Margin="0,0,0,5"
                                Padding="10"
                                BackgroundColor="#101923"
                                Stroke="#2B659B"
                                StrokeShape="RoundRectangle 10">
                                
                                <Grid Padding="10">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    
                                    <Image
                                        Grid.Column="0"
                                        Aspect="AspectFit"
                                        HeightRequest="100"
                                        Source="{Binding CoverUrl}"
                                        VerticalOptions="Center"
                                        WidthRequest="150" />
                                    
                                    <StackLayout Grid.Column="1" Margin="10,0,0,0">
                                        <Label
                                            FontSize="Large"
                                            LineBreakMode="TailTruncation"
                                            Text="{Binding Name}" />
                                        
                                        <Label
                                            FontAttributes="Italic"
                                            FontSize="Micro"
                                            Text="{Binding ReleaseDate, StringFormat='Release: {0:F0}'}"
                                            TextColor="#98BDD3" />
                                        
                                        <Label
                                            FontSize="Micro"
                                            Text="{Binding Platforms, StringFormat='Platforms: {0:F0}'}"
                                            TextColor="#98BDD3" />
                                    </StackLayout>
                                </Grid>
                            </Border>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ScrollView>
</Border>

4.4. We have the ListView with the Binding of the ObservableCollection of games from the ViewModel.

In part 3, we will create a reusable component for the search field and style it.