Xamarin Forms CollectionView ScrollTo Not working on Load - xaml

Question

I Have XAML form using a CollectionView. I bind the view to a collection of date objects. I set the SelectedItem in Code Behind which is working as expected. I then try to use ScrollTo in code behind however it always displays the first item in the collection once the page is loaded. After the page loads I have wired an image to fire the ScrollTo event and it works as expected. Below is my code. Thanks in advance for any help!
'''
for (int i = 0; i < 31 ; i++)
{
ScheduleDate date = new ScheduleDate();
date._Date = dt.AddDays(i);
colDates.Add(date);
}
cvDate.ItemsSource = colDates;
cvDate.SelectedItem = colDates[10];
cvDate.ScrollTo(cvDate.SelectedItem, null, ScrollToPosition.Start, true)
'''
XAML Form
'''
<CollectionView x:Name="cvDate" Grid.Row="0" Grid.Column="1"
SelectionMode="Single" >
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Description}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center"
/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
'''
Edit:
I wired up the OnCollectionViewScrolled event and when the following line of code is executed from OnAppearing()
cvDate.ScrollTo(cvDate.SelectedItem, null, ScrollToPosition.Start, false);
OnCollectionViewScrolled is NOT being called. However when I execute the same line of code from a button click event OnCollectionViewScrolled is being fired.

Answer 1

I am not sure what is your Description and _Date. I make a simple example for your reference.
Trigger the ScrollTo in OnAppearing override method:
protected override void OnAppearing()
{
cvDate.ScrollTo(cvDate.SelectedItem, null, ScrollToPosition.Start, false);
}
Trigger the ScrollTo with button click method:
private void Button_Clicked(object sender, EventArgs e)
{
cvDate.ScrollTo(cvDate.SelectedItem, null, ScrollToPosition.Start, false);
}
The whole code:
public partial class Page4 : ContentPage
{
public ObservableCollection<ScheduleDate> colDates { get; set; }
public Page4()
{
InitializeComponent();
colDates = new ObservableCollection<ScheduleDate>();
for (int i = 0; i < 31; i++)
{
ScheduleDate date = new ScheduleDate();
date.Description = i.ToString();
colDates.Add(date);
}
cvDate.ItemsSource = colDates;
cvDate.SelectedItem = colDates[10];
}
protected override void OnAppearing()
{
cvDate.ScrollTo(cvDate.SelectedItem, null, ScrollToPosition.Start, false);
}
private void Button_Clicked(object sender, EventArgs e)
{
//cvDate.ScrollTo(cvDate.SelectedItem, null, ScrollToPosition.Start, false);
}
}
public class ScheduleDate
{
public string Description { get; set; }
}
Screenshot:
Update:
<ContentPage.Content>
<StackLayout>
<CollectionView
x:Name="cvDate"
ItemsSource="{Binding colDates}"
SelectionMode="Single">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Label
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Text="{Binding Description}"
VerticalOptions="Center" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Button Clicked="Button_Clicked"></Button>
</StackLayout>
</ContentPage.Content>

Answer 2

I believe that at least on UWP you can't scroll to an element until it's actually been loaded by the UI.
In that case you could work around this with a CollectionView custom renderer.
You can override the ItemsViewRenderer.ScrollTo function and postpone the scroll until the target element has been loaded. To know when that happens you can register to the ListViewBase.ContainerContentChanging event.