Click here to Skip to main content
11,636,985 members (74,365 online)
Click here to Skip to main content

Scroll Synchronization

, 29 Jun 2013 CPOL 71.4K 3.2K 61
Rate this:
Please Sign up or sign in to vote.
Synchronizing the scroll position of multiple controls.

Introduction

Imagine you have two ListBoxes with lots of items. Whenever a user scrolls in one of the two ListBoxes, the other one should be updated, too. What we want to do in this article is to create a simple attached property that allows us to group scrollable controls. In the following sample, you will see two ScrollViewers whose scroll positions are synchronized because they are both attached to the same ScrollGroup, "Group1":

<ScrollViewer 
    Name="ScrollViewer1" 
    scroll:ScrollSynchronizer.ScrollGroup="Group1">
...
</ScrollViewer>
<ScrollViewer 
    Name="ScrollViewer2" 
    scroll:ScrollSynchronizer.ScrollGroup="Group1">
...
</ScrollViewer>

As most scrollable controls use the ScrollViewer in their template to enable scrolling, this should also work for other controls like ListBoxes or TreeViews, as long as they contain a ScrollViewer in their ControlTemplate.

You can see the Silverlight version of my synchronized ListBoxes at http://www.software-architects.com/devblog/2009/10/13/Scroll-Synchronization-in-WPF-and-Silverlight.

In the following article, I will show how to build the ScrollSyncronizer class in WPF to synchronize the scroll position of various scrollable controls. In the source code download, you will find a working solution for WPF and Silverlight.

Building the ScrollSynchronizer

Our ScrollSynchronizer object has no representation in the UI. It is just responsible for providing the attached property ScrollGroup. So, I have chosen DependencyObject as the base class. First, I added the attached dependency property ScrollGroup with its corresponding methods GetScrollGroup and SetScrollGroup to the class.

public class ScrollSynchronizer : DependencyObject
{
    public static readonly DependencyProperty ScrollGroupProperty =
	    DependencyProperty.RegisterAttached(
	    "ScrollGroup", 
	    typeof(string), 
	    typeof(ScrollSynchronizer), 
	    new PropertyMetadata(new PropertyChangedCallback(
	    OnScrollGroupChanged)));

    public static void SetScrollGroup(DependencyObject obj, string scrollGroup)
    {
        obj.SetValue(ScrollGroupProperty, scrollGroup);
    }

    public static string GetScrollGroup(DependencyObject obj)
    {
        return (string)obj.GetValue(ScrollGroupProperty);
    }
    ...
}

In the property metadata of the new property, there is a callback that is invoked every time a ScrollViewer uses the attached property, so this is the place where we will provide the logic to synchronize the ScrollViewer with all other attached ScrollViewers. But before we need some private fields to store all attached ScrollViewers as well as their corresponding horizontal and vertical offsets. The string part in these dictionaries is the name of the group that is set by the ScrollGroup property.

private static Dictionary<ScrollViewer, string> scrollViewers = 
    new Dictionary<ScrollViewer, string>();

private static Dictionary<string, double> horizontalScrollOffsets = 
    new Dictionary<string, double>();

private static Dictionary<string, double> verticalScrollOffsets = 
    new Dictionary<string, double>();

Now, we can implement the callback for changes in the ScrollGroup property. Basically, the code is quite simple. When a new ScrollViewer is added by setting the attached property, we check if we can already find a scroll position for the group in the fields horizontalScrollOffset and verticalScrollOffset. If so, we adjust the scroll position of the new ScrollViewer so that it matches the group. Otherwise, we add an entry to horizontalScrollOffset and verticalScrollOffset with the current scroll position of the new ScrollViewer. Finally, we add the new ScrollViewer to the scrollViewers dictionary with its corresponding group name, and we add an event handler for the ScrollChanged event, so that we can adapt all other ScrollViewers in the group when the scroll position has changed.

If the attached property is removed, we remove the ScrollViewer from the list. In this case, we do not remove the entries in horizontalScrollOffset and verticalScrollOffset, even when it is the last ScrollViewer of a group, because when another ScrollViewer is added to that group later, we still know the last scroll position of that group.

private static void OnScrollGroupChanged(DependencyObject d, 
                    DependencyPropertyChangedEventArgs e)
{
    var scrollViewer = d as ScrollViewer;
    if (scrollViewer != null)
    {
        if (!string.IsNullOrEmpty((string)e.OldValue))
        {
            // Remove scrollviewer
            if (scrollViewers.ContainsKey(scrollViewer))
            {
                scrollViewer.ScrollChanged -= 
                  new ScrollChangedEventHandler(ScrollViewer_ScrollChanged);
                scrollViewers.Remove(scrollViewer);
            }
        }

        if (!string.IsNullOrEmpty((string)e.NewValue))
        {
            // If group already exists, set scrollposition of 
            // new scrollviewer to the scrollposition of the group
            if (horizontalScrollOffsets.Keys.Contains((string)e.NewValue))
            {
                scrollViewer.ScrollToHorizontalOffset(
                              horizontalScrollOffsets[(string)e.NewValue]);
            }
            else
            {
                horizontalScrollOffsets.Add((string)e.NewValue, 
                                        scrollViewer.HorizontalOffset);
            }

            if (verticalScrollOffsets.Keys.Contains((string)e.NewValue))
            {
                scrollViewer.ScrollToVerticalOffset(verticalScrollOffsets[(string)e.NewValue]);
            }
            else
            {
                verticalScrollOffsets.Add((string)e.NewValue, scrollViewer.VerticalOffset);
            }

            // Add scrollviewer
            scrollViewers.Add(scrollViewer, (string)e.NewValue);
            scrollViewer.ScrollChanged += 
                new ScrollChangedEventHandler(ScrollViewer_ScrollChanged);
        }
    }
}

Now, our last task is to implement the event handler for the ScrollChanged event. If the horizontal or the vertical scroll position has changed, we update the dictionaries verticalScrollOffsets and horizontalScrollOffsets to the latest position. Then, we have to find all ScrollViewers that are in the same group as the changed ScrollViewer and update their scroll positions.

private static void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    if (e.VerticalChange != 0 || e.HorizontalChange != 0)
    {
        var changedScrollViewer = sender as ScrollViewer;
        Scroll(changedScrollViewer);
    }
}

private static void Scroll(ScrollViewer changedScrollViewer)
{
    var group = scrollViewers[changedScrollViewer];
    verticalScrollOffsets[group] = changedScrollViewer.VerticalOffset;
    horizontalScrollOffsets[group] = changedScrollViewer.HorizontalOffset;

    foreach (var scrollViewer in scrollViewers.Where((s) => s.Value == 
                                      group && s.Key != changedScrollViewer))
    {
        if (scrollViewer.Key.VerticalOffset != changedScrollViewer.VerticalOffset)
        {
            scrollViewer.Key.ScrollToVerticalOffset(changedScrollViewer.VerticalOffset);
        }

        if (scrollViewer.Key.HorizontalOffset != changedScrollViewer.HorizontalOffset)
        {
            scrollViewer.Key.ScrollToHorizontalOffset(changedScrollViewer.HorizontalOffset);
        }
    }
}

Testing the ScrollSynchronizer

To test the new attached property, we build a simple UI with two ScrollViewers. For both ScrollViewers, we assign the value "Group1" to the ScrollGroup property.

<Window 
  xmlns:scroll="clr-namespace:SoftwareArchitects.Windows.Controls;
  assembly=SoftwareArchitects.Windows.Controls.ScrollSynchronizer"
  ...>
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <ScrollViewer Grid.Column="0" Name="ScrollViewer1" 
                     Margin="0,0,5,0" 
                     scroll:ScrollSynchronizer.ScrollGroup="Group1">
            <StackPanel Name="Panel1" />
        </ScrollViewer>

        <ScrollViewer Grid.Column="1" Name="ScrollViewer2" 
                     Margin="5,0,0,0" 
                     scroll:ScrollSynchronizer.ScrollGroup="Group1">
            <StackPanel Name="Panel2" />
        </ScrollViewer>
    </Grid>
</Window>

In the code-behind file, we add some TextBlocks to both panels, so that the ScrollBars will get visible.

public Window1()
{
    InitializeComponent();
    // Fill listboxes
    for (var i = 0; i < 100; i++)
    {
        this.Panel1.Children.Add(new TextBlock() 
                { Text = string.Format("This is item {0}", i) });
        this.Panel2.Children.Add(new TextBlock() 
                { Text = string.Format("This is item {0}", i) });
    }
}

Done! We have two synchronized ScrollViewers:

Synchronizing ListBoxes

Now, how can we get other controls synchronized? Let's replace the ScrollViewers by two ListBoxes. Unfortunately, we cannot set the attached property ScrollGroup to the ListBoxes. In the OnScrollGroupChanged callback, we assume that we will always get a ScrollViewer. So, we could enhance the ScrollSynchronizer to accept other types of controls, or we could simply add a style for the ScrollViewer, within the ListBoxes, that sets the ScrollGroup property. In this case, no changes are necessary for our ScrollSynchronizer.

<ListBox Grid.Column="0" Name="ListBox1" Margin="0,0,5,0">
    <ListBox.Resources>
        <Style TargetType="ScrollViewer">
            <Setter Property="scroll:ScrollSynchronizer.ScrollGroup" Value="Group1" />
        </Style>
    </ListBox.Resources>
</ListBox>
 

<ListBox Grid.Column="1" Name="ListBox2" Margin="5,0,0,0">
    <ListBox.Resources>
        <Style TargetType="ScrollViewer">
            <Setter Property="scroll:ScrollSynchronizer.ScrollGroup" Value="Group1" />
        </Style>
    </ListBox.Resources>
</ListBox>

A nicer way to do this would be to set the style in the Grid resources, so it applies to all ScrollViewers in the grid automatically.

<Grid.Resources>
    <Style TargetType="ScrollViewer">
        <Setter Property="scroll:ScrollSynchronizer.ScrollGroup" Value="Group1" />
    </Style>
</Grid.Resources>

<ListBox Grid.Column="0" Name="ListBox1" Margin="0,0,5,0" />

<ListBox Grid.Column="1" Name="ListBox2" Margin="5,0,0,0" />

Silverlight Support

Basically, this solution would also work for Silverlight. In detail, there are some differences like a ScrollViewer does not provide the ScrollChanged event in Silverlight. But, you can bypass this problem by using the Scroll and ValueChanged events of the underlying ScrollBars. Another problem is that the Style for the ScrollViewer is not applied in the ListBox sample, even when using the ImplicitStyleManager. So, I ended up setting the attached property in code for Silverlight. In the source code download, you will find a working solution for WPF and Silverlight. At http://www.software-architects.at/TechnicalArticles/ScrollSync/tabid/101/language/en-US/Default.aspx, you can see an online demo of synchronized listboxes in Silverlight.

License

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

Share

About the Author

Karin Huber
Software Developer software architects
Austria Austria
Hi, my name is Karin Huber. Since 1998 I have been working as a developer and IT consultant focusing on building database oriented web applications. In 2007 my friend Rainer and I decided that we want to build a business based on COTS (component off-the-shelf) software. As a result we founded "software architects".

These days we are offering our first version of the time tracking software called 'time cockpit'. You can find more information at www.timecockpit.com.

You may also be interested in...

Comments and Discussions

 
QuestionIt doesn't work on RadGridView Pin
hosum010518-Mar-15 20:45
memberhosum010518-Mar-15 20:45 
QuestionOnly Synchronized Afterwards Pin
Nathan Sokalski8-Oct-14 15:25
memberNathan Sokalski8-Oct-14 15:25 
GeneralGreat work ! Pin
amigoface24-Jun-14 3:15
memberamigoface24-Jun-14 3:15 
GeneralPerfekt! Pin
da_adel30-Sep-13 0:09
memberda_adel30-Sep-13 0:09 
Questionsync up based on a column value? Pin
Harold Chattaway14-Jul-13 3:06
memberHarold Chattaway14-Jul-13 3:06 
GeneralMy vote of 5 Pin
CodeHawkz20-Mar-13 0:16
memberCodeHawkz20-Mar-13 0:16 
QuestionGreat Work Pin
Member 16125822-Nov-12 4:20
memberMember 16125822-Nov-12 4:20 
AnswerMy vote of 5 Pin
To Thanh Liem25-Oct-12 4:15
memberTo Thanh Liem25-Oct-12 4:15 
GeneralMy vote of 5 Pin
Jason McBratney5-Sep-12 16:12
memberJason McBratney5-Sep-12 16:12 
Suggestionuse two attached properties Pin
William99813-Jun-12 17:29
memberWilliam99813-Jun-12 17:29 
GeneralMy vote of 5 Pin
William99812-Jun-12 23:03
memberWilliam99812-Jun-12 23:03 
QuestionScrollbar Help Pin
Navin Kumar.K.Subramanian19-Mar-12 21:27
groupNavin Kumar.K.Subramanian19-Mar-12 21:27 
QuestionMemory Leak Pin
Erlend Robaye26-Feb-12 23:34
memberErlend Robaye26-Feb-12 23:34 
GeneralWorks on WPF4. Pin
shintwlv19-Jan-12 19:37
membershintwlv19-Jan-12 19:37 
GeneralAppreciate Pin
SektorL17-Jun-11 0:44
memberSektorL17-Jun-11 0:44 
GeneralGreat Article...rocks Pin
Hiren Khirsaria2-Jun-11 23:45
memberHiren Khirsaria2-Jun-11 23:45 
General5/5 works perfectly with DataGrid Pin
cl1m4x21-May-11 4:32
membercl1m4x21-May-11 4:32 
GeneralWorks on .NET4. Saved me lots of time! Pin
Stonkie22-Apr-11 12:00
memberStonkie22-Apr-11 12:00 
GeneralSplit it into ScrollGroupHorizontal and ScrollGroupVertical Pin
Erlend Robaye30-Mar-11 3:09
memberErlend Robaye30-Mar-11 3:09 
GeneralMy vote of 5 Pin
PumbaPumba23-Nov-10 23:15
memberPumbaPumba23-Nov-10 23:15 
GeneralMy vote of 5 Pin
PumbaPumba23-Nov-10 23:13
memberPumbaPumba23-Nov-10 23:13 
GeneralMy vote of 5 Pin
DayDreamer12311-Nov-10 22:30
memberDayDreamer12311-Nov-10 22:30 
GeneralModification for supporting ListView synchonisation Pin
DayDreamer12311-Nov-10 22:29
memberDayDreamer12311-Nov-10 22:29 
GeneralRe: Modification for supporting ListView synchonisation Pin
metalcam10-May-11 4:25
membermetalcam10-May-11 4:25 
GeneralGreat stuff, problem with nested scroll viewers (2nd edit) Pin
xmacias26-Aug-10 0:59
memberxmacias26-Aug-10 0:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150728.1 | Last Updated 30 Jun 2013
Article Copyright 2009 by Karin Huber
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid