How to bind the ListView data using RESTful API service in Xamarin.Forms (SfListView)
The Xamarin.Forms SfListView supports to populate the fetched data from REST services. Refer Xamarin.Forms document about consuming RESTful web service before reading this article from here.
Please refer to the steps below for implementing SfListView with REST services,
STEP 1: Create Xamarin.Forms application with SfListView
Define SfListView bound to the ViewModel collection.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewXamarin"
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
x:Class="ListViewXamarin.MainPage">
<ContentPage.BindingContext>
<local:ContactsViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<syncfusion:SfListView x:Name="listView" AutoFitMode="Height" ItemSpacing="5" ItemsSource="{Binding UserInfo}">
<syncfusion:SfListView.ItemTemplate >
<DataTemplate>
<Frame HasShadow="True" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding [username]}" HorizontalOptions="Start" TextColor="Black" FontSize="16" />
<Label Grid.Row="1" Text="{Binding [website]}" HorizontalOptions="Start" TextColor="Black"/>
<Label Grid.Row="2" Text="{Binding [phone]}" HorizontalOptions="Start" TextColor="Black" FontSize="16" FontAttributes="Bold"/>
<Label Grid.Row="3" Text="{Binding [email]}" HorizontalOptions="Start" TextColor="Black" FontSize="16" FontAttributes="Bold"/>
</Grid>
</Frame>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
STEP 2: Install the ModernHttpClient and Newtonsoft.Json NuGet packages in the shared code project.
STEP 3: Retrieve data from the REST service
Define the HTTPClient to retrieve information from the web server for a specified url using the GetAsync method. Use the HTTPContent.ReadAsStringAsync method to read the retrieved data into string format. Using, JsonConvert.DeserializeObject method, convert the JSON string to dynamic.
namespace ListViewXamarin
{
/// <summary>
/// Implementation of RestService to be displayed.
/// </summary>
public class RestService
{
System.Net.Http.HttpClient client = new System.Net.Http.HttpClient();
public dynamic Items { get; private set; }
public string RestUrl { get; private set; }
public RestService()
{
RestUrl = "https://jsonplaceholder.typicode.com/users"; // Set your REST API url here
client = new HttpClient();
}
public async Task<dynamic> GetDataAsync()
{
try
{
//Sends request to retrieve data from the web service for the specified Uri
var response = await client.GetAsync(RestUrl);
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync(); //Returns the response as JSON string
Items = JsonConvert.DeserializeObject<dynamic>(content); //Converts JSON string to dynamic
}
}
catch (Exception ex)
{
Debug.WriteLine(@"ERROR {0}", ex.Message);
}
return Items;
}
}
}
STEP 4: Populate data to collection
In the ViewModel class, initialize the RestService and populate the data by invoking the GetDataAsync method and set to the collection bound to the SfListView.
namespace ListViewXamarin
{
public class ContactsViewModel : INotifyPropertyChanged
{
private dynamic userInfo;
public static RestService DataServices { get; private set; }
public dynamic UserInfo
{
get { return userInfo; }
set
{
userInfo = value;
RaisedOnPropertyChanged("UserInfo");
}
}
public ContactsViewModel()
{
DataServices = new RestService();
//Gets data from REST service and set it to the ItemsSource collection
RetrieveDataAsync();
}
public async void RetrieveDataAsync()
{
UserInfo = await DataServices.GetDataAsync();
}
}
}
