c# - UWP Win 10 Tinder 在 Pivot 内刷卡？

Question

首先，这是我的 minimal version project 的链接.
我正在尝试在我的 Pivot Page 中创建一种 tinder 刷卡式效果。 引用后Lightstone Carousel能够在 C# 和 XAML 中创建一个在 Grid 中工作的。
现在我的问题是自定义控件应该在里面一个 Pivot 元素。由于枢轴的默认操作覆盖了我的控件在 TOUCH 设备上的滑动操作。我怎样才能冒泡到我的自定义控件。
无法根据 @Romasz 在 Win 10 应用程序中找到 Touch回答。
任何其他具有类似效果的控制建议也将不胜感激。 XAML

<Pivot>    
        <PivotItem>
            <Grid Background="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" Background="LightBlue"/>
                <Grid Grid.Row="1" >
                    <ctrl:Carrousel  Grid.Row="0" Background="Green"   ItemsSource="{Binding Datas}" 
                        SelectedIndex="0"
                        TransitionDuration="2500" 
                        Depth="700" 
                        MaxVisibleItems="15"
                        x:Name="CarrouselElement"
                        Rotation="50" 
                        TranslateY="0"
                        TranslateX ="1200">
                        <ctrl:Carrousel.EasingFunction>
                            <CubicEase EasingMode="EaseOut" />
                        </ctrl:Carrousel.EasingFunction>
                        <ctrl:Carrousel.ItemTemplate>
                            <DataTemplate>
                                <Grid Background="Red">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Border BorderBrush="#bfbfbf" BorderThickness="1">
                                        <Grid HorizontalAlignment="Stretch">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Image Source="{Binding BitmapImage}" Stretch="Fill"></Image>
                                            <Border Grid.Row="1" Background="White">
                                                <TextBlock  Text="{Binding Title}"  FontSize="16" Margin="4"/>
                                            </Border>                                              
                                        </Grid>
                                    </Border>
                                    <Rectangle Grid.Row="1" Height="12" Margin="0,0,0,0" VerticalAlignment="Bottom" >
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#bfbfbf"/>
                                                <GradientStop Color="Transparent" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>    
                            </DataTemplate>
                        </ctrl:Carrousel.ItemTemplate>
                    </ctrl:Carrousel>
                </Grid>  
            </Grid>
        </PivotItem>
        <PivotItem>
        </PivotItem>    
    </Pivot>

根据@Chris W. 查询，以下两个显示了 Tinder 滑动效果
1) Web Version
2) Objective C Code

要在应用程序中看到类似的效果，请移除封装的枢轴控件和枢轴项，它会正常工作。

编辑 根据@Romasz 评论上传了一个 new sample .上面有两个是我的自定义控件，现在可以使用左右滑动，但不能使用垂直滑动。下面是默认的 ListView，其中滚动滑动一切正常，但没有 Tinder 类效果。创建控件的唯一原因是添加效果。

Answer 1

根据您的第二个示例，将 ManipulationMode="System,TranslateX" 添加到您的旋转木马中。这应该允许垂直移动滚动查看器并水平滑动图像:

<ctrl:Carrousel  Grid.Row="0" Background="LightGreen" ItemsSource="{Binding Datas}" ManipulationMode="System,TranslateX"
                 SelectedIndex="0" TransitionDuration="2500" Depth="700" MaxVisibleItems="15" x:Name="CarrouselElement"
                 Rotation="50" TranslateY="0" TranslateX ="1200">

只有一个问题 - 当垂直滚动查看器工作并且您向左/向右滑动时，即使在旋转木马上，枢轴也会对项目的变化使用react。这种情况我认为有两种方式:

• 首先，禁用滚动查看器的惯性 - IsScrollInertiaEnabled="False"。但是，由于这个解决方案看起来不太好，我考虑了不同的方法，

• 其次，在滚动查看器工作时禁用枢轴。对于这种情况，您必须订阅 scrollviewer 的 ViewChanged 事件并控制 pivot 的 IsLocked 属性:

  <ScrollViewer ViewChanged="ScrollViewer_ViewChanged" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Disabled">
  

  在后面的代码中(我还命名了你的枢轴):

  private void ScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) => myPivot.IsLocked = e.IsIntermediate;
  

至于根据第一个/最后一个元素更改枢轴，我认为您应该能够通过稍微修改轮播来处理这个问题 - 提供通知第一个/最后一个项目的事件。在此基础上，您可以调用数据透视表更改。