Simplest way to bind a ListViews ItemSource property to an ObservableCollection in the CodeBehind Class

I'm trying to find the simplest and most elegant way to do a simple data-binding of a ListView to an ObservableCollection in .NET MAUI. Maybe I'm a little spoiled by web-development (Angular), where data-binding is just so easy and performant.

The best solutions I have found are the following:

1. XAML only approach.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="..."
             x:Name="page"
             xmlns:services="..."
             Title="...">

  <ListView BindingContext="{x:Reference page}" ItemsSource="{Binding observableCollection}">
  </ListView>

</ContentPage>

I really like this approach, because I don't have to interact with the Markup Elements in the code-behind file. This is what I'd do in the other approach I have found.

XAML:

<ListView x:Name="listView" ItemsSource="{Binding observableCollection}"></ListView>

Code-Behind File:

public partial class ContentPage 
{
  // Edit: no need for a setter here
  public ObservableCollection<type> observableCollection { get; }

  public ContentPage()
  {
    InitializeComponent();
    listView.BindingContext = this;
    ...
  }
}

I'm wondering if there is a simpler or cleaner solution? Like where I can directly bind the ListViews ItemSource property to the ObservableCollection property of the code-behind class (like I'm used to do in web-development)?

We generally recommend using Model-View-ViewModel (MVVM).

You can refer to the following code:

1. create a ViewModelc class (e.g. MyViewModel.cs)

   public class MyViewModel {
       public ObservableCollection<Item> Items { get; set; }
   
       public MyViewModel() {
           Items = new ObservableCollection<Item>();
   
           Items.Add(new Item { NumType = "S", LocationCode = "0001" });
           Items.Add(new Item { NumType = "M", LocationCode = "0002" });
           Items.Add(new Item { NumType = "L", LocationCode = "0003" });
           Items.Add(new Item { NumType = "S", LocationCode = "0001" });
           Items.Add(new Item { NumType = "M", LocationCode = "0002" });
           Items.Add(new Item { NumType = "L", LocationCode = "0003" });
   
       }
   }
   
   public class Item {
   
       public string NumType { get; set; }
   
       public string LocationCode { get; set; }
   
   }
   

2. set the BindingContext for current page(MainPage.xaml) and set ItemsSource for the ListView.

   <?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"
             xmlns:local="clr-namespace:MauiListViewApp"
             x:Class="MauiListViewApp.MainPage">
   
       <ContentPage.BindingContext>
            <local:MyViewModel></local:MyViewModel>
       </ContentPage.BindingContext>
   
       <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">
   
           <ListView ItemsSource="{Binding Items}" >
               <ListView.ItemTemplate>
                   <DataTemplate>
                       <TextCell Text="{Binding NumType}" 
                                 Detail="{Binding LocationCode}" />
                   </DataTemplate>
               </ListView.ItemTemplate>
           </ListView>
   
        </VerticalStackLayout>
   
    </ContentPage>