Question

Good day to all,
I am having difficulty finding information on how to create this cool pan effect in silverlight. Can any one help me out?
This is a link to a flash site that has the effect that i need.
http://www.marcecko.com/#/

Answer 1

I really liked the effect too, so I recreated it using Behaviors:

public class PanBehavior : Behavior<ScrollViewer>
{
    protected override void OnAttached()
    {
        this.AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);
        this.AssociatedObject.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
        this.AssociatedObject.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
    }

    void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
    {
        var mousePos = e.GetPosition(this.AssociatedObject);

        double panningY = this.AssociatedObject.ExtentHeight - this.AssociatedObject.ViewportHeight;
        double panningX = this.AssociatedObject.ExtentWidth - this.AssociatedObject.ViewportWidth;

        double relativeMouseY = mousePos.Y / this.AssociatedObject.ActualHeight;
        double relativeMouseX = mousePos.X / this.AssociatedObject.ActualWidth;

        panningY *= relativeMouseY;
        panningX *= relativeMouseX;

        this.AssociatedObject.ScrollToVerticalOffset(panningY);
        this.AssociatedObject.ScrollToHorizontalOffset(panningX);

    }
}

Just add this behavior to ANY ScrollViewer, and it simply works. as an example, this xaml:

<Grid>
        <ScrollViewer>
            <i:Interaction.Behaviors>
                <local:PanBehavior />
            </i:Interaction.Behaviors>
            <UniformGrid Width="1000" Height="1000" Rows="10" Columns="10">
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
                <Button Content="Hello" />
            </UniformGrid>
        </ScrollViewer>
    </Grid>

Note that I’ve tested this only in WPF, but it should work pretty much the same in Silverlight. –EDIT– Tested it, in both technologies.

+1 for cool question! 🙂