Hi all,
Ive been stuck on this for a little while and would really appreciate some help. Ive got a page with a Carousel view on top, then underneath it a horizontal scrollview using this implementation (fabiocozzolino.eu/a-little-and-simple-bindable-horizontal-scroll-view/. The Carousel view's itemsource (Observable collection) is populated using a Rest API call and is working fine and is displaying as expected.
However the issues comes with the horizontal scroll view, which has an itemsource (Also an Observable collection) based on some logic performed on the observable collection which feeds the carousel view. Basically i've tried to reduce API calls by using the data from the Carousel view to feed my horizontal scrollview itemsource and then update the view.
I have manually called the 'RaisePropertyChanged' events for both collections, but still only the Carousel view displays data. I have checked the horizontal scrollview itemsource when debugged and the collection is getting populated with data but just doesn't seem to display in the view. Code is below, it is really frustrating because I thought my biggest issue would be with the layout and not refreshing the view.
Any help you could provide would be hugely appreciated.
Page code:
<ContentPage.Content> <ScrollView> <StackLayout Spacing="5"> <cv:CarouselView x:Name="FeaturedUsers" ItemsSource="{Binding Users}" HeightRequest="150"> <cv:CarouselView.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageURL}"/> <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12"> <Label TextColor="White" Text="{Binding FullName}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/> </StackLayout> </Grid> </DataTemplate> </cv:CarouselView.ItemTemplate> </cv:CarouselView> <Label Text="Users Sub Set" FontAttributes="Bold" TextColor="White" FontSize="Small" Margin="5,10,0,0"></Label> <controls:TLScrollView Orientation="Horizontal" ItemsSource="{Binding UsersSubSet}" ItemSelected="Handle_ItemSelected" HeightRequest="180"> <controls:TLScrollView.ItemTemplate> <DataTemplate> <ViewCell> <Grid Padding="6"> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <ffimageloading:CachedImage HeightRequest="180" WidthRequest="100" Aspect="AspectFill" Opacity="0.5" DownsampleHeight="100" DownsampleUseDipUnits="false" LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png" Source="{Binding ImageURL}"/> <Label x:Name="Label" Margin="15" HorizontalOptions="Fill" HorizontalTextAlignment="Center" VerticalOptions="End" TextColor="White" FontSize="10" Text="{Binding FullName}"/> </Grid> </ViewCell> </DataTemplate> </controls:TLScrollView.ItemTemplate> </StackLayout> </ScrollView>
PageModel
``
using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Threading.Tasks;
using FreshMvvm;
using Newtonsoft.Json;
using Project.Models;
using Project.Services;
using Xamarin.Forms;
namespace Code.PageModels
{
public class OptionsPageModel : FreshBasePageModel
{
IDatabaseService _databaseService;
public OptionsPageModel(IDatabaseService databaseService)
{
_databaseService = databaseService;
}
public ObservableCollection<User> Users { get; set; }
public ObservableCollection<User> UserSubSet { get; set; }
public async override void Init(object initData)
{
Users = new ObservableCollection<User>(await DependencyService.Get<IService>().GetUserNames());
UserSubSet = new ObservableCollection<User>();
foreach (var item in Users)
{
switch (item.Category)
{
case "MyCase":
UserSubSet.Add(item);
break;
default:
break;
}
}
RaisePropertyChanged("Users");
RaisePropertyChanged("UserSubSet");
}
protected override void ViewIsAppearing(object sender, EventArgs e)
{
base.ViewIsAppearing(sender, e);
}
public override void ReverseInit(object value)
{
}
}
}
``