user758024
Reputation: 33
Pan effect in silverlight
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/#/
Upvotes: 3
Views: 184
Answers (1)
Elad Katz
Reputation: 7591
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! :)
Upvotes: 2
Related Questions
- Visual Trick in XAML for Silverlight
- Scroll with mousewheel and zoom image with panning
- Esri Silverlight control Pan/Zoom from code
- Create silverlight panoramic viewer
- Silverlight animations tool
- silverlight animation question
- Motion Animation in Silverlight?
- How do I implement a "Frame effect" in Silverlight
- Silverlight: animate and/or pan an image
- Grab-to-pan in Silverlight app