UWP:在列表内滚动时如何防止页面级滚动反弹效果? [英] UWP: how to prevent page-level scroll bounce effect when scrolling inside a list?

问题描述

我有以下简单的 XAML 页面设置:

I've got the following simple XAML page setup:

<Page ...>
    <ScrollViewer>
        <StackPanel>
            <Border Height="100">
                <TextBlock Text="Block 1" />
            </Border>
            <ListView Height="200">
                <ListViewItem Content="Lorem" />
                <ListViewItem Content="Ipsum" />
                <ListViewItem Content="Lorem" />
                <ListViewItem Content="Ipsum" />
                <ListViewItem Content="Lorem" />
                <ListViewItem Content="Ipsum" />
            </ListView>
            <Border Height="800">
                <TextBlock Text="Block 2" />
            </Border>
        </StackPanel>
    </ScrollViewer>
</Page>

通常，当用户滚动到页面顶部/底部时，顶级 ScrollViewer 提供的滚动反弹"效果让我很满意.但是，当在 ListView 内滚动时，我得到了 double-bounce；即， ListView 和 ScrollViewer 都提供了弹性拉伸.我觉得发生这种情况是一种奇怪的用户体验.

Typically I'm happy with the scroll "bounce" effect that the top-level ScrollViewer provides when the user scrolls to the top/bottom of the page. However, when scrolling inside the ListView, I get a double-bounce; i.e., both the ListView and the ScrollViewer give that elastic stretch. I feel that it's an odd user experience for this to happen.

有什么办法可以保持 ListView 的弹跳，同时防止它传递给父滚动容器?

Is there any way to keep the ListView's bounce while preventing it from passing on to the parent scroll container?

推荐答案

这种情况只发生在触摸输入上，而不是鼠标输入上，可能有很多方法，但这是最快和最简单的方法.

This is happen only on touch input not on mouse input , there may be many ways but it is fastest and easy way.

这会起作用

XAML

<ScrollViewer Name="sv"> <!-- Name added -->
    <StackPanel>
        <Border Height="100">
            <TextBlock Text="Block 1" />
        </Border>
        <ListView Name="lv" Height="200"> <!-- Name added -->
            <ListViewItem Content="Lorem" />
            <ListViewItem Content="Ipsum" />
            <ListViewItem Content="Lorem" />
            <ListViewItem Content="Ipsum" />
            <ListViewItem Content="Lorem" />
            <ListViewItem Content="Ipsum" />
        </ListView>
        <Border Height="800">
            <TextBlock Text="Block 2" />
        </Border>
    </StackPanel>
</ScrollViewer>

C#

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        //Add this two event handlers and you can add this event handler from xaml also.
        lv.AddHandler(UIElement.PointerEnteredEvent, new PointerEventHandler(OnPointerEntered), true);
        lv.AddHandler(UIElement.PointerExitedEvent, new PointerEventHandler(OnPointerExited), true);            
    }

    private void OnPointerEntered(object sender, PointerRoutedEventArgs e)
    {
        sv.VerticalScrollMode = ScrollMode.Disabled;
    }

    private void OnPointerExited(object sender, PointerRoutedEventArgs e)
    {
        sv.VerticalScrollMode = ScrollMode.Enabled;
    }
}

这篇关于UWP:在列表内滚动时如何防止页面级滚动反弹效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！