WPF ScrollViewer DoubleAnimation with Easing

Posted: July 12, 2011 in Dissertation, Kinect
Tags: , , , , , , ,

Yeah, one of those.

The trouble with the standard WPF ScrollViewer is that it doesn’t scroll very nicely. Firstly it snaps to the extremities of its components (i.e. to the edges of images) making smooth scrolling impossible. Secondly it doesn’t support .NET’s reasonably powerful animation effects. I sorted this by making my own animation mediator for a ScrollViewer, enabling all that stuff I just mentioned. Here’s a demo:

The intention is to hook this up to the Kinect gesture recogniser so that natural interactions (i.e. swipe gestures) can have a ‘natural’ effect on a menu system. Because, really, if you perform a swipe action on an object you don’t expect it to move uniformly and snap to unnatural positions; instead you would expect it to have inertia, to decelerate, and to rest in a natural position (i.e. a function of how hard you ‘pushed’ it). This WPF extension achieves that.

Advertisements
Comments
    • rymixxx says:

      Sure. Just do something like this:


      public void animateScrollViewerWidth(string direction, double percentageOfWidth)
      {
      var da = new DoubleAnimation();
      if (_scrollerReady)
      {
      if (direction == "left")
      {
      da.From = Scroller.HorizontalOffset/Scroller.ScrollableWidth;
      da.To = (Scroller.HorizontalOffset/Scroller.ScrollableWidth) + (percentageOfWidth/100);
      }
      if (direction == "right")
      {
      da.From = Scroller.HorizontalOffset/Scroller.ScrollableWidth;
      da.To = (Scroller.HorizontalOffset/Scroller.ScrollableWidth) - (percentageOfWidth/100);
      }
      }
      da.Duration = new Duration(TimeSpan.FromSeconds(2));
      var easingFunction = new QuarticEase();
      easingFunction.EasingMode = EasingMode.EaseOut;
      da.EasingFunction = easingFunction;
      _scrollerReady = false;
      da.Completed += new EventHandler(UpdateLocations);
      da.Completed += new EventHandler(ScrollerReady);
      Mediator.BeginAnimation(ScrollViewerOffsetMediator.ScrollableWidthMultiplierProperty, da);
      }

      and in the XAML:
      <ScrollViewer x:Name="Scroller" Margin="0,0,0,0" Visibility="Visible" VerticalScrollBarVisibility="Disabled" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" HorizontalScrollBarVisibility="Hidden">
      <!--Whatever you like in here. Canvases, Images, Shapes, whatever-->
      </ScrollViewer>
      <local:ScrollViewerOffsetMediator x:Name="Mediator" ScrollViewer="{Binding ElementName=Scroller}" Grid.Column="1" Grid.Row="1"/>

  1. me says:

    why not post the full source? this is useless without it. Just comes across as bragging

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s