Showing Data In Listview With API Using Xamarin Forms

Today, we will discuss how to show data in ListView with API using Xamarin forms in different platforms.
 
Let’s start.
 
Step 1:
 
Open Visual studio and create an Application. Select new project, then cross-platforms, Blank App (Xamarin.Forms Portable) and enter project name (as figure 1).
 
Press OK Button as in the following figure 1.
 
 
Figure 1
 
Once you press OK, you can see 6 more projects loaded in Solution like TestApp (Portable), TestApp.Droid, TestApp.iOS, TestApp.UWP, TestApp.Windows, TestApp.WinPhone.
 
Step 2:
 
Now we will create a new Xaml page for getting data in listview. So Select TestApp (Portable) project -> right click -> select Add -> Select New item as shown in figure 2.
 
 
Figure 2.
 
When you click a new item then dialog opens, select Cross-platform, then Forms Xaml Page and mention name GetdatainList. After that click Add button as in the following figure 3.
 
 
Figure 3
 
Step 3:
 
Now open GetdatainList.xaml page and write the following code,
  1. <StackLayout BackgroundColor="White">  
  2. <ListView x:Name="ListView1" RowHeight="60">  
  3. <ListView.ItemTemplate>  
  4. <DataTemplate>  
  5. <ViewCell>  
  6. <StackLayout Orientation="Vertical" Padding="8,0,8,0">  
  7. <Label Text="{Binding ArticleTitle}" TextColor="#000" FontSize="14" LineBreakMode="TailTruncation" />  
  8. <Label Text="{Binding description}" TextColor="#000" LineBreakMode="TailTruncation" />  
  9. </StackLayout>  
  10. </ViewCell>  
  11. </DataTemplate>  
  12. </ListView.ItemTemplate>  
  13. </ListView>  
  14. </StackLayout>  
After that opens GetdatainList.xaml.cs page and write the following code; create one class for accessing properties and create one method for binding the data with API.
  1. using Newtonsoft.Json;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Net.Http;  
  5. using Xamarin.Forms;  
  6. namespace Testapp  
  7. {  
  8.   public partial class GetDatainList : ContentPage  
  9.    {  
  10.      public class ItemClass  
  11.       {  
  12.         public string ArticleTitle { getset; }  
  13.         public string description { getset; }  
  14.       }  
  15.      public GetDatainList()  
  16.       {  
  17.         InitializeComponent();  
  18.         LoadData();  
  19.       }  
  20.      public async void LoadData()  
  21.       {  
  22.         var content = "";  
  23.         HttpClient client = new HttpClient();  
  24.         var RestURL = your api url.  
  25.         client.BaseAddress = new Uri(RestURL);  
  26.         client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));  
  27.         HttpResponseMessage response = await client.GetAsync(RestURL);  
  28.         content = await response.Content.ReadAsStringAsync();  
  29.         var Items = JsonConvert.DeserializeObject<List<ItemClass>>(content);  
  30.         ListView1.ItemsSource = Items;  
  31.       }  
  32.    }  
  33. }  
Step 4:
 
Finally build your project when build is successful and then run project. Now you can see result in different platforms as in the following figure 4.
 
Figure 4
 
Summary
 
Today, we discussed how to show data in ListView with API using Xamarin forms. I hope you enjoyed this article.


Similar Articles