UWP在Pivot内部赢得10张Tinder刷卡？

Question

首先，这是我的最小版本项目的链接。

我试图创造一个火药刷卡的效果，在我的数据透视页。在参考之后，光石旋转木马能够在C#和XAML中创建一个在Grid中工作的。

现在，我的问题是，自定义控件应该在Pivot元素中。由于支点的默认操作超过了我的控件在触摸设备上的滑动操作。我怎样才能下到我的自定义控制。

根据Touch的答案，Win 10应用程序中找不到@Romasz。

任何具有类似效果的其他控制建议也将不胜感激。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>

如per @Chris .所示，以下两个查询显示Tinder的滑动效果

1) Web版本

2) 目标C代码

为了在app中看到类似的效果，移除封装的枢轴控制和枢轴项目，它会工作得很好。

编辑如per @Romasz评论已经上传了一个新样品。有两个上面的是我的自定义控制，左和右滑动现在工作，但垂直滑动不工作。下面是默认的ListView，滚动滑动所有的工作，但没有修补程序类效果。创建控件的唯一原因是添加效果。

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事件和控制pivot的IsLocked属性： 在后面的代码中(我还将您命名为支点)： 私有空ScrollViewer_ViewChanged(对象发送者，ScrollViewerViewChangedEventArgs e) => myPivot.IsLocked = e.IsIntermediate；

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

Answer 2

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

您可以在这里查看它：面向Windows的通用Logo制造商 (直接到设置页面)

<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作为数据透视控件支持，但禁用所有的滑动行为。另外，将放入数据透视项中的元素拆分到一个新的页面中，可以使XAML代码更清晰、更易于维护。

希望能帮上忙