Отключение поворота коромысла во время прокрутки на UWP приложения

Question

Я занимаюсь разработкой универсального окна приложения на Windows 10 платформы и моя страница выглядит как этот пример:

Главной страница содержит элемент управления поворота с 4 пунктами поворота (страницы 1, СТРАНИЦА 2, ...). СТРАНИЦА 1 содержит красную стеклянную панель, содержащую список с горизонтальной прокруткой.

Моя проблема в том, что когда я хочу прокрутить свой красный список horitontaly, моя точка поворота на следующей странице. Я хочу отключить прокрутку в ходе прокрутки списка (Но только во время прокрутки списка).

Я попытался получить scrollviewer из списка и прослушать viewChange от scrollviewer, чтобы отключить прокрутку, но безуспешно. Все работает, но устанавливается IsHitTestVisible на false, похоже, не работает. Вот мой код:

ScrollViewer scrollViewer = ListViewHelper.GetScrollViewer(myListView); 
scrollViewer.ViewChanged += scrollview_ViewChanged; 

private void scrollview_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) 
    { 
     var scrollviewer = sender as ScrollViewer; 

     if (e.IsIntermediate) 
     { 
      mainPivot.IsHitTestVisible = false; 
     } else 
     { 
      mainPivot.IsHitTestVisible = true; 
     } 
    } 

И мой класс ListViewHelper:

public static class ListViewHelper 
{ 
    public static ScrollViewer GetScrollViewer(this DependencyObject element) 
    { 
     if (element is ScrollViewer) 
     { 
      return (ScrollViewer)element; 
     } 

     for (int i = 0; i < VisualTreeHelper.GetChildrenCount(element); i++) 
     { 
      var child = VisualTreeHelper.GetChild(element, i); 

      var result = GetScrollViewer(child); 
      if (result == null) 
      { 
       continue; 
      } 
      else 
      { 
       return result; 
      } 
     } 

     return null; 
    } 
} 

И мой XAML код:

<Pivot x:Name="mainPivot"> 

     <PivotItem x:Name="pivot1"> 

      <!-- Header --> 
      <PivotItem.Header> 
       <controls:TabHeader x:Uid="pivot1HeaderTitle" 
            Label="" 
            Glyph="&#xea34;"/> 
      </PivotItem.Header> 

      <!-- Content --> 
      <Grid> 

       <Grid.RowDefinitions> 
        <RowDefinition Height="110" /> 
        <RowDefinition Height="30" /> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 

       <StackPanel  x:Name="localeEditionsFavory" 
           Grid.Row="0"> 

        [...] 

        <!-- HERE is my listview --> 
        <ListView x:Name="localeEditionsFavoryList" 
           Height="80" 
           ItemsSource="{Binding FavoritesItems}" 
           ScrollViewer.HorizontalScrollBarVisibility="Auto" 
           ScrollViewer.HorizontalScrollMode="Enabled"> 

         <ListView.ItemsPanel> 
          <ItemsPanelTemplate> 
           <StackPanel Orientation="Horizontal"> 
           </StackPanel> 
          </ItemsPanelTemplate> 
         </ListView.ItemsPanel> 

         <ListView.ItemContainerStyle> 
          <Style TargetType="ListViewItem"> 
           <Setter Property="Padding" Value="0,0,0,0" /> 
           <Setter Property="Margin" Value="10" /> 
           <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
          </Style> 
         </ListView.ItemContainerStyle> 

         <ListView.ItemTemplate> 
          <DataTemplate> 

           <Grid x:Name="favoryList"> 

            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="90" /> 
            </Grid.ColumnDefinitions> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="55" /> 
            </Grid.RowDefinitions> 

            <Rectangle x:Name="strokedasharray" 
               Grid.Column="0" 
               Grid.Row="0" 
               Fill="White" 
               Opacity="0.2" 
               RadiusX="5" 
               RadiusY="5"/> 

            <TextBlock Grid.Column="0" 
               Grid.Row="0" 
               Text="{Binding FavoriteItem.EditionKey}" 
               TextWrapping="WrapWholeWords" 
               Height="auto" 
               Foreground="White" 
               FontSize="14" 
               Margin="2" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" 
               TextTrimming="CharacterEllipsis" 
               TextAlignment="Center"/> 

           </Grid> 

          </DataTemplate> 
         </ListView.ItemTemplate> 

        </ListView> 

       </StackPanel> 

       [...] 

       <ScrollViewer VerticalScrollMode="Auto" 
           VerticalScrollBarVisibility="Auto" 
           Grid.Row="3"> 

        <controls:NewsItemControl x:Name="NewsListControl" 
               Visibility="{Binding Busy, Converter={StaticResource InverseBoolToVisibilityConverter}}"/> 

       </ScrollViewer> 

      </Grid> 

     </PivotItem> 

     [...] 

ли какой-либо один имеет представление о том, чтобы решить эту проблему?

Answer 1

нежелательное поведение, которое вы видите, является результатом прокрутки цепочки. Как ListView, так и Pivot содержат ScrollViewers в своих шаблонах управления, делая это вложенной ситуацией ScrollViewer. Когда у вас есть ScrollViewer, содержащийся в дереве другого, и пытайтесь прокручивать его с помощью касания, выходящего за пределы внутреннего ScrollViewer, тогда внешний ScrollViewer заходит и начинает прокрутку.

С отключенной привязкой вы сможете прокручивать внешний ScrollViewer, начав манипуляцию в области, проверяемой на удаленный контроль внешнего ScrollViewer. Сцепление включается по умолчанию на ScrollViewer поэтому при попытке прокрутки мимо конца списка цепных пинков в и распознаются Pivot как попытка «прокрутки» к следующему пункту поворота.

Отключить сцепление на ScrollViewer в ListView (и удалить ListViewHelper вещи в коде позади), установив ScrollViewer.IsHorizontalScrollChainingEnabled="False" вложенное свойство:

   <!-- HERE is my listview --> 
       <ListView x:Name="localeEditionsFavoryList" 
          Height="80" 
          ItemsSource="{Binding FavoritesItems}" 
          ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
          ScrollViewer.HorizontalScrollBarVisibility="Auto" 
          ScrollViewer.HorizontalScrollMode="Enabled"> 

Answer 2

Если вам нужно сделать ListView горизонтальной прокрутки, вы можете добиться этого только в XAML коде, изменив стиль ListView, как это:

<Style x:Key="ListViewStyle" TargetType="ListView"> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" /> 
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" /> 
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True" /> 
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" /> 
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" /> 
    <Setter Property="ItemsPanel"> 
     <Setter.Value> 
      <ItemsPanelTemplate> 
       <ItemsStackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Теперь, если отключить прокрутку Pivot при прокрутке ListView из «PAGE 1», вы можете изменить свой код так:

public void Page_Loaded(object sender, RoutedEventArgs e) 
{ 
    var scrollViewer = FindChildOfType<ScrollViewer>(mainPivot); 
    scrollViewer.HorizontalScrollMode = ScrollMode.Disabled; 
} 

private void PivotSelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    if (mainPivot.SelectedIndex == 0) 
    { 
     var scrollViewer = FindChildOfType<ScrollViewer>(mainPivot); 
     scrollViewer.HorizontalScrollMode = ScrollMode.Disabled; 
    } 
} 

public static T FindChildOfType<T>(DependencyObject root) where T : class 
{ 
    var queue = new Queue<DependencyObject>(); 
    queue.Enqueue(root); 
    while (queue.Count > 0) 
    { 
     DependencyObject current = queue.Dequeue(); 
     for (int i = 0; i < VisualTreeHelper.GetChildrenCount(current); i++) 
     { 
      var child = VisualTreeHelper.GetChild(current, i); 
      var typedChild = child as T; 
      if (typedChild != null) 
      { 
       return typedChild; 
      } 
      queue.Enqueue(child); 
     } 
    } 
    return null; 
}