Hello everyone, I'm new to this forum. I would like some help how to implement INotifyPropertyChanged so that the colleciton view updates automatically. I will send code what I have so far. This is my collection view in page.xaml
Code:
<CollectionView ItemsSource="{Binding Animes}"
HeightRequest="120"
BackgroundColor="Transparent"
ItemsLayout="HorizontalList"
SelectionMode="Single"
SelectionChanged="Collection1Changed"
x:Name="CollectionView1">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
IsClippedToBounds="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Frame Padding="0"
CornerRadius="5"
BackgroundColor="White">
<Image Source="{Binding coverImage.large}"
HeightRequest="80"
WidthRequest="80"
Aspect="AspectFill"></Image>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
This is my page.xaml.cs:
Code:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using GraphQL;
using GraphQL.Client.Http;
using GraphQL.Client.Serializer.Newtonsoft;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Xamarin.Essentials;
namespace Formsys
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page3 : ContentPage
{
public ObservableCollection<Media> Animes { get; set; }
public ObservableCollection<Media> Mangas { get; set; }
public Page3()
{
InitializeComponent();
}
async void OnClearClicked(object sender, EventArgs args)
{
Animes.Clear();
Mangas.Clear();
}
async void RefreshView_OnRefreshing(object sender, EventArgs e)
{
Animes = new ObservableCollection<Media>();
Mangas = new ObservableCollection<Media>();
var graphQLClient_trendinganime = new GraphQLHttpClient("https://graphql.anilist.co", new NewtonsoftJsonSerializer());
var request_trendinganime = new GraphQLRequest("query {Page(page: 1, perPage: 10) {media(sort: TRENDING_DESC type: ANIME) {id title {romaji english native userPreferred}coverImage {medium large} bannerImage description averageScore favourites}}}");
// var request = new GraphQLRequest("query {User(id: 5154007) {id name avatar{large}}}");
var graphQLResponse_trendinganime = await graphQLClient_trendinganime.SendQueryAsync<ResponseType>(request_trendinganime);
foreach (var Media in graphQLResponse_trendinganime.Data.Page.media)
{
Animes.Add(Media);
}
var graphQLClient_trendingmanga = new GraphQLHttpClient("https://graphql.anilist.co", new NewtonsoftJsonSerializer());
var request_trendingmanga = new GraphQLRequest("query {Page(page: 1, perPage: 10) {media(sort: TRENDING_DESC type: MANGA) {id title {romaji english native userPreferred}coverImage {medium large} bannerImage description averageScore favourites}}}");
// var request = new GraphQLRequest("query {User(id: 5154007) {id name avatar{large}}}");
var graphQLResponse_trendingmanga = await graphQLClient_trendingmanga.SendQueryAsync<ResponseType>(request_trendingmanga);
foreach (var Media in graphQLResponse_trendingmanga.Data.Page.media)
{
Mangas.Add(Media);
}
CollectionView1.SelectedItem = Animes[0];
CollectionView2.SelectedItem = Mangas[0];
BindingContext = this;
Console.WriteLine(Animes);
Console.WriteLine(Mangas);
await Task.Delay(1000);
HomeRefreshView.IsRefreshing = false;
}
}
}
This is my media.cs in which i tried to implement INotifyPropertyChanged:
Code:
public class ResponseType
{
public Page Page { get; set; }
public User User { get; set; }
}
public class Page
{
public ObservableCollection<Media> media { get; set; }
}
public class User
{
public string name { get; set; }
}
public class Media
{
public string id { get; set; }
public string description { get; set; }
public string bannerImage { get; set; }
public int? averageScore { get; set; }
public int favourites { get; set; }
public TitleType title { get; set; }
public CoverImageType coverImage { get; set; }
}
public class TitleType
{
public string romaji { get; set; }
public string english { get; set; }
public string native { get; set; }
public string userPreferred { get; set; }
}
public class CoverImageType : INotifyPropertyChanged
{
private string _medium;
private string _large;
public string medium
{
get
{
return _medium;
}
set
{
if (value != _medium)
{
_medium = value;
NotifyPropertyChanged(nameof(medium));
}
}
}
public string large
{
get
{
return _large;
}
set
{
if (value != _large)
{
_large = value;
NotifyPropertyChanged(nameof(large));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
So the first time i pull data from API everything shows as it should, but when I try to clear it with button and pull data gain my collection view is not refreshing. How do I make it so that it refreshes. With new images