在UWP应用程序上滚动期间禁用枢轴滑动

Question

我正在Windows 10平台上开发Universal Window App，我的页面如下所示：

主页面包含一个带有4个透视项目的旋转控件（PAGE 1，PAGE 2，...）。 第1页包含一个红色stackpanel，其中包含一个带水平滚动的列表视图。

我的问题是，当我想要滚动我的红色列表视图时，我的支点滑动到下一页。 我想在列表视图滚动期间禁用枢轴滑动（ 但仅在列表视图滚动期间 ）。

我试图从listview获取scrollviewer并从scrollviewer监听viewChange以禁用数据透视滑动但没有成功。 一切正常但将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.IsHorizontalScrollChainingEnabled="False"附加属性，禁用ListView的ScrollViewer上的链接（并删除代码中的ListViewHelper内容）：

                <!-- 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水平滚动，你可以通过修改ListView的样式在XAML代码中实现这一点，如下所示：

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