UWP: how to prevent page-level scroll bounce effect when scrolling inside a list?

问题

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>

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.

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

回答1:

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

This will work

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>

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

来源：https://stackoverflow.com/questions/47660777/uwp-how-to-prevent-page-level-scroll-bounce-effect-when-scrolling-inside-a-list

标签

user-interface

uwp