UWP Win 10 Tinder swipe card внутри Pivot?

Question

Во-первых, вот ссылка на мой minimal version project.
Я пытаюсь создать твист-карту из-за тлеющего эффекта на моей странице сводных данных. После ссылки Lightstone Carousel Был в состоянии создать его в C# и XAML, который работает внутри Grid.
Теперь моя проблема заключается в том, что пользовательский элемент управления должен находиться внутри элемента Pivot. Поскольку манипуляция по умолчанию по умолчанию отменяет манипулирование манипулятором моего управления на устройствах TOUCH. Как я могу перейти к своему пользовательскому контролю.
Не удалось найти 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> 

В соответствии с У. запрос @ Крис следующие два показывают эффект салфетки Трут
1) Web Version
2) Objective C Code

Для того, чтобы увидеть подобный эффект в приложении удалить заключени стержень элементов управления и поворота, и это будет работать нормально.

EDIT По @Romasz комментарий выгрузили new sample. Есть два верхних, которые являются моим настраиваемым элементом управления, когда левый и правый салфетки теперь работают, но вертикальный салфетка не работает. Ниже приведен список по умолчанию ListView, в котором прокручивается все прокрутки, но нет эффекта типа Tinder. Единственная причина создания элемента управления - добавить эффект.

Answer 1

По вашему второму образцу, добавьте ManipulationMode="System,TranslateX" к вашей карусели. Это должно позволить двигаться ScrollViewer вертикально и проведите через изображения по горизонтали:

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

Там будет только одна проблема - в то время как вертикальная ScrollViewer работает, и вы проведите пальцем влево/вправо, даже на каруселью, стержень будет реагировать с изменение позиции. В этой ситуации есть два способа:

• Сначала отключите инерцию вашего scrollviewer - IsScrollInertiaEnabled="False". Но, поскольку это решение не выглядит красивым, я думал об этом по-другому,

• второй, отключите ось, пока работает scrollviewer.В этом случае вам придется подписаться на ViewChanged события вашей ScrollViewer и управления стержнем-х IsLocked свойство:

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

  в коде позади (я также назвал свой стержень):

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

Что касается изменения поворота на первом/последнем элементе, я думаю, вы сможете справиться с этим, изменив немного карусели - предоставьте события, информирующие о первом/последнем пункте. После этого вы можете вызвать смену.

Answer 2

Вот что я сделал в одном из моих приложений

Вы можете просмотреть его здесь: 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 на новую страницу, сделает код XAML более понятным и удобным в обслуживании.

Надежда этой помощь