Friction Scrolling Now An WPF Attached Behaviour Too

A while ago I wrote about how to create a scrollable design surface in WPF, and how you could also add friction into the mix.

My original post was called “Creating A Scrollable Control Surface In WPF” which can be found at  the following url:

http://sachabarber.net/?p=225

This original blog post proved to be quite popular and one of my fellow WPF Disciples my homeboy Jeremiah Morrill took it upon himself to rewrite my little control to be a content control for Silverlight, which you can get to at  “Scrollable Friction Canvas For Silverlight” which can be found at  the following url:

http://sachabarber.net/?p=481

I have been asked for my original code a lot, and another of my friends, and founder of the WPF Disciples, Marlon Grech took my code and has further improved it for WPF users, by making it an attached behaviour so all you have to do is hook up one property on your ScrollViewer and bingo its a Friction enabled surface. Neato I say.

Here is Marlons attached behaviour code:

   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Text;
   5:  using System.Windows;
   6:  using System.Windows.Controls;
   7:  using System.Windows.Input;
   8:  using System.Windows.Threading;
   9:   
  10:  namespace ScrollableArea
  11:  {
  12:      public class KineticBehaviour
  13:      {
  14:          #region Friction
  15:   
  16:          /// <summary>
  17:          /// Friction Attached Dependency Property
  18:          /// </summary>
  19:          public static readonly DependencyProperty FrictionProperty =
  20:              DependencyProperty.RegisterAttached("Friction", 
  21:              typeof(double), typeof(KineticBehaviour),
  22:                  new FrameworkPropertyMetadata((double)0.95));
  23:   
  24:          /// <summary>
  25:          /// Gets the Friction property.  This dependency property 
  26:          /// indicates ....
  27:          /// </summary>
  28:          public static double GetFriction(DependencyObject d)
  29:          {
  30:              return (double)d.GetValue(FrictionProperty);
  31:          }
  32:   
  33:          /// <summary>
  34:          /// Sets the Friction property.  
  35:          /// </summary>
  36:          public static void SetFriction(DependencyObject d, double value)
  37:          {
  38:              d.SetValue(FrictionProperty, value);
  39:          }
  40:   
  41:          #endregion
  42:   
  43:          #region ScrollStartPoint
  44:   
  45:          /// <summary>
  46:          /// ScrollStartPoint Attached Dependency Property
  47:          /// </summary>
  48:          private static readonly DependencyProperty ScrollStartPointProperty =
  49:              DependencyProperty.RegisterAttached("ScrollStartPoint", 
  50:              typeof(Point), typeof(KineticBehaviour),
  51:                  new FrameworkPropertyMetadata((Point)new Point()));
  52:   
  53:          /// <summary>
  54:          /// Gets the ScrollStartPoint property.  
  55:          /// </summary>
  56:          private static Point GetScrollStartPoint(DependencyObject d)
  57:          {
  58:              return (Point)d.GetValue(ScrollStartPointProperty);
  59:          }
  60:   
  61:          /// <summary>
  62:          /// Sets the ScrollStartPoint property.  
  63:          /// </summary>
  64:          private static void SetScrollStartPoint(DependencyObject d, 
  65:              Point value)
  66:          {
  67:              d.SetValue(ScrollStartPointProperty, value);
  68:          }
  69:   
  70:          #endregion
  71:   
  72:          #region ScrollStartOffset
  73:   
  74:          /// <summary>
  75:          /// ScrollStartOffset Attached Dependency Property
  76:          /// </summary>
  77:          private static readonly DependencyProperty ScrollStartOffsetProperty =
  78:              DependencyProperty.RegisterAttached("ScrollStartOffset", 
  79:              typeof(Point), typeof(KineticBehaviour),
  80:                  new FrameworkPropertyMetadata((Point)new Point()));
  81:   
  82:          /// <summary>
  83:          /// Gets the ScrollStartOffset property.  
  84:          /// </summary>
  85:          private static Point GetScrollStartOffset(DependencyObject d)
  86:          {
  87:              return (Point)d.GetValue(ScrollStartOffsetProperty);
  88:          }
  89:   
  90:          /// <summary>
  91:          /// Sets the ScrollStartOffset property.  
  92:          /// </summary>
  93:          private static void SetScrollStartOffset(DependencyObject d, 
  94:              Point value)
  95:          {
  96:              d.SetValue(ScrollStartOffsetProperty, value);
  97:          }
  98:   
  99:          #endregion
 100:   
 101:          #region InertiaProcessor
 102:   
 103:          /// <summary>
 104:          /// InertiaProcessor Attached Dependency Property
 105:          /// </summary>
 106:          private static readonly DependencyProperty InertiaProcessorProperty =
 107:              DependencyProperty.RegisterAttached("InertiaProcessor", 
 108:              typeof(InertiaHandler), typeof(KineticBehaviour),
 109:                  new FrameworkPropertyMetadata((InertiaHandler)null));
 110:   
 111:          /// <summary>
 112:          /// Gets the InertiaProcessor property.  
 113:          /// </summary>
 114:          private static InertiaHandler GetInertiaProcessor(DependencyObject d)
 115:          {
 116:              return (InertiaHandler)d.GetValue(InertiaProcessorProperty);
 117:          }
 118:   
 119:          /// <summary>
 120:          /// Sets the InertiaProcessor property.  
 121:          /// </summary>
 122:          private static void SetInertiaProcessor(DependencyObject d, 
 123:              InertiaHandler value)
 124:          {
 125:              d.SetValue(InertiaProcessorProperty, value);
 126:          }
 127:   
 128:          #endregion
 129:   
 130:          #region HandleKineticScrolling
 131:   
 132:          /// <summary>
 133:          /// HandleKineticScrolling Attached Dependency Property
 134:          /// </summary>
 135:          public static readonly DependencyProperty 
 136:              HandleKineticScrollingProperty =
 137:              DependencyProperty.RegisterAttached("HandleKineticScrolling", 
 138:              typeof(bool), typeof(KineticBehaviour),
 139:                  new FrameworkPropertyMetadata((bool)false,
 140:                      new PropertyChangedCallback(
 141:                          OnHandleKineticScrollingChanged)));
 142:   
 143:          /// <summary>
 144:          /// Gets the HandleKineticScrolling property.  
 145:          /// </summary>
 146:          public static bool GetHandleKineticScrolling(DependencyObject d)
 147:          {
 148:              return (bool)d.GetValue(HandleKineticScrollingProperty);
 149:          }
 150:   
 151:          /// <summary>
 152:          /// Sets the HandleKineticScrolling property.  
 153:          /// </summary>
 154:          public static void SetHandleKineticScrolling(DependencyObject d, 
 155:              bool value)
 156:          {
 157:              d.SetValue(HandleKineticScrollingProperty, value);
 158:          }
 159:   
 160:          /// <summary>
 161:          /// Handles changes to the HandleKineticScrolling property.
 162:          /// </summary>
 163:          private static void OnHandleKineticScrollingChanged(DependencyObject d, 
 164:              DependencyPropertyChangedEventArgs e)
 165:          {
 166:              ScrollViewer scoller = d as ScrollViewer;
 167:              if ((bool)e.NewValue)
 168:              {
 169:                  scoller.PreviewMouseDown += OnPreviewMouseDown;
 170:                  scoller.PreviewMouseMove += OnPreviewMouseMove;
 171:                  scoller.PreviewMouseUp += OnPreviewMouseUp;
 172:                  SetInertiaProcessor(scoller, new InertiaHandler(scoller));
 173:              }
 174:              else
 175:              {
 176:                  scoller.PreviewMouseDown -= OnPreviewMouseDown;
 177:                  scoller.PreviewMouseMove -= OnPreviewMouseMove;
 178:                  scoller.PreviewMouseUp -= OnPreviewMouseUp;
 179:                  var inertia = GetInertiaProcessor(scoller);
 180:                  if (inertia != null)
 181:                      inertia.Dispose();
 182:              }
 183:              
 184:          }
 185:   
 186:          #endregion
 187:   
 188:          #region Mouse Events
 189:          private static void OnPreviewMouseDown(object sender, 
 190:              MouseButtonEventArgs e)
 191:          {
 192:              var scrollViewer = (ScrollViewer)sender;
 193:              if (scrollViewer.IsMouseOver)
 194:              {
 195:                  // Save starting point, used later when 
 196:                  //determining how much to scroll.
 197:                  SetScrollStartPoint(scrollViewer, 
 198:                      e.GetPosition(scrollViewer));
 199:                  SetScrollStartOffset(scrollViewer, 
 200:                      new Point(scrollViewer.HorizontalOffset, 
 201:                          scrollViewer.VerticalOffset));
 202:                  scrollViewer.CaptureMouse();
 203:              }
 204:          }
 205:   
 206:   
 207:          private static void OnPreviewMouseMove(object sender, MouseEventArgs e)
 208:          {
 209:              var scrollViewer = (ScrollViewer)sender;
 210:              if (scrollViewer.IsMouseCaptured)
 211:              {
 212:                  Point currentPoint = e.GetPosition(scrollViewer);
 213:   
 214:                  var scrollStartPoint = GetScrollStartPoint(scrollViewer);
 215:                  // Determine the new amount to scroll.
 216:                  Point delta = new Point(scrollStartPoint.X - 
 217:                      currentPoint.X, scrollStartPoint.Y - currentPoint.Y);
 218:   
 219:                  var scrollStartOffset = GetScrollStartOffset(scrollViewer);
 220:                  Point scrollTarget = new Point(scrollStartOffset.X + 
 221:                      delta.X, scrollStartOffset.Y + delta.Y);
 222:   
 223:                  var inertiaProcessor = GetInertiaProcessor(scrollViewer);
 224:                  if (inertiaProcessor != null)
 225:                      inertiaProcessor.ScrollTarget = scrollTarget;
 226:                  
 227:                  // Scroll to the new position.
 228:                  scrollViewer.ScrollToHorizontalOffset(scrollTarget.X);
 229:                  scrollViewer.ScrollToVerticalOffset(scrollTarget.Y);
 230:              }
 231:          }
 232:   
 233:          private static void OnPreviewMouseUp(object sender, 
 234:              MouseButtonEventArgs e)
 235:          {
 236:              var scrollViewer = (ScrollViewer)sender;
 237:              if (scrollViewer.IsMouseCaptured)
 238:              {
 239:                  scrollViewer.ReleaseMouseCapture();
 240:              }
 241:          }
 242:          #endregion
 243:   
 244:          #region Inertia Stuff
 245:   
 246:          /// <summary>
 247:          /// Handles the inertia 
 248:          /// </summary>
 249:          class InertiaHandler : IDisposable
 250:          {
 251:              private Point previousPoint;
 252:              private Vector velocity;
 253:              ScrollViewer scroller;
 254:              DispatcherTimer animationTimer;
 255:   
 256:              private Point scrollTarget;
 257:              public Point ScrollTarget 
 258:              {   
 259:                  get { return scrollTarget; } 
 260:                  set { scrollTarget = value; } 
 261:              }
 262:   
 263:              public InertiaHandler(ScrollViewer scroller)
 264:              {
 265:                  this.scroller = scroller;
 266:                  animationTimer = new DispatcherTimer();
 267:                  animationTimer.Interval = 
 268:                      new TimeSpan(0, 0, 0, 0, 20);
 269:                  animationTimer.Tick += 
 270:                      new EventHandler(HandleWorldTimerTick);
 271:                  animationTimer.Start();
 272:              }
 273:   
 274:              private void HandleWorldTimerTick(object sender, 
 275:                  EventArgs e)
 276:              {
 277:                  if (scroller.IsMouseCaptured)
 278:                  {
 279:                      Point currentPoint = Mouse.GetPosition(scroller);
 280:                      velocity = previousPoint - currentPoint;
 281:                      previousPoint = currentPoint;
 282:                  }
 283:                  else
 284:                  {
 285:                      if (velocity.Length > 1)
 286:                      {
 287:                          scroller.ScrollToHorizontalOffset(
 288:                              ScrollTarget.X);
 289:                          scroller.ScrollToVerticalOffset(
 290:                              ScrollTarget.Y);
 291:                          scrollTarget.X += velocity.X;
 292:                          scrollTarget.Y += velocity.Y;
 293:                          velocity *= 
 294:                              KineticBehaviour.GetFriction(scroller);
 295:                      }
 296:                  }
 297:              }
 298:   
 299:              #region IDisposable Members
 300:   
 301:              public void Dispose()
 302:              {
 303:                  animationTimer.Stop();
 304:              }
 305:   
 306:              #endregion
 307:          }
 308:   
 309:          #endregion
 310:      }
 311:  }

Which to use you would simply do this :

   1:  <Window x:Class="ScrollableArea.Window1"
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:      xmlns:local="clr-namespace:ScrollableArea"
   5:      Title="Window1" Height="300" Width="300">
   6:      <Window.Resources>
   7:   
   8:          <!-- scroll viewer -->
   9:          <Style x:Key="ScrollViewerStyle"
  10:                 TargetType="{x:Type ScrollViewer}">
  11:              <Setter Property="HorizontalScrollBarVisibility" 
  12:                      Value="Hidden" />
  13:              <Setter Property="VerticalScrollBarVisibility" 
  14:                      Value="Hidden" />
  15:          </Style>
  16:   
  17:      </Window.Resources>
  18:   
  19:      <Grid Margin="0">
  20:          <ScrollViewer x:Name="ScrollViewer" 
  21:              Style="{StaticResource ScrollViewerStyle}" 
  22:              local:KineticBehaviour.HandleKineticScrolling="True">
  23:              <ItemsControl x:Name="itemsControl" 
  24:                            VerticalAlignment="Center">
  25:   
  26:                  <ItemsControl.ItemsPanel>
  27:                      <ItemsPanelTemplate>
  28:                          <!-- Custom Panel-->
  29:                          <StackPanel Orientation="Vertical"/>
  30:                      </ItemsPanelTemplate>
  31:                  </ItemsControl.ItemsPanel>
  32:   
  33:   
  34:              </ItemsControl>
  35:          </ScrollViewer>
  36:      </Grid>
  37:   
  38:  </Window>

As always here is a small demo app:

http://dl.dropbox.com/u/2600965/ScrollableAreaAttachedBehaviour.zip