How to unify ScrollViewer Scroll across two columns in Touch machines?

Question

In extension to this question How to unify ScrollViewer Scroll across two columns?

I have implemented this correctly. For mouse scroll events and trackpad scroll events the gridview_pointerwheelchanged event is invoked, but for touch screens this is not getting invoked. Is there any event to capture the touch screen scroll event as well?

private void Grid_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
    VerticalScrollBar.Value = Math.Max(0, Math.Min(this.VerticalScrollBar.Maximum, this.VerticalScrollBar.Value - e.GetCurrentPoint(this).Properties.MouseWheelDelta));
}

Andrew KeepCoding · Accepted Answer · 2025-10-23 06:08:53Z

0

Check this doc about touch interactions. The following seems to work. Can you give it a try?

<Grid ColumnDefinitions="*,Auto">
    <Grid
        Grid.Column="0"
        ColumnDefinitions="*,*"
        ManipulationDelta="Grid_ManipulationDelta"
        ManipulationMode="All"
        PointerWheelChanged="Grid_PointerWheelChanged"
        SizeChanged="Grid_SizeChanged">
        <Grid.Resources>
            <Style BasedOn="{StaticResource DefaultScrollViewerStyle}" TargetType="ScrollViewer">
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
                <Setter Property="VerticalScrollBarVisibility" Value="Hidden" />
                <Setter Property="HorizontalScrollMode" Value="Disabled" />
                <Setter Property="VerticalScrollMode" Value="Disabled" />
            </Style>
        </Grid.Resources>
        <ScrollViewer
            x:Name="LeftScrollViewer"
            Grid.Column="0"
            BorderBrush="SkyBlue"
            BorderThickness="1">
            <TextBlock FontSize="2048" Text="Left" />
        </ScrollViewer>
        <ScrollViewer
            x:Name="RightScrollViewer"
            Grid.Column="1"
            BorderBrush="HotPink"
            BorderThickness="1">
            <TextBlock FontSize="1024" Text="Right" />
        </ScrollViewer>
    </Grid>
    <ScrollBar
        x:Name="VerticalScrollBar"
        Grid.Column="1"
        IndicatorMode="MouseIndicator"
        ValueChanged="VerticalScrollBar_ValueChanged" />
</Grid>

private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    VerticalScrollBar.ViewportSize = e.NewSize.Height;
    VerticalScrollBar.Maximum = Math.Max(LeftScrollViewer.ScrollableHeight, RightScrollViewer.ScrollableHeight);
}

private void Grid_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
    double delta = e.GetCurrentPoint(this).Properties.MouseWheelDelta;
    UpdateVerticalScrollBar(delta);
}

private void Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    double delta = e.Delta.Translation.Y;
    UpdateVerticalScrollBar(delta);
}

private void UpdateVerticalScrollBar(double delta)
{
    VerticalScrollBar.Value = Math.Max(0, Math.Min(this.VerticalScrollBar.Maximum, this.VerticalScrollBar.Value - delta));
}

private void VerticalScrollBar_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    if (e.NewValue < 0 || e.NewValue > this.VerticalScrollBar.Maximum)
        return;

    this.LeftScrollViewer.ScrollToVerticalOffset(e.NewValue);
    this.RightScrollViewer.ScrollToVerticalOffset(e.NewValue);
}

edited Oct 23 at 6:08

answered Oct 23 at 4:23

Andrew KeepCoding

15.4k2 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bevara Satyasairam Oct 23 at 5:15

Thanks for taking the time to respond!. Currently, scrolling only works when interacting directly with the larger column. The expected behavior is that scrolling anywhere on the outer grid should cause the main (longer) ScrollViewer to scroll. The normal mouse wheel or trackpad scroll has this behavior.

Andrew KeepCoding Oct 23 at 6:09

I updated my answer using manipulations. It works on my end. ; )

Bevara Satyasairam Oct 23 at 10:48

Thanks a lot. Your answer really helped!

Andrew KeepCoding Oct 24 at 2:43

Great! Glad it helps!

Collectives™ on Stack Overflow

How to unify ScrollViewer Scroll across two columns in Touch machines?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related