Xamarin forms : How to center a video when scrolling (like tiktok)

Question

I working on xamarin forms. I am displaying video tht I have looad on my carrouselView. I would like to center an item when scroolling up or down so that the user do not have scroll many to center a video.

Thanks for your help.

here is xalm code :

<CarouselView x:Name="VideosCarouselView"
 
  PeekAreaInsets="0"
  Loop="False"
  HorizontalScrollBarVisibility="Never"
  VerticalOptions="FillAndExpand"
  HorizontalOptions="FillAndExpand"

          >


<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" 
               ItemSpacing="1"/>
</CarouselView.ItemsLayout>

<CarouselView.ItemTemplate>
<DataTemplate>

    <Grid BackgroundColor="Red" Padding="0" Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

     

    <Grid RowDefinitions="*" ColumnDefinitions="*" RowSpacing="0" ColumnSpacing="0"  x:Name="ParentGrid"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0">
       
     <xct:MediaElement  Grid.Row="0" Grid.Column="0"   Source="{Binding UserVideoBlobAdress}"   IsLooping="True" Margin="0" 
                       BindingContextChanged="OnMediaElementBindingContextChanged" Aspect="AspectFit"
                        
                        ShowsPlaybackControls="True" AutoPlay="False"  x:Name="MyVideoPlayer"   >

        <xct:MediaElement.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnVideoItemTapped" CommandParameter="{Binding .}"/>
        </xct:MediaElement.GestureRecognizers>

     </xct:MediaElement>

 </Grid>

    </Grid>

</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>

Answer 1

Just as Jason said that you can use the Snap points.

You can add the SnapPointsAlignment to the CarouselView. You can set the SnapPointsAlignment to center.

Here is the code you can refer to:

<CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
</CarouselView.ItemsLayout>