Enable swipe scrolling on Textbox control in WPF Scrollviewer

Question

We are developing a touch application in WPF. Our ScrollViewers have the property PanningMode set to Both to enable swipe scrolling. This works fine when swiping in empty areas and even on CheckBox and ComboBox controls.

However when swiping on a TextBox (hold the finger briefly on the textbox and move it up or down), the ScrollViewer doesn't scroll. Is there a way to enable swipe-scrolling on all controls and only focus them on tap?

This behaviour can be reproduced with the following code:

<Window x:Class="WpfSandbox.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">

    <ScrollViewer PanningMode="Both">
        <StackPanel>
            <TextBox Margin="5"></TextBox>
            <TextBox Margin="5"></TextBox>
            <TextBox Margin="5"></TextBox>
            <TextBox Margin="5"></TextBox>
            <TextBox Margin="5"></TextBox>
            <TextBox Margin="5"></TextBox>
            <TextBox Margin="5"></TextBox>
            <TextBox Margin="5"></TextBox>
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
        </StackPanel>
    </ScrollViewer>
</Window>

Bruno V Bruno V · Accepted Answer · 2014-12-10T14:30:50

I've managed to solve this problem. The reason that TextBox controls don't swipe-scroll is because their control template also contains a ScrollViewer with a PanningMode set to VerticalFirst. VerticalFirst allows for selecting the TextBox text when swiping horizontally (see MSDN PanningMode).

Only when setting the TextBox ScrollViewer.PanningMode to None, swipe-scrolling on this control is maintained (this disables the selection). This is default behaviour for CheckBox and ComboBox controls because they do not contain a ScrollViewer in their ControlTemplate.

I've modified the example to show this behaviour:

<Window x:Class="WpfSandbox.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">

    <ScrollViewer PanningMode="Both">
        <StackPanel>
            <TextBox Margin="5" ScrollViewer.PanningMode="Both">Panningmode both</TextBox>
            <TextBox Margin="5" ScrollViewer.PanningMode="HorizontalFirst">Panningmode HorizontalFirst</TextBox>
            <TextBox Margin="5" ScrollViewer.PanningMode="HorizontalOnly">Panningmode HorizontalOnly</TextBox>
            <!-- Allows swipe scrolling -->
            <TextBox Margin="5" ScrollViewer.PanningMode="None">Panningmode None</TextBox>
            <TextBox Margin="5" ScrollViewer.PanningMode="VerticalFirst">Panningmode VerticalFirst</TextBox>
            <TextBox Margin="5" ScrollViewer.PanningMode="VerticalOnly">Panningmode VerticalOnly</TextBox>
            <TextBox Margin="5" ScrollViewer.PanningMode="Both" Height="60" xml:space="preserve" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" >Panning set to both&#x0a;test 2&#x0a;test 2&#x0a;test 2&#x0a;test 2&#x0a;test 2</TextBox>
            <!-- Allows swipe scrolling -->
            <TextBox Margin="5" ScrollViewer.PanningMode="None" Height="60" xml:space="preserve" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" >Panning set to none&#x0a;test 2&#x0a;test 2&#x0a;test 2&#x0a;test 2&#x0a;test 2</TextBox>
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <CheckBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
            <ComboBox Margin="5" />
        </StackPanel>
    </ScrollViewer>
</Window>

Enable swipe scrolling on Textbox control in WPF Scrollviewer

1 Answers