UWP Win 10 Tinder在Pivot内刷卡？

Question

首先,这是我的最小版本项目的链接.
我正在尝试在我的Pivot页面内创建一个tinder swipe卡类型的效果.在参考Lightstone Carousel之后能够创建一个C#并在XAML其中工作Grid.
现在我的问题是自定义控件应该进入一个Pivot元素.由于pivot的默认操作会覆盖我的控件在TOUCH设备上的滑动操作.如何向下冒泡到我的自定义控件.根据@Romasz的回答,
无法Touch在Win 10应用程序中找到. 任何其他具有类似效果的控制建议也将受到赞赏. 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版本
2)Objective C Code

要在应用程序中看到类似的效果删除包装枢轴控件和枢轴项目,它将正常工作.

编辑 根据@Romasz评论已上传新样本.有两个上面一个是我的自定义控件,其中左右滑动现在可以工作,但垂直滑动不起作用.下面是默认的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">

只有一个问题 - 当垂直滚动查看器工作并且您向左/向右滑动时，即使在旋转木马上，枢轴也会对项目的更改做出反应。针对这种情况，我认为有两种办法：

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

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

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

  在后面的代码中（我也命名了你的枢轴）：

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

至于更改第一个/最后一个元素上的枢轴，我认为您应该能够通过修改一点旋转木马来处理这个问题 - 提供通知第一个/最后一个项目的事件。此时您可以调用枢轴更改。