logo标签列表

UWP Win 10中如何在Pivot控件内实现Tinder风格的滑动卡片？

c#xamlwin-universal-appuwpwindows-10-universal
8
首先，这是我极简版项目的链接。
我正在尝试在我的Pivot页面内创建一个类似于Tinder滑动卡片的效果。在参考了Lightstone Carousel之后，我能够在C#和XAML中创建一个在Grid内工作的控件。
现在我的问题是，自定义控件应该放在Pivot元素内。由于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版本
2) Objective C代码
如果想在应用中看到类似的效果，请删除包含的轴控制和轴项，就可以正常工作了。
编辑 根据@Romasz的评论，上传了一个新样例。有两个，上面的是我的自定义控件，左右滑动现在可以工作，但垂直滑动不行。下面是默认的ListView，滚动滑动一切正常，但没有Tinder的效果。创建此控件的唯一原因是添加效果。
抱歉，我从未使用过 Tinder，你有一个可以看到的视觉示例吗？不需要去加载其他项目吗？ - Chris W.
抱歉，我没有意识到。我已经更新了问题，并提供了相应的参考链接，请查看以获取基本想法。 - Jerin
我还没有运行你的示例，但是有一个问题：如果你的控件在轴线内部并且它也需要滑动操作，那么你如何区分控件的变化和轴项的变化？ - Romasz
是的，完全正确。但是当用户在控件上滑动最后一个元素时，中心轴也应该改变。类似于横向排列项目的Listview- 中心轴滚动适用于其余项目，但一旦它到达Listview，其内置滚动就开始并且当用户在最后一个项目上滑动时中心轴才会改变。 - Jerin
@Romasz，这解决了滑动问题，但是现在无法进行scrollviewer的垂直滚动（示例中当前不存在）。同时，当它到达最后一个元素时，也不会改变pivot项目。现在它的行为就像一个补丁，就像一个webview，上下交互都无法冒泡。这是一个示例，你可以看到当我在它上面滑动时，我的垂直滚动不起作用。有没有办法在最后一个项目上滑动时更改pivot项目？ - Jerin
显示剩余5条评论
2个回答
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">

只有一个问题 - 当垂直滚动条起作用并且您向左/右滑动，即使在旋转木马上，枢轴也会随着项目的更改而做出反应。在这种情况下，我认为有两种方法：

  • first, disable inertia of your scrollviewer - IsScrollInertiaEnabled="False". But, as this solution doesn't look nice, I thought about different way,

  • second, disable pivot while the scrollviewer is working. For this case you will have to subscribe to ViewChanged event of your scrollviewer and control pivot's IsLocked property:

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

    in the code behind (I've also named your pivot):

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

关于在第一个/最后一个元素上改变中心点，我认为你可以通过修改轮播图来处理 - 提供有关第一个/最后一个项目的事件。通过这个，你可以调用中心点的改变。

哇，这就解决了问题。太棒了。由于我想创建一个通用控件，可以在每个页面上使用。你认为我应该如何处理滑动时的枢轴页更改。获取最后或第一个项目编号可以通过将属性附加到我的用户控件并设置其值来完成。在主页的哪个事件下（因为枢轴位于该页面上）应指定检查当前项目索引。我是否需要在计划使用此控件的所有页面上添加此事件。 - Jerin
@Jerin 如果我理解你的意思正确的话，我会采用不同的方法-而不是定义一个属性，使用事件来实现你的轮播。一旦用户想要切换到下一个项目并且当前项是最后/第一项时，该事件将被触发。然后你可以在你的页面中订阅它并更改枢轴项。 - Romasz
0

以下是我在其中一个应用程序中完成的内容

您可以在此处查看：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;
        }
    }

通过这种方式，您仍然可以使用Pivot控件支持的选项卡UI，但禁用所有滑动行为。此外，将放置在Pivot Item中的元素拆分为新页面将使XAML代码更清晰、更易于维护。
希望这能帮到您。
抱歉回复晚了。由于您的答案完全禁用了“滑动行为”，这不是我需要的期望效果。因为这会将枢轴项转换为按钮，点击它们只会打开页面。是否有任何方法可以在我滑动枢轴内的元素时保留默认的滑动行为，同时也能滑动我的自定义控件，而目前正在被覆盖？ - Jerin
不好意思，最后的办法是完全修改Pivot Control，并设置自定义依赖属性以随意启用和禁用滑动。 - Hunter Tran
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接