Syncfusion.ListView Binding to observable collection (Xamarin)

Question

I'm struggling (even though I've trawled you documentation) to understand how to Bind the Syncfusion SfListView control to an Observable Collection.

I have a very simple Xamarin Mobile app..

I have a View (linked to a Model) pulling Data back from a WebAPI.. The data retrieval is all fine - however I cant figure out how to bind the ListView Control to the OPractices ObservableCollection..

I have no need for a View Model hence the reason im trying to bind to the ObservableCollection...

​Please help - what am i missing

XAML:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:nscMobileApp="clr-namespace:NSC_MobileApp;assembly=NSC_MobileApp"

             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"

             x:Class="NSC_MobileApp.Views.PracticeList">

    <syncfusion:SfListView x:Name="ListOfPractices" ItemsSource="{Binding Practices}">



    <syncfusion:SfListView.ItemTemplate>

        <DataTemplate>

            <Grid Padding="10">

                <Grid.RowDefinitions>

                    <RowDefinition Height="0.4*" />

                    <RowDefinition Height="0.6*" />

                </Grid.RowDefinitions>

                <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="Teal" FontSize="21" />

                <Label Grid.Row="1" Text="{Binding Address}" TextColor="Teal" FontSize="15"/>

            </Grid>

        </DataTemplate>

    </syncfusion:SfListView.ItemTemplate>



    </syncfusion:SfListView>



</ContentPage>

My Model:

namespace NSC_MobileApp

{

    [Table("Practices")] //Table Name

    public class Practices

    {

        public int ID { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }

        public string ContactName { get; set; }

        public string ContactAddress { get; set; }

        public string ContactEmail { get; set; }



        public int? Milage { get; set; }

    }

}

My View:

using Newtonsoft.Json;

using Syncfusion.ListView.XForms;

using Syncfusion.SfCalendar.XForms;

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Net.Http;

using System.Text;

using System.Threading.Tasks;



using Xamarin.Forms;

using Xamarin.Forms.Xaml;



namespace NSC_MobileApp.Views

{

    [XamlCompilation(XamlCompilationOptions.Compile)]

    public partial class PracticeList : ContentPage

    {



        private const string URL = "https://XXXXXX/Practices";

        private HttpClient _client = new HttpClient();

        public ObservableCollection<Practices> Opractices;





        public PracticeList()

        {

            InitializeComponent();



        }



        protected override async void OnAppearing()

        {

            var content = await _client.GetStringAsync(URL);

            var posts = JsonConvert.DeserializeObject<List<Practices>>(content);



            Opractices = new ObservableCollection<Practices>(posts);



            //-------------------------------------------------------------------------------------------



        }

Answer 1

As per my last comment:

Found the answer: XAML:

<syncfusion:SfListView.ItemTemplate> 
<DataTemplate> 
<!-- Your item template here --> 
<Label Text="{Binding Name}" /> </DataTemplate> 
</syncfusion:SfListView.ItemTemplate> 

Code Behind:

Opractices = new ObservableCollection<Practices>(posts); ListOfPractices.ItemsSource = Opractices; 

Answer 2

It appears that the binding context has not been established for either the ListView or the ContentPage. To achieve this requirement, defining the binding context in the code behind to content page, as the Practices (ItemsSource) the observable collection is created and populated in code behind, please refer the below code snippet and documentation for more reference.

In Xaml

It has been set the model name (Practices), it needs the collection for itemssource

   <syncfusion:SfListView x:Name="ListOfPractices" ItemsSource="{Binding OPractices}">
    
     <syncfusion:SfListView.ItemTemplate>

...

</syncfusion:SfListView.ItemTemplate>

In Xaml.cs

namespace NSC_MobileApp.Views

{

public partial class PracticeList : ContentPage

{

    private const string URL = "https://XXXXXX/Practices";

    private HttpClient _client = new HttpClient();

    public ObservableCollection<Practices> Opractices;



    public PracticeList()

    {

        InitializeComponent();

        this.BindingContext = this;

    }



    protected override async void OnAppearing()

    {

        var content = await _client.GetStringAsync(URL);

        var posts = JsonConvert.DeserializeObject<List<Practices>>(content);

        Opractices = new ObservableCollection<Practices>(posts);

    }

UG Link:https://help.syncfusion.com/maui/listview/getting-started#binding-data-to-the-listview