UWP Vinci 10 tessere magnetiche Tinder all'interno di Pivot?

Question

In primo luogo, ecco il link al mio minimal version project.
Sto provando a creare un tipo di effetto Tinder nella mia Pagina pivot. Dopo il riferimento Lightstone Carousel È stato possibile crearne uno in C# e XAML che funziona all'interno di Grid.
Ora il mio problema è che il controllo personalizzato dovrebbe entrare in un elemento Pivot. Man mano che la manipolazione predefinita di pivot sovrascrive la manipolazione del controllo del mio controllo sui dispositivi TOUCH. Come posso accedere al mio controllo personalizzato.
Non è stato possibile trovare Touch nell'app Win 10 come da @Romasz risposta.
Qualsiasi altro suggerimento di controllo con effetto simile sarebbe anche apprezzato. 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> 

Secondo @ Chris interrogazione W. due seguenti mostrano l'effetto dell'esca magnetica
1) Web Version
2) Objective C Code

Per vedere simile effetto app rimuovere il perno encasing controllare e ruotare gli elementi e funzionerebbe correttamente.

EDIT Come per commentare @Romasz hanno caricato un new sample. Ci sono due in alto che sono il mio controllo personalizzato in cui il passaggio a sinistra e a destra ora funziona, ma il passaggio verticale non lo fa. Di seguito è riportato il ListView predefinito in cui scorre lo scorrimento di tutto, ma non vi è alcun effetto di tipo Tinder. L'unica ragione per creare il controllo è aggiungere effetto.

Answer 1

Secondo il vostro secondo campione, aggiungi ManipulationMode="System,TranslateX" al carosello. Ciò dovrebbe consentire di spostare ScrollViewer verticalmente e scorrere attraverso le immagini orizzontalmente:

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

Ci sarà appena un problema - mentre ScrollViewer verticale funziona e scorrere verso sinistra/destra, anche sulla giostra perno reagirà con il cambio di articolo. Ci sono due modi in questa situazione, penso:

• prima, disabilitare l'inerzia del tuo scrollviewer - IsScrollInertiaEnabled="False". Ma, poiché questa soluzione non sembra carina, ho pensato a un modo diverso,

• secondo, disabilitare il pivot mentre lo scrollviewer funziona.Per questo caso si dovrà sottoscrivere ViewChanged caso di del ScrollViewer e il controllo di rotazione È bloccato proprietà:

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

  nel codice dietro (Ho anche chiamato il vostro pivot):

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

Per quanto riguarda il cambio di pivot sul primo/ultimo elemento, penso che dovresti essere in grado di gestirlo modificando un po 'il carosello - fornire eventi che informino sul primo/ultimo elemento. Su questo puoi invocare la modifica del pivot.

Answer 2

Ecco quello che ho fatto in una delle mie applicazioni

È possibile rivedere qui: Universal Logo Maker for Windows (testa alla pagina impostazione)

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

E qui è il gestore di eventi 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; 
     } 
    } 

In questo modo, l'interfaccia utente della scheda è ancora presente come supporto per il controllo di Pivot, ma disabilita il comportamento di scorrimento. Inoltre, dividi l'elemento che inserirai in Pivot Item in una nuova pagina renderà il codice XAML più chiaro, più facile da mantenere.

Spero che questo aiuto