Xamarin 表单：如何在滚动时使视频居中（如 tiktok）

Question

我正在研究 xamarin 表单。我正在显示我的 carrouselView 上有负载的视频。我想在向上或向下滚动时将项目居中，以便用户不必滚动多次来居中视频。

感谢您的帮助。

这是xalm代码：

<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

正如Jason所说，您可以使用捕捉点。

您可以将

SnapPointsAlignment

添加到 CarouselView 中。您可以将 SnapPointsAlignment 设置为居中。

以下是您可以参考的代码：

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