How to create a ListView in .NET MAUI

So, to create a ListView in .NET MAUI you can do almost the same as you did in Xamarin, if you have experience in that. And if you don’t, I will show you how! It’s quite easy and the ListView in .NET MAUI is very customizable.
What you need is a .xaml ContentPage with an associated .xaml.cs page. Just like the image below.

Create a .NET MAUI ListView code example

In your .xaml file you want to have this code. Notice that you can probably remember a lot from Xamarin with a few syntax changes.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloWorld.Views.TodoListPage" Title="Todo"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <ListView x:Name="TodoListView"
              Margin="20"
              ItemSelected="OnTodoListItemSelected">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Margin="20,0,0,0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                        <StackLayout Orientation="Vertical" HorizontalOptions="Start">
                            <Label Text="{Binding Name}"  VerticalOptions="Start" />
                            <Label Text="{Binding Notes}" VerticalOptions="End" />
                        </StackLayout>
                        <Image Source="check.png" HorizontalOptions="End" IsVisible="{Binding Done}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

Now when you have your .xaml code, you want to bind data to the list view. That’s what you have your .xaml.cs file for. Look at the x:Name on <ListView, that name has to match with something in the .xaml.cs file. Also if you what an action to occur on click you need to have a ItemSelected method. You can find how to use that in the code below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Maui.Controls;
using HelloWorld.Models;
using HelloWorld.Repositories;

namespace HelloWorld.Views
{
    public partial class TodoListPage : ContentPage
    {
        public TodoListPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            TodoRepository database = TodoRepository.Instance;
            TodoListView.ItemsSource = database.GetItems();
        }

        async void OnTodoListItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem != null)
            {
                await Navigation.PushAsync(new TodoItemPage
                {
                    BindingContext = e.SelectedItem as TodoItem
                });
            }
        }
    }
}

What you want to look at first in this code is the protected method “OnAppearing”, that is where you add data to the .NET MAUI ListView if you want to have a Dynamic ListView.
The other thing you should take a look at carefully is the method “OnTodoListItemSelected” and notice how the name matches ItemSelected in the .xaml file. In that method is where you can do an action on click.

Source for .NET MAUIs ListView

The source code for the ListView can be found in .NET MAUIs official Github repository, here.

Additional .NET MAUI documentaion

If you still haven’t created your first .NET MAUI app, don’t worry! You can follow these 2 really simple tutorials on how to install .NET MAUI and how to create your first .NET MAUI app.
https://www.jennerstrand.se/install-microsoft-net-maui-on-windows/
https://www.jennerstrand.se/tutorial-on-how-to-develop-your-first-net-maui-app/