bubble scroll event from FlowDocumentScrollViewer to ListView

Question

I have the following (part of) XAML:

    <ListView x:Name="logView" Grid.Row="2" ItemsSource="{Binding Logs}"
                               ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemTemplate>
        <DataTemplate>
            <FlowDocumentScrollViewer ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                      ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <FlowDocument FontSize="12" FontFamily="Calibri" PagePadding="0" TextAlignment="Left">
                    <Paragraph TextIndent="-10" Margin="10,0,0,0">
                        <Run Text="{Binding .}" />
                    </Paragraph>
                </FlowDocument>
            </FlowDocumentScrollViewer>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Logs is an IEnumerable<string> that the ListView is bound to (via a ViewModel, but that shouldn't matter here).

If I remove the whole <ListView.ItemTemplate>...</ListView.ItemTemplate>, I have the mouse wheel scrolling behaviour I want. But with the FlowDocumentScrollViewer and its content, scrolling does not work as smoothly any more. It still scrolls, but just every now and then, most of the time it gets stuck.

Trying to solve this, I followed this solution and created a PreviewMouseWheel handler in the codebehind

private void BubbleScrollingToLogView(object sender, MouseWheelEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = true;
        var eventArg = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
        eventArg.RoutedEvent = MouseWheelEvent;
        eventArg.Source = sender;
        logView.RaiseEvent(eventArg);
    }
}

and added it in the XAML:

....
<FlowDocumentScrollViewer ScrollViewer.VerticalScrollBarVisibility="Disabled"
                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                          PreviewMouseWheel="BubbleScrollingToLogView">
....

But it did not make any change in behaviour. I even tried adding PreviewMouseWheel="BubbleScrollingToLogView" to <FlowDocument> and <Paragraph>, assuming that those might catch the event as well. But nothing helped.

So what do I need to do to get the smooth, default scrolling behaviour of the ListView?

Out of curiosity, why would you not create a single FlowDocument from the Logs collection and show that in a single FlowDocumentScrollViewer? — Clemens, Jan 29 '21 at 09:34
I didn't think about that. Thanks for the suggestion! So now, how to bind a `string` collection to the `FlowDocument` so that each of the `string`s gets it's own paragraph...? — Kjara, Jan 29 '21 at 09:57
Add a property to your view model that creates an appropriate FlowDocument. IIRC the Document property of a FlowDocumentScrollViewer might not be bindable. You may need to create an attached property that performs the assignment or some other workaround. — Clemens, Jan 29 '21 at 10:00

score 0 · Answer 1 · answered Feb 03 '21 at 15:44

If you decide to use only FlowDocumentScrollViewer you can bind Document property to your property on view model.

<FlowDocumentScrollViewer Document="{Binding Document}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</FlowDocumentScrollViewer>

In your view model define Document property of FlowDocument type.

private FlowDocument document;
public FlowDocument Document
{
    get { return document; }
    set
    {
        document = value;
        OnPropertyChanged();
    }
}

Create FlowDocument from Logs:

var doc = new FlowDocument();
doc.FontSize = 12;
doc.FontFamily = new FontFamily("Calibri");
doc.PagePadding = new Thickness(0);
doc.TextAlignment = TextAlignment.Left;
foreach (var log in Logs)
{
    var paragraph = new Paragraph(new Run(log));
    paragraph.TextIndent = -10;
    paragraph.Margin = new Thickness(10, 0, 0, 0);
    doc.Blocks.Add(paragraph);
}
Document = doc;

score 0 · Accepted Answer · answered Feb 11 '21 at 12:14

It was enough to disable the FlowDocumentScrollViewer to get the default scrolling behaviour. I didn't notice any difference in the appearance due to disabling.

<FlowDocumentScrollViewer ScrollViewer.VerticalScrollBarVisibility="Disabled"
                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                          IsEnabled="False">

bubble scroll event from FlowDocumentScrollViewer to ListView

2 Answers2