Synchronized scrolling of two ScrollViewers whenever any of one is scrolled in wpf

Question

0.00/5 (No votes)

See more:

I have gone through a thread:
binding two VerticalScrollBars one to another[^]
it has almost helped to achieve the goal but still there is something missing. It is that moving the scrollbars left-right or up-down gives expected behavior of scrolling in both of my scrollviewers but when we try to scroll using/clicking arrow buttons at the ends of these scrollbars in scrollviewers only one scrollviewer is scrolled which is not the expected behavior.

So what else we need to add/edit to solve this?

Posted 28-Feb-13 20:40pm

Vikram_

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

earloc · Accepted Answer · 2013-02-28T22:33:00

this should do the trick:

C#

<Window x:Class="BoundScrollBarws.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="100" Width="100">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ScrollViewer
            Name="_viewer1"
            ScrollChanged="ScrollViewer1_ScrollChanged"
            HorizontalScrollBarVisibility="Visible"
            Grid.Column="0">
            <StackPanel>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
                <TextBlock>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA</TextBlock>
            </StackPanel>
        </ScrollViewer>

        <ScrollViewer
            Name="_viewer2"
            ScrollChanged="ScrollViewer2_ScrollChanged"
            HorizontalScrollBarVisibility="Visible"
            Grid.Column="1">
            <StackPanel>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
                <TextBlock>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB</TextBlock>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

C#

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
    }

    private void ScrollViewer1_ScrollChanged(object sender, ScrollChangedEventArgs e) {
        _viewer2.ScrollToHorizontalOffset(e.HorizontalOffset);
        _viewer2.ScrollToVerticalOffset(e.VerticalOffset);
    }

    private void ScrollViewer2_ScrollChanged(object sender, ScrollChangedEventArgs e) {
        _viewer1.ScrollToHorizontalOffset(e.HorizontalOffset);
        _viewer1.ScrollToVerticalOffset(e.VerticalOffset);
    }
}

btw: didn`t found a quick way doing this via binding

Jegan Thiyagesan · Accepted Answer · 2013-02-28T22:55:00

Hi,
you should use the ValueChanged event insteat of Scroll event:

Instead of

C#

<textbox name="scrlTB1" height="100" scrollbar.scroll="Scroll" scrollviewer.verticalscrollbarvisibility="Visible" />
<textbox name="scrlTB2" height="100" scrollbar.scroll="Scroll" scrollviewer.verticalscrollbarvisibility="Visible" />

private void Scroll(object sender, ScrollEventArgs e)
{
    if (sender == scrlTB1)
    {
        scrlTB2.ScrollToVerticalOffset(e.NewValue);
    }
    else
    {
        scrlTB1.ScrollToVerticalOffset(e.NewValue);
    }
}

you should try this:

C#

<textbox x:name="txt_1" height="122" textwrapping="Wrap" text="TextBox" scrollviewer.verticalscrollbarvisibility="Visible" scrollbar.valuechanged="ScrollBar_Scroll" scrollviewer.cancontentscroll="True" xmlns:x="#unknown" />

<textbox x:name="txt_2" height="122" margin="346,169,0,0" textwrapping="Wrap" text="TextBox" width="139" scrollviewer.verticalscrollbarvisibility="Visible" scrollbar.valuechanged="ScrollBar_Scroll" scrollviewer.cancontentscroll="True" xmlns:x="#unknown" />

private void ScrollBar_Scroll(object sender, RoutedPropertyChangedEventArgs<double> e)
{            
    if (sender == txt_1)
    {
        txt_2.ScrollToVerticalOffset(e.NewValue);
    }
    else
    {
        txt_1.ScrollToVerticalOffset(e.NewValue);
    }
}
</double>

Main properties are:

C#

scrollviewer.verticalscrollbarvisibility="Visible" 
scrollbar.valuechanged="ScrollBar_Scroll" 
scrollviewer.cancontentscroll="True"

This will work on moving the scroll bar, clicking on the scroll buttons and using the cursor.

I hope this helps.

Regards
Jegan

Synchronized scrolling of two ScrollViewers whenever any of one is scrolled in wpf

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Synchronized scrolling of two ScrollViewers whenever any of one is scrolled in wpf

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us