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.