Xamarin: Scrolling to a position of a ListView when the listview is contained inside of a CarouselViewControl - android-layout

Question

Is there any way to directly access a listview that is contained within a CarouselViewControl?
I have a Carousel for the left and right swiping and inside each page, there is a listview. However, since the ListView is contained within the CarouselViewControl, I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable. I've also tried looping through all of the rendered controls via a FindVisualChildren extension and it appears that when the Carousel renders, it doesn't render the listview as a listview so I don't see any way that I can scroll to a specific vertical position within it.
I'm trying to make an alphabet selector (similar to the one on android's music player) so that when the user clicks a letter, it takes them to that position in the listview. However, it also has to be inside of a carousel view so that it shows a different list when they swipe between the other pages.
Anyone have any ideas if there's any [other] way to do this?
<controls:CarouselViewControl x:Name="RecipeList" Orientation="Horizontal" InterPageSpacing="10" ItemsSource="{Binding ProductList}"
VerticalOptions="FillAndExpand" PositionSelected="RecipeList_PositionSelected"
HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView x:Name="sublist" Margin="5,10,-10,-10" ItemSelected="RecipeList_ItemSelected" IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Key}" ItemsSource="{Binding ProductsList}" VerticalScrollBarVisibility="Never"
SeparatorVisibility="None" HasUnevenRows="True" BackgroundColor="Transparent" SelectedItem="{Binding ScrolledItem}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="1">
<Label Text="" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MinimumHeightRequest="{StaticResource ImageSize}"
Padding="15,10,0,0">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0" Margin="0,5,10,0" CornerRadius="10"
BackgroundColor="#FCFAF8" BorderColor="#F37623" HasShadow="True">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Aspect="AspectFit"/>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="{Binding ProductNane}" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" FontAttributes="Bold" FontSize="Medium" TextColor="Black" BackgroundColor="Transparent" Margin="0,5,0,0"/>
<Image Source="{Binding HeartImage}" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" HeightRequest="30" WidthRequest="30" Aspect="AspectFit" Margin="0,5,10,1" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="HreatImageClicked"/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding Description}" Grid.Row="1" Grid.Column="0" Style="{StaticResource StandardLabel}" FontSize="Small" MaxLines="2" LineBreakMode="TailTruncation" />
<lv:RatingImage Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ImageDeselect="star_line.png" ImageSelect="yellow_star.png" ImageHeight="12" ImageWidth="12"
ItemsNumber="5" InitialValue="{Binding Rating}" HorizontalOptions="End" VerticalOptions="End"
SpaceBetween="2" IsReadOnly="True" Margin="0,0,2,0" />
</Grid>
</Grid>
</Frame>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="RecipeDetailPage" />
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
Thanks!

Answer 1

I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable.
You want to get ListView from CarouselViewControl DataTemplate, I think it is unreasonable, because it is just DataTemplate, I don't find any way to access control in DataTemplate.
So I suggest you can Create an ExtendedScrollView and expose the ScrollTo method into a read only bindable ICommand property. Bind it to your view model corresponding command and use it from there.
You can reuse the control everywhere and it can support any kind of scrolling scenario. You need to create an object to be used a the command parameter that will embed the parameters of ScrollTo, and use it inside the bindable ICommand inside ExtendedScrollView.