Karthick P

Karthick P

  • NA
  • 4
  • 3.6k

Updating observablecollection with async list item.

Aug 29 2018 9:27 AM
I am having a list and i populate the list with a method using for loop. just a number from 1 - 10. Then i created a list view and populate it with Observable collection by converting the list i get from method into observable collection. While executing this program i can able to see the list view populated with numbers.
But when i populate the same list with async method i can't see the list view get populate. I used the breakpoints to check whether the methods are working or not. But the methods are all working fine. even my observable collection get populated. but i can't able see the list view.
My async program:
    <Page.Resources>
        <DataTemplate x:DataType="data:ListItem" x:Key="ListViewTemplate"> 
        <TextBlock Text="{x:Bind Number}" VerticalAlignment="Center"
         Margin="10,0,0,0" Foreground="Red"/>
      </DataTemplate>
   </Page.Resources>
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <StackPanel>
         <ProgressRing IsActive="True" Width="50" Height="50"
                                  Foreground="Red" Name="MyProgress"/>
         <TextBlock Text="ListItems" FontSize="30"/>
      </StackPanel>

      <ListView Grid.Row="1" ItemsSource="{x:Bind ListItems}"
                        ItemTemplate="{StaticResource ListViewTemplate}">

      </ListView>
   </Grid>
 
 My class:

   public class ListItem
   {
      public float Number { get; set; }
   }

   public class ListManager
   {
      public async static Task<List<ListItem>> GetItemsAsync()
   {
      var listItems = new List<ListItem>();
      Rootobject temperatures = await getTemperatureAsync();

      for (int i = 0; i < 3; i++)
   {
      listItems.Add(new ListItem() { Number = temperatures.hourly.data[i].temperature });
   }
      return listItems;
   }

   private async static Task<Rootobject> getTemperatureAsync()
   {  
      HttpClient client = new HttpClient();
      var jsonData = await client.GetStringAsync("https://api.darksky.net/forecast/apikey               /13.08,80.27?units=si");
      var parsedData = JsonConvert.DeserializeObject<Rootobject>(jsonData);
      return parsedData;
   }
   }
 
Mainpage.xaml.cs

   ObservableCollection<ListItem> ListItems;
   public MainPage()
   {
      this.InitializeComponent();
      ThisMethod().GetAwaiter();
   }

   private async Task ThisMethod()
   {
      MyProgress.Visibility = Visibility.Visible;
      ObservableCollection<ListItem> items = new ObservableCollection<ListItem>(await          ListManager.GetItemsAsync());
      ListItems = items;
      MyProgress.Visibility = Visibility.Collapsed;
   }