添加一个“弹簧".滚动 [英] Adding a "spring" to a scroll

问题描述

我有一个ScrollView，它是通过单击鼠标按钮并拖动来滚动的-好像您将手指放在上面并向一个方向或另一个方向拉.但是，我发现到达一端或另一端时遇到UI问题.由于滚动条是隐藏的，因此用户无法说出它们已到达末尾-只是对象不再滚动.解决该UI问题的公认方法似乎是添加"spring"符号. -也就是说，您允许用户滚动到滚动结束之外，从而引入了一些空白，但是使用户必须比以前更多地移动鼠标才能完成相同的移动.我想我在iPhone上见过的最常见的地方-如果您尝试滚动到列表的末尾，则会看到反弹".

.-我该怎么实现呢?在WPF中?我有类似以下XAML的内容:

Hi,
  I've got a ScrollView which is scrolled by clicking the mouse button and dragging - as if you'd put your finger on it and pulled it one direction or the other. However, I find I have a UI problem when I reach one end or the other. Since the scroll bars are hidden the user can't tell that they have reached the end - just that the objects don't scroll any longer. The accepted way to solve this UI issue seems to be to add a "spring" - that is, you allow the user to scroll beyond the end of the scrolling, introducing some white space, but make the user have to move the mouse more than before to accomplish the same movement. I guess the most common place I've seen this is on the iPhone - if you try to scroll past the end of the list you get a "bounce".

  So - how can I implement this in WPF? I've got something like the following XAML:

<ScrollViewer Style="{DynamicResource ScrollViewer-Sketch}" Width="300" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden">
  <i:Interaction.Behaviors>
    <Behaviors:DragScrolling/>
  </i:Interaction.Behaviors>
  <StackPanel Orientation="Horizontal">
    <Image Margin="0" Height="75" Source="jmo.jpg" Stretch="Fill"/>
    <Image Margin="0" Height="75" Source="house.jpg" Stretch="Fill"/>
    <Image Margin="0" Height="75" Source="house.jpg" Stretch="Fill"/>
    <Image Margin="0" Height="75" Source="jmo.jpg" Stretch="Fill"/>
    <Image Margin="0" Height="75" Source="house.jpg" Stretch="Fill"/>
    <Image Margin="0" Height="75" Source="jmo.jpg" Stretch="Fill"/>
    <Image Margin="0" Height="75" Source="house.jpg" Stretch="Fill"/>
  </StackPanel>
</ScrollViewer>

该行为只是捕获了鼠标左键的按下状态，而当用户拖动鼠标时，它将正确运行scrollviewer.现在，当我说到最后时，我想滚动".

我很乐意提出一个建议.我不需要像一个有希望的方向那样的代码.在WPF方面，我将自己称为中级.当然，如果存在示例代码，那么我也全力以赴. :-)

非常感谢！
干杯，
戈登.

---

戈登

The behavior just captures the mouse on left-button down and when the user drags it runs the scrollviewer correctly. Now when I get to the end I want to "over scroll".

I'd appreciate a suggestion. I don't need code as much as a promising direction. I'd call my self beginning-intermediate when it comes to WPF. Of course, if there exists sample code, then I'm all for that as well. :-)

Many thanks!
  Cheers,
    Gordon.

---

Gordon

推荐答案

您好，

我无法重复您的滑动行为，但是使用滚动条可以使此示例正常运行:

Hi,

I was not able to repeat you swiping behavior but with a scrollbar this example works fine:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ScrollViewer Width="Auto" Name="ScrollViewer1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
            <StackPanel Orientation="Horizontal">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="{Binding ElementName=ScrollViewer1, Path=ActualWidth}" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Margin="0" Height="75" Source="IMG_3157.JPG" Stretch="Fill"/>
                    <Image Grid.Column="1" Margin="0" Height="75" Source="IMG_3158.JPG" Stretch="Fill"/>
                    <Image Grid.Column="2" Margin="0" Height="75" Source="IMG_3157.JPG" Stretch="Fill"/>
                    <Image Grid.Column="3" Margin="0" Height="75" Source="IMG_3158.JPG" Stretch="Fill"/>
                    <Image Grid.Column="4" Margin="0" Height="75" Source="IMG_3157.JPG" Stretch="Fill"/>
                    <Image Grid.Column="5" Margin="0" Height="75" Source="IMG_3158.JPG" Stretch="Fill"/>
                    <Image Grid.Column="6" Margin="0" Height="75" Source="IMG_3157.JPG" Stretch="Fill"/>
                    <Image Grid.Column="7" Margin="0" Height="75" Source="IMG_3158.JPG" Stretch="Fill"/>
                </Grid>
            </StackPanel>
        </ScrollViewer>

    </Grid>
</Window>

问候，
保罗·西尼玛(Paul Sinnema).

Regard,
Paul Sinnema.

这篇关于添加一个“弹簧".滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！