Wpf – way to touch-enable scrolling in a WPF ScrollViewer

touchwpf

I'm trying to create a form in a WPF application that will allow the user to use iPhone-like gestures to scroll through the available fields. So, I've put all my form controls inside a StackPanel inside a ScrollViewer, and the scrollbar shows up as expected when there are too many elements to be shown on the screen.

However, when I try to test this on my touch-enabled device, a panning gesture (placing a finger down on the surface and dragging it upward) does not move the viewable area down as I would expect.

When I simply put a number of elements inside a ListView, the touch gestures work just fine. Is there any way to enable the same kind of behavior in a ScrollViewer?

My window is structured like this:

 <Window x:Class="TestTouchScrolling.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>        
    <ScrollViewer Name="viewer" VerticalScrollBarVisibility="Auto">
        <StackPanel Name="panel">
            <StackPanel Orientation="Horizontal">
                <Label>Label 1:</Label>
                <TextBox Name="TextBox1"></TextBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label>Label 2:</Label>
                <TextBox Name="TextBox2"></TextBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label>Label 3:</Label>
                <TextBox Name="TextBox3"></TextBox>
            </StackPanel>

            <!-- Lots more like these -->

        </StackPanel>
    </ScrollViewer>
</Grid>

Best Answer

You should use the attached properties:

  • ScrollViewer.PanningMode
  • ScrollViewer.PanningDeceleration
  • ScrollViewer.PanningRatio

The PanningMode defaults to None in the ScrollViewer default style, but setting it to another value will enable touch scrolling. I'm currently investigating using this feature in my app and am looking for a good deceleration and ratio value... I'll probably just have to test them out to find something that works well.