UWP Win 10 Tinder swipe card inside Pivot?

Question

Firstly here's the link to my minimal version project.
I am trying to create a tinder swipe card kind of effect inside my Pivot Page. After referring Lightstone Carousel Was able to create one in C# and XAML which works inside a Grid.
Now my problem is that custom control should come inside a Pivot element. As pivot's default manipulation overrides my control's swipe Manipulation on TOUCH devices. How can I bubble down to my custom control.
Wasn't able to find Touchin Win 10 app as per @Romasz answer.
Any other control suggestion with similar effect would also be appreciated. 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>

As per @Chris W. query following two show the Tinder swipe effect
1) Web Version
2) Objective C Code

To see similar effect in app remove the encasing pivot control and pivot items and it would work fine.

EDIT As per @Romasz comment have uploaded a new sample. There are two upper one being my custom control where left and right swipe now works but vertical swipe doesn't. Below is default ListView where scroll swipe everything works but there is no Tinder kind effect. The only reason of creating the control is to add effect.

Answer 1

According to your second sample, add ManipulationMode="System,TranslateX" to your carrousel. This should allow to move scrollviewer vertically and swipe through images horizontally:

<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">

There will be only just one problem - while the vertical scrollviewer is working and you swipe left/right, even on carrousel, the pivot will react with the change of item. There are two ways in this situation, I think:

• 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;
  

As for changing pivot upon first/last element, I think you should be able to handle this by modifying a little the carrousel - provide events informing about the first/last item. Upon this you can invoke the pivot change.

Answer 2

Here what I've done in one of my apps

You can review it here: Universal Logo Maker for Windows (head to setting page)

<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>

And here is the Pivot_SelectionChanged event handler

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;
        }
    }

By doing this way, you still have the tab UI as Pivot control support, but disable all swipe behavior. Also, split the element that you will put inside Pivot Item into a new Page will make XAML code clearer, easier to maintain.

Hope this help