GridView doesn't show items async loader, doesn´t refresh items - xaml

Question

I'm developing a Win8 App:
I have a datasource class that take ítems from webservice via json:
public class DataSourceCapitulos
{
public ObservableCollection<capitulo> ListaCapitulos { get; set; }
public DataSourceCapitulos()
{
CargarCapitulos();
}
public async void CargarCapitulos()
{
var resourceUri = Cie10Uri.CapitulosUri;
HttpClient httpClient = new HttpClient();
bool error = false;
HttpRequestException exception = null;
try
{
string response = await httpClient.GetStringAsync(resourceUri);
ListaCapitulos = new ObservableCollection<capitulo>(JsonConvert.DeserializeObject<List<capitulo>>(response));
}
catch (HttpRequestException e)
{
error = true;
exception = e;
}
if (error)
{
MessageDialog adv = new MessageDialog(string.Format("La consulta {0}, devolvió:{1}", resourceUri, exception.Message), "No se pudo consultar!!! ");
adv.Commands.Add(
new UICommand("Ok")
);
await adv.ShowAsync();
}
}
}
And have a XAML form that has this source:
<Page.Resources>
<data:DataSourceCapitulos x:Key="DataSourceCapitulos"></data:DataSourceCapitulos>
</Page.Resources>
And Finally a GridView with it's source ítems pointing to ListaCapitulos property of DataSourceCapitulos as this:
<GridView Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Source={StaticResource DataSourceCapitulos},Path=ListaCapitulos}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="250" Width="250">
<Grid.Background>
<ImageBrush ImageSource="{Binding Imagen}"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Rectangle >
<Rectangle.Fill>
<SolidColorBrush Color="#FF122951" Opacity="0.6"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</GridView>
Until Here my app run without problema, but the problem is it doesn´t show te ítems, even the ListaCapitulos was populated as I expected.
THis is MainPage.xaaml.cs
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// Se invoca cuando esta página se va a mostrar en un objeto Frame.
/// </summary>
/// <param name="e">Datos de evento que describen cómo se llegó a esta página. La propiedad Parameter
/// se usa normalmente para configurar la página.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
There is something that i Miss ?

Answer 1

In XAML, set ItemsSource="{Binding listaCapitulos} (the ObservableCollection).
in the C# file of the page you need an instance of class DataSourceCapitulos, like DataSourceCapitulos ChaptersVm = new DataSourceCapitulos(); (as a member, you need to access it more than once).
set the gridview's (the one you have in XAML which should show the chapters) DataContext to that instance. You can do this in C#, ChaptersGridView.DataContext = ChaptersVm.
You're saying you know you have the chapters in ListaCapitulos, that means you didn't bind them correctly to be shown.
Also, I see async void CargarCapitulos() is meant to be async and you are calling it in the constructor but will run synchronously. Your app might not run fluidly when gathering the chapters.
UPDATE
Altough I am not very sure of first way, I can think of two methods you can keep the call of Cargar Capitulos async.
1) Await the method call in a new method (I am not very sure this would do the trick) :
In constructor :
public DataSourceCapitulos()
{
LoadCapitulos();
}
where in LoadCapitulos body you have :
public async void LoadCapitulos()
{
//this awaits the chapters to load (you were missing await,
//but you can't use await in a constructor, so this is a work-around
await CargarCapitulos();
}
If 1) doesn't work try 2) which will work definitely but you must do some changes :
2) Your ObservableCollection will not notify the UI of any update if you do some changes on the collection with the chapters. To do so, you must use the INotifyPropertyChanged interface and implement its members. If you used an advanced template of the Windows 8 App, in the Common folder, you have a class called BindableBase - try to use it directly by inheriting it. Also, you must use the OnPropertyChanged() event call in the ObservableCollectionsetter, so that when the chapters collection changed, the UI will also be changed through binding :
public class DataSourceCapitulos : BindableBase
{
private ObservableCollection <capitulo> _listaCapitulos;
public ObservableCollection <capitulo> ListaCapitulos
{
get
{
return _listaCapitulos;
}
set
{
_listaCapitulos = value;
OnPropertyChanged(); //This notifies of changes of collection
}
}
However, if you don't have the BindableBase, just implement INotifyPropertyChanged and the rest will look just like I wrote before. With these changes that provide notifications, the chapters should show on the UI, even if they are loaded later, after the UI has loaded.
But I'd say you SHOULD implement it for the notification changes to have any effect. Otherwise, you could have used a simple List of Capitulos (freaky spanish) instead of Observable Collection.

Answer 2

I think the view(xaml form) is not getting aware of data change through this binding.
Why you are using a static resource?
you can straightly set ListaCapitulos to the girid's data source ,otherwise, you should use a MVVM model ,and you should aware your view of property change.