Post
Ask Question

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 { get; set; }  
  13.         public string description { get; set; }  
  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