c# - WP7 ScrollViewer programatically scroll a background ScrollViewer in sync with front ScrollViewer

Question

I am trying to create an animation whereby when a user Scrolls the "FrontScroll" the app automatically scrolls "BackgroundScroll", of the same size, to the same offset at the same rate. Layered in-between the front and background scroll is an image I would like to remain static. The middle image only fills 1/4 of the screen, the rest of the image is transparent in the png. I am trying to create the effect that other images appear gradually over and behind the static image when the user scrolls.

Currently I have an event on ManipulationCompleted which works, however it creates a very "jittery" effect, in that the background scroll does not scroll to position until the user lifts their finger from the screen. I would like to make the animation instant, whether the manipulation has completed on not, thus keeps the 2 ScrollViewers in perfect sync. Also at present, when a users "Flicks" the ScrollViewer to move a greater distance, the ManipulationCompleted event does not fire, thus the 2 ScrollViewers become out of sync. I have also tried the MouseWheel, MouseLeave, MouseMove events but none get the effect I am looking for.

Does anyone know if what I am trying to do is possible with the current API's in Windows Phone 7.5 and if so any pointers to how I can do this would be much appreciated?

My Current XAML and CodeBehind events are below.

        <ScrollViewer HorizontalAlignment="Center" Margin="0,0,0,0" Name="backgroundScroll" VerticalAlignment="Top"  Background="Transparent" MaxHeight="Infinity">
                <Image HorizontalAlignment="Center" Height="2000" Stretch="Fill" Source="[email protected]" />
        </ScrollViewer>

        <Image Source="[email protected]" HorizontalAlignment="Center" Name="MiddleStatic" Stretch="Fill" VerticalAlignment="Top" Margin="-1,-1,0,0" />

        <ScrollViewer   HorizontalAlignment="Center" Name="FrontScroll" VerticalAlignment="Top" MaxHeight="Infinity" MinHeight="0"  ManipulationCompleted="FrontScroll_ManipulationCompleted">
            <StackPanel Background="#00000000">
                <Image Height="2000" Source="[email protected]" HorizontalAlignment="Center" Name="FrontScroll" Stretch="Fill" />
            </StackPanel>
        </ScrollViewer>
    </Grid>


    private void FrontScroll_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
    {
        backgroundScroll.ScrollToVerticalOffset(((ScrollViewer)sender).VerticalOffset);
    }

Answer 1

Unfortunately because there is no Scroll event for the WP7 ScrollViewer, I am not sure if there is a "smooth" way to keep the two ScrollViewers in sync.

There is a way to keep the ScrollViewers in sync, however - create a DispatcherTimer, and set the Interval property to a small TimeSpan; 0.2 seconds for example. In the Tick event handler, set the 2nd scroll viewer's VerticalOffset to the first scroll viewer's vertical offset (like you are doing in the ManipulationCompleted event).

It still won't be smooth, but the timer firing should keep the scrolling in sync.