滚动的UWP应用过程中禁用支点刷卡 [英] Disable pivot swipe during scrolling on UWP app
问题描述
我在Windows 10平台上开发通用应用程序窗口和我的网页看起来像这样的例子：
的 
I'm developing Universal Window App on Windows 10 platform and my page looks like this example :
主页包含有4个支点的项目（第1，第2页，...）枢轴控件。
第1页包含一个红色的StackPanel包含有水平滚动列表视图。
Main page contain a pivot control with 4 pivot items (PAGE 1, PAGE 2, ...). PAGE 1 contain a red stackpanel which contain a listview with horizontal scrolling.
我的问题是，当我要horitontaly滚动我的红列表视图，我的支点刷卡下一页。
我想列表视图中禁用支点刷卡滚动（但是，只有列表视图中滚动）。
My problem is, when i want to scroll my red listview horitontaly, my pivot swipe to next page. I want to disable pivot swipe during listview scrolling (But only during listview scrolling).
我试图让从列表视图的ScrollViewer并从的ScrollViewer听viewChange禁用支点刷卡，但没有成功。
一切工作，但设置IsHitTestVisible为false似乎不起作用。
这里是我的代码：
I tried to get scrollviewer from listview and to listen viewChange from scrollviewer to disable pivot swipe but without success. Everything work but set IsHitTestVisible to false seems to not work. Here is my code :
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类：
And my ListViewHelper class :
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=""/>
</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>
[...]
没有任何一个有一个想法，以解决这个问题？
Does any one has an idea to resolve this problem ?
推荐答案
您所看到的意外的行为，是滚动链接的结果。无论是ListView和枢轴包含在他们的控制模板ScrollViewers使之成为一个嵌套的ScrollViewer情况。当你有一个ScrollViewer中包含的另一个树内，并试图通过超越内部的ScrollViewer程度触摸滚动，然后外的ScrollViewer接合，并开始滚动。
The undesired behavior you're seeing is a result of scroll chaining. Both the ListView and Pivot contain ScrollViewers in their control templates making this a nested ScrollViewer situation. When you have a ScrollViewer contained within the tree of another and attempt to scroll via touch beyond the extent of the inner ScrollViewer then the outer ScrollViewer engages and begins scrolling.
通过链接禁用你只能够由开始于外ScrollViewer中的命中测试的区域操纵滚动的ScrollViewer外。链接默认情况下在ScrollViewer中，所以当您试图滚动过去和链接踢被透视视为企图滚动到下一个支点项目列表的末尾启用。
With chaining disabled you’d only be able to scroll the outer ScrollViewer by beginning the manipulation on a hit-testable area of the outer ScrollViewer. Chaining is enabled by default on the ScrollViewer so when you attempt to scroll past the end of the list the chaining kicks in and is recognized by the Pivot as an attempt to "scroll" to the next pivot item.
禁用链上ListView的ScrollViewer中（并删除在后面的代码ListViewHelper东西）通过设置 ScrollViewer.IsHorizontalScrollChainingEnabled =FALSE附加属性：
Disable chaining on the ListView's ScrollViewer (and remove the ListViewHelper stuff in code behind) by setting the ScrollViewer.IsHorizontalScrollChainingEnabled="False" attached property:
<!-- HERE is my listview -->
<ListView x:Name="localeEditionsFavoryList"
Height="80"
ItemsSource="{Binding FavoritesItems}"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Enabled">
这篇关于滚动的UWP应用过程中禁用支点刷卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
