UWP Win 10 Tinder 在 Pivot 内刷卡？

Question

首先是 link 到我的 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

这是我在我的一个应用程序中所做的

您可以在这里查看：Universal Logo Maker for Windows（前往设置页面）

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Pivot Grid.Row="0" SelectionChanged="Pivot_SelectionChanged">
        <PivotItem x:Uid="SettingPage_PivotItem1" Header="Save location" />
        <PivotItem x:Uid="SettnigPage_PivotItem2" Header="About" />
        <PivotItem x:Uid="SettnigPage_PivotItem3" Header="Rate and Feedback" />
        <PivotItem x:Uid="SettnigPage_PivotItem4" Header="Update Database" />
        <PivotItem x:Uid="SettnigPage_PivotItem5" Header="Language" />
        <!--<PivotItem Header="More apps" />-->
    </Pivot>

    <Frame x:Name="SettingFrame"
           Grid.Row="1"
           Margin="12,0,0,0" />

</Grid>

这里是 Pivot_SelectionChanged 事件处理程序

private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        Pivot p = sender as Pivot;
        switch (p.SelectedIndex)
        {
            case -1:
                break;
            case 0:
                //Save location
                SettingFrame.Navigate(typeof (SaveLocationSettingPage));
                break;
            case 1:
                //About
                SettingFrame.Navigate(typeof(AboutPage));
                break;
            case 2:
                //Rate and feedback
                SettingFrame.Navigate(typeof (RateAndFeedbackPage));
                break;
            case 3:
                //Update database
                SettingFrame.Navigate(typeof (UpdateDatabasePage));
                break;
            case 4:
                //Language setting
                SettingFrame.Navigate(typeof(LanguagePage));
                break;
        }
    }

通过这种方式，您仍然可以使用选项卡 UI 作为 Pivot 控件支持，但禁用所有滑动行为。此外，将要放入 Pivot Item 中的元素拆分为一个新的 Page 将使 XAML 代码更清晰，更易于维护。

希望对您有所帮助

Answer 2

根据您的第二个示例，将 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">

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

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

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

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

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

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

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

UWP Win 10 Tinder 在 Pivot 内刷卡？

UWP Win 10 Tinder swipe card inside Pivot?

c#

xaml

win-universal-app

uwp

windows-10-universal