Panning not working in a FlowDocumentScrollViewer (WPF) - wpf

Question

The bounty expires in 2 hours. Answers to this question are eligible for a +50 reputation bounty.
Simon is looking for an answer from a reputable source:
I'm looking for a solution that uses native panning instead of emulating one, like if there were images instead of paragraph elements. I don't understand how this is not possible, it seems so basic...
I have a FlowDocument inside a FlowDocumentScrollViewer. I can see the scrollbars and use them to scroll text. To enable panning using touch gestures, I set ScrollViewer.PanningMode="Both". But that only works if there is an image in the FlowDocument, and if I start the touch gesture from the image. In other words, I can pan by pressing, moving and releasing, but only if when I press, my finger touches an image. If I first press in the text, nothing happens (not able to scroll).
Here's the XAML code:
<Window x:Class="TestWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestWPF"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<FlowDocumentScrollViewer Height="350" IsSelectionEnabled="False" ScrollViewer.PanningMode="Both">
<FlowDocument Background="Ivory" Foreground="Black" FontSize="20">
<Section >
<Paragraph>Paragraph 0</Paragraph>
<Paragraph>Paragraph 1</Paragraph>
<Paragraph>Paragraph 2</Paragraph>
<Paragraph>Paragraph 3</Paragraph>
<Paragraph>Paragraph 4</Paragraph>
<Paragraph>Paragraph 5</Paragraph>
<Paragraph>Paragraph 6</Paragraph>
<Paragraph>Paragraph 7</Paragraph>
<Paragraph>Paragraph 8</Paragraph>
<Paragraph>Paragraph 9</Paragraph>
<Paragraph>Paragraph 10</Paragraph>
<Paragraph>Paragraph 11</Paragraph>
<Paragraph>Paragraph 12</Paragraph>
<Paragraph>Paragraph 13</Paragraph>
<Paragraph>Paragraph 14</Paragraph>
<Paragraph>Paragraph 15</Paragraph>
<Paragraph>Paragraph 16</Paragraph>
<Paragraph>Paragraph 17</Paragraph>
<Paragraph>Paragraph 18</Paragraph>
<Paragraph>Paragraph 19</Paragraph>
<Paragraph>Paragraph 20</Paragraph>
<Paragraph>Paragraph 21</Paragraph>
<Paragraph>Paragraph 22</Paragraph>
<Paragraph>Paragraph 23</Paragraph>
</Section>
</FlowDocument>
</FlowDocumentScrollViewer>
</Grid>
</Window>
Using a <TextBlock> and setting ScrollViewer.PanningMode works fine, but I need to use <FlowDocumentScrollViewer>.
It looks like <Paragraph> elements somehow trap events.
Apart from implementing a workaround (which gives poor user experience), how can we fix that?
Thank you

Answer 1

I think the paragraphs grab any touch down event. I don't have any touch device to test. But I cannot scroll the FlowDocumentScrollViewer with mouse inside the document.
A likely work round is to handle preview events and scroll the relevant scrollviewer by the delta moved.
Handlers here deal with both mouse and touch.
bool IsScrolling = false;
Point LastPoint;
private void FlowDocumentScrollViewer_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
HandleDown(sender);
}
private void HandleDown(object sender)
{
var sv = sender as FlowDocumentScrollViewer;
if (sender != null)
{
IsScrolling = true;
LastPoint = Mouse.GetPosition(sv);
}
}
private void FlowDocumentScrollViewer_PreviewMouseMove(object sender, MouseEventArgs e)
{
HandleMove(sender);
}
private void FlowDocumentScrollViewer_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
IsScrolling = false;
}
private void FlowDocumentScrollViewer_PreviewTouchDown(object sender, TouchEventArgs e)
{
HandleDown(sender);
}
private void FlowDocumentScrollViewer_PreviewTouchUp(object sender, TouchEventArgs e)
{
IsScrolling = false;
}
private void FlowDocumentScrollViewer_PreviewTouchMove(object sender, TouchEventArgs e)
{
HandleMove(sender);
}
private void HandleMove(object sender)
{
var fdsv = sender as FlowDocumentScrollViewer;
if (fdsv == null || !IsScrolling)
{
return;
}
var ThisPoint = Mouse.GetPosition(fdsv);
double dY = (ThisPoint.Y - LastPoint.Y);
double dX = (ThisPoint.X - LastPoint.X);
ScrollViewer sv = fdsv.GetChildOfType<ScrollViewer>();
sv.ScrollToVerticalOffset(sv.VerticalOffset - dY);
LastPoint = ThisPoint;
}
Handle those events on the FlowDocumentScrollViewer
<FlowDocumentScrollViewer Height="350"
IsSelectionEnabled="False"
ScrollViewer.PanningMode="Both"
PreviewMouseDown ="FlowDocumentScrollViewer_PreviewMouseDown"
PreviewTouchDown="FlowDocumentScrollViewer_PreviewTouchDown"
PreviewMouseUp="FlowDocumentScrollViewer_PreviewMouseUp"
PreviewTouchUp="FlowDocumentScrollViewer_PreviewTouchUp"
PreviewMouseMove="FlowDocumentScrollViewer_PreviewMouseMove"
PreviewTouchMove="FlowDocumentScrollViewer_PreviewTouchMove"
>
With these in place, I can drag and scroll with mouse.
Getchildoftype
public static class ExtensionMethods
{
public static T GetChildOfType<T>(this DependencyObject depObj) where T : DependencyObject
{
if (depObj == null) return null;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
{
var child = VisualTreeHelper.GetChild(depObj, i);
var result = (child as T) ?? GetChildOfType<T>(child);
if (result != null) return result;
}
return null;
}
}